Question

我正在使用带Webpack 4的Babel 7进行Web项目。我以前从未使用过Babel，也无法真正理解其中的某些部分。基于documentation，我正在使用@babel/preset-env，因为这似乎是推荐的方式（特别是对于初学者）。还可以通过我的.browserslistrc文件使用Browserslist集成。

Webpack很好地进行了编译（babel-loader版本8.0.2），我没有错误，但是对此useBuiltIns: "entry" option mentioned here以及polyfill的方式感到困惑系统正在Babel中运行。

.babelrc.js

module.exports = {
  presets: [
    ['@babel/preset-env', {
      "useBuiltIns": "entry" // do I need this?
    }]
  ],
  plugins: [
    '@babel/plugin-syntax-dynamic-import'
  ]
};

.browserslistrc
从here复制（这是合理的，因为我的项目正在使用Bootstrap）。

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

所以我的问题是：

1）我需要使用该useBuiltIns: "entry"选项吗？

2）我是否需要安装@babel/polyfill软件包并以vendors.js开始我的require("@babel/polyfill");？

3）如果我都省略了怎么办？

如果我做1和2，我的vendors.js会长到411 KB
如果我都忽略了，那只是341 KB
生产完成后。

我认为@babel/preset-env默认处理所有重写和polyfill，而我这边不需要任何额外的import/require ...

谢谢！

-编辑-

Babel的团队基于一些GitHub问题（包括我的问题），updated docs of @babel/polyfill抱怨文档不清晰/误导。现在很明显如何使用它。（...之后，我的原始问题似乎很愚蠢：）

Answer 1

1）我需要使用useBuiltIns：“ entry”选项吗？

是的，根据babel文档：

“此选项启用一个新插件，该插件将导入” @ babel / polyfill”或require（“ @ babel / polyfill”）替换为基于环境的@ babel / polyfill的个别需求”-基本上，包括所有需要的polyfill （在需要时安装了adj_int = 0时）。

2）我是否需要安装@ babel / polyfill软件包并使用require（“ @ babel / polyfill”）启动我的vendor.js；？

您确实需要安装adj_int = 1，babel上默认没有安装它。您必须将其包括在入口点上，或在入口点的顶部添加导入。

3）如果我都省略了怎么办？

您将没有polyfills。

Answer 2

1）我需要使用useBuiltIns：“ entry”选项吗？

是的，如果您想根据目标环境添加polyfills。

TL; DR

useBuiltIns基本上有3个选项：

“输入” ：使用此选项时，@babel/preset-env会将core-js的直接导入替换为仅导入目标环境所需的特定模块。

这意味着您需要添加

import "core-js/stable";
import "regenerator-runtime/runtime";

到您的入口点，这些行将仅被所需的polyfill替换。定位chrome 72时，它将由@babel/preset-env转换为

import "core-js/modules/es.array.unscopables.flat";
import "core-js/modules/es.array.unscopables.flat-map";
import "core-js/modules/es.object.from-entries";
import "core-js/modules/web.immediate";

“用法” ：在这种情况下，当目标环境中不支持某些功能的使用时，将自动添加polyfills。所以：

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

在ie11之类的浏览器中，

将替换为

import "core-js/modules/es.array.includes";
import "core-js/modules/es.array.iterator";
import "core-js/modules/es.object.to-string";
import "core-js/modules/es.set";

const set = new Set([1, 2, 3]);
[1, 2, 3].includes(2);

如果目标浏览器是最新的Chrome，则不会进行任何转换。

这是我个人选择的武器，因为无需根据源代码中设置的目标环境自动添加所需的polyfill，因此无需在源代码中包含任何内容（core-js或regenerator）。

否：这是没有自动添加polyfill时的默认值。

2）我需要安装@ babel / polyfill软件包并启动我的具有require（“ @ babel / polyfill”）的vendors.js；？

对于babel v7.4和core-js v3之前的环境是。

TL; DR

不。 babel v7.4从core-js v3和@babel/preset-env（用于引擎盖下的填充）开始，@babel/polyfill仅在知道哪些填充物需要并按推荐的顺序添加时才添加。

此外，core-js被认为已过时，赞成使用单独的regenerator-runtime和useBuiltIns包含。

因此，将core-js与非false选项一起使用应该可以解决此问题。

不要忘记将@babel/preset-env添加为项目的依赖项，并在corejs属性下的core-js中设置其版本。

3）如果我都省略了怎么办？

由于@ PlayMa256已经回答，因此将不会有polyfills。

有关更详细和完整的信息，请访问<button>Previous</button> <div>HouseHold</div>  <button>Next</button> creator's page

也请随时与babel sandbox一起玩

对@ babel / preset-env的useBuiltIns选项感到困惑（使用Browserslist集成）

2 个答案: