如何在供应商捆绑包上使用 babel 的 `useBuiltIns: 'usage'` 选项？

Question

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

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

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

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

但是这个配置在编译时中断，据说是因为它在代码中注入了一些imports，这是错误：

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

现在我通过总是要求index.html 中的 babel polyfill 解决了这个问题，但这并不理想。

Answer 1

Babel 默认假定它处理的文件是 ES 模块（使用 import 和 export）。如果你在 node_modules（可能是 CommonJS 模块）中运行 Babel，你需要告诉 Babel 将所有 node_modules 处理为脚本，或者告诉 Babel 根据 @987654327 的存在来猜测类型@ 和 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 语句插入到一个也使用诸如module.exports 之类的CommonJS 的文件中，这意味着该文件现在将在同一个文件中使用两个模块系统，这是一个大问题并导致您看到的错误。