internet-explorer - 如何在供应商 bundle 上使用 babel 的 `useBuiltIns: ' use'` 选项？

Question

由于我还需要支持 IE11，因此我还需要转译 node_modules。

这是我在 node_modules 上使用的 babel 配置:

presets: [
  ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],

我使用useBuiltIns选项，因为它给出了错误Symbol is not Defined，需要polyfill。

但是，此配置在编译时中断，据说是因为它在代码中注入(inject)了一些导入，错误如下:

基本上它不喜欢module.exports。那么如何在供应商包中使用 useBuiltIns 呢？

目前，我通过始终在 index.html 中要求 babel polyfill 来解决，但这并不理想。

Answer 1

Babel 默认情况下假定它处理的文件是 ES 模块(使用 import 和 export)。如果您在 node_modules 中的内容(可能是 CommonJS 模块)上运行 Babel，则需要告诉 Babel 将所有 node_modules 作为脚本处理，或者告诉 Babel根据 import 和 export 的存在来猜测类型。猜测是最简单的，所以你可以添加

sourceType: "unambiguous"

并且还告诉 Babel 不要在 core-js 本身上运行 usage 转换

ignore: [
  /\/core-js/,
],

因为否则 usage 转换实际上会将 core-js 的引用插入到本身中，从而导致依赖循环。

所以在你的顶级 Babel 配置中，你会这样做:

{
  ignore: [
    /\/core-js/,
  ],
  sourceType: "unambiguous",
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
}

如果您想更加具体，也可以这样做

{
  ignore: [
    /\/core-js/,
  ],
  presets: [
    ['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
  ],
  overrides: [{
    test: "./node_modules",
    sourceType: "unambiguous",
  }],
}

只为node_modules内的文件设置标志，但这样做可能不会获得太多好处。

至于为什么修复了这个错误，问题是，如果 Babel 认为某个东西是 ES 模块，它会插入 import 语句。如果将 import 语句插入到也使用 CommonJS 内容(例如 module.exports)的文件中，则意味着该文件现在将在同一文件中使用两个模块系统，即一个大问题并导致您看到的错误。