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

Posted 2023-02-18

【中文标题】如何在供应商捆绑包上使用 babel 的 `useBuiltIns: \'usage\'` 选项？

【英文标题】：How do I use babel's `useBuiltIns: 'usage'` option on the vendors bundle?如何在供应商捆绑包上使用 babel 的 `useBuiltIns: 'usage'` 选项？

【发布时间】：2019-02-23 17:24:13

【问题描述】：

由于我还需要支持 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 解决了这个问题，但这并不理想。

【参考方案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 的文件中，这意味着该文件现在将在同一个文件中使用两个模块系统，这是一个大问题并导致您看到的错误。

【讨论】：

试过了，出现了这个错误：i.imgur.com/slZtKT5.png 这是一个进步，因为它是一个不同的错误！

顺便说一下，应该注意的是，在这种情况下，我将 babel 配置作为选项传递给 babel-loader

@Pontiacks 我已经在配置中添加了另一个excludes，如果你想试一试的话。

/@babel\b/ 也应该被排除在外，至少在使用transform-runtime 时

感谢sourceType: "unambiguous"，我可能几天都没有想到这个。尤其令人费解的是，这批问题只有在开启useBuiltins: "usage" 后才会出现，而过去正常工作的CJS 代码开始以这种方式和其他方式失败（我自己得到了ES Modules may not assign module.exports or exports.*）。