0

我正在尝试重建 Recoiljs 以在 IE 11 上使用它。https://github.com/facebookexperimental/Recoil

为了转换我的代码，我添加@babel/preset-env了我的rollup.config.js.

babel({
    exclude: 'node_modules/**',
    presets: [
      [
        '@babel/preset-env',
        {
          targets: '> 0.25%, not dead',
        },
      ],
      '@babel/preset-react',
      '@babel/preset-flow',
    ],
    plugins: [
      'babel-preset-fbjs/plugins/dev-expression',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/transform-flow-strip-types',
    ],
    babelHelpers: 'bundled',
  }),

现在，我注意到了一些奇怪的事情。代码转换没有任何麻烦，但是当我打开输出 cjs 文件时，引用的位置Recoil_atom更改为如下所示。基本上，它不起作用。

var Recoil_atom = /*#__PURE__*/Object.freeze({
  __proto__: null
});

正确编译后，它会编译到下面

function atom(options) {
  ... related code
}
var Recoil_atom = atom;

现在，我发现了一个有点奇怪的解决方法。与其提供其他预设，不如提供@babel/preset-env另一个 babel 选项来解决这个问题。

const commonPlugins = [
  babel({
    exclude: 'node_modules/**',
    presets: [
      '@babel/preset-react',
      '@babel/preset-flow',
    ],
    plugins: [
      'babel-preset-fbjs/plugins/dev-expression',
      '@babel/plugin-proposal-class-properties',
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-optional-chaining',
      '@babel/transform-flow-strip-types',
    ],
    babelHelpers: 'bundled',
  }),
  nodeResolvePlugin, // @rollup/plugin-node-resolve
  commonjs(), // @rollup/plugin-commonjs 
  babel({
    exclude: 'node_modules/**',
    presets: [
      [
        '@babel/preset-env',
        {targets: '> 0.25%, not dead', useBuiltIns: 'usage', corejs: '3'},
      ],
    ],
    babelHelpers: 'bundled',
  }),
];

它有效，但我完全不明白为什么。有什么帮助吗？

4

0 回答 0