如何在供应商捆绑包上使用babel的`useBuiltIns:'usage'`选项? [英] How do I use babel's `useBuiltIns: 'usage'` option on the vendors bundle?

问题描述

由于我还需要支持IE11，因此我还需要转换node_modules.

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

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

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

但是，此配置在编译时中断，可能是因为它在代码中注入了一些imports，这是错误:

的属性'exports'

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

目前，我始终需要在index.html中使用babel polyfill来解决，但这并不理想.

解决方案

Babel默认假定它处理的文件是ES模块(使用import和export).如果您正在node_modules中的内容(可能是CommonJS模块)上运行Babel，则需要告诉Babel将所有node_modules作为脚本进行处理，或者告诉Babel根据和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)，则意味着该文件现在将在同一文件中同时使用两个模块系统，这是一个大问题，并会导致您看到错误./p>

Since I need to support also IE11, I need to transpile also node_modules.

This is the babel config I use on the node_modules:

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

I use the useBuiltIns options because it was giving an error Symbol is not defined, the polyfill was needed.

However this configuration breaks at compile time, supposedly because it injects some imports in the code, here is the error:

Basically it's not liking the module.exports. So how do I use useBuiltIns in the vendors bundle?

For now I solved by always requiring the babel polyfill in the index.html, however this is not ideal.

解决方案

Babel by default assumes that files it processes are ES modules (using import and export). If you are running Babel on things in node_modules (which are likely CommonJS modules), you'll need to either tell Babel to process all node_modules as scripts, or tell Babel to guess the type based on the presence of import and export. Guessing is easiest, so you can add

sourceType: "unambiguous"

and also tell Babel not to run the usage transform on core-js itself with

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

because otherwise the usage transform will actually be inserting references to core-js into itself causing dependency cycles.

So in your top-level Babel configuration, you'd do e.g.

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

If you wanted to be extra specific about it, you could also do

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

to only set the flag for files inside node_modules, but there is likely not much to gain by doing that.

As for why this fixes that error, the issue is that, if Babel thinks something is an ES module, it will insert import statements. If you insert import statements into a file that also uses CommonJS things like module.exports, it means the file would now be using both module systems in the same file, which is a big issue and causes the errors you are seeing.

这篇关于如何在供应商捆绑包上使用babel的`useBuiltIns:'usage'`选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！