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

我正在使用Babel 7和Webpack 4进行一个web项目。我以前从未使用过Babel，也不能真正理解它的某些部分。基于这一点，我正在使用

@babel/preset env

，因为它似乎是推荐的方法（尤其是对于初学者）。还可以通过我的

.browserslistrc

文件使用Browserslist集成

Webpack编译得很好（

babel loader

version

8.0.2

），我没有错误，但我对

useBuiltIns:“entry”

和

polyfill

系统在babel中的工作方式感到困惑

.babelrc.js

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

.browserslistrc
复制自（认为合理，因为我的项目使用引导）

所以我的问题是：

1） 我是否需要使用

useBuiltIns:“entry”

选项

2） 我是否需要安装

@babel/polyfill

软件包并使用

require（“@babel/polyfill”）启动我的
vendors.js

3） 如果我两者都省略了呢

如果执行1和2，我的
vendors.js
将增长到
411KB


如果我两者都选的话，它只是
341kb


在生产构建之后

我想
@babel/preset env
默认情况下会处理所有的重写和多边形填充，而不需要任何额外的
import/require

谢谢

--编辑--

Babel的团队刚刚基于一些GitHub问题（包括我的问题），抱怨文档不清楚/误导。现在很明显如何使用它。（…在那之后，我原来的问题似乎很愚蠢：）

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

是的，根据巴贝尔文件：

“此选项启用一个新插件，将语句导入“@babel/polyfill”或require（@babel/polyfill”）替换为基于环境的@babel/polyfill的单个requires”-基本上包括所有需要的polyfill（当您在需要时安装了
@babel/polyfill
）

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

您确实需要安装
@babel/polyfill
，默认情况下，它不会出现在babel上。您必须将其包含在入口点上，或在入口点顶部添加导入

3） 如果我两者都省略了呢

你不会有多边形填充

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

是，如果要基于目标环境包含多边形填充

TL；博士

对于
useBuiltIns
，基本上有3个选项：

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

这意味着您需要添加

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

到您的入口点，这些线将仅替换为所需的多边形填充。当瞄准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";


“用法”：在这种情况下，当目标环境中不支持使用某些功能时，将自动添加多边形填充。因此：

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，则不会应用任何转换

这是我个人选择的武器，因为不需要在源代码中包含任何内容（core js或regenerator），因为只需要根据browserlist中设置的目标环境自动添加所需的多边形填充


false：当没有自动添加多边形填充时，这是默认值


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

适用于
babel v7.4
和
core js v3
之前的环境

TL；博士

否。从
babel v7.4
和
core js v3
（用于发动机罩下的polyfilling）
@babel/preset env
开始，只有在知道需要哪些polyfilling时，才会按照建议的顺序添加polyfilling

此外，
@babel/polyfill
被认为是不推荐使用的，支持单独的
核心js
和
再生器运行时
包含

因此，将
useBuiltIns
与false以外的选项一起使用应该可以解决这个问题

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


3） 如果我两者都省略了呢

由于@PlayMa256已经应答，因此将不会有多边形填充


更多详细和完整的信息可在
core js

也请随意玩
谢谢，现在我明白了。同时，我已经阅读了《巴贝尔polyfill》的文档，这一部分非常有用：目前关于这一部分的文档：围绕这个主题的语言非常混乱，最初似乎自相矛盾……现在还不清楚它的意思是什么，导入“@babel/polyfill”语句必须位于入口点的顶部，当使用useBuiltIns:“entry”时，此语句将自动替换，以便您在生成时导入所需的各个多边形填充注意，如果将
useBuiltIns
设置为“usage”，则不必再将
@babel/polyfill
添加到入口数组中。对于任何刚接触Babel并想了解transpiling和polyfills的人，这里有一篇精彩的文章介绍了所有这些：当使用“用法”时，我必须使用
import“core js/stable”；导入“再生器运行时/运行时”？不，您只需将
核心js
添加到Dependencies谢谢！应标记为答案。我发现关于Babel polyfills的文档仍然不足。“代表”一词
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);