81

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

Webpack 编译得很好（babel-loader版本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
从这里复制（认为合理，因为我的项目使用的是 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默认情况下会处理所有的重写和填充，而import/require我不需要任何额外的东西......

谢谢！

- 编辑 -

Babel 的团队刚刚更新了基于一些 GitHub 问题（包括我的问题）的文档，@babel/polyfill这些问题抱怨文档不清晰/具有误导性。现在很明显如何使用它。（......在那之后我原来的问题似乎很愚蠢:)

4

2 回答 2

115

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

是的，如果你想根据你的目标环境包含 polyfill。

TL;博士

基本上有3个选项useBuiltIns：

“entry”：使用此选项时，@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";

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

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

在浏览器中，likeie11将替换为

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），因为只会根据浏览器列表中设置的目标环境自动添加所需的 polyfill。

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

2) 我需要安装@babel/polyfill 包并使用require("@babel/polyfill"); 启动我的vendors.js吗？?

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

TL;博士

不会。从babel v7.4and开始core-js v3（用于底层@babel/preset-env的 polyfill）只会在它知道需要哪些并按照推荐的顺序添加 polyfill 时。

此外@babel/polyfill，被认为已弃用，有利于分离core-js和regenerator-runtime包含。

因此，使用useBuiltIns除 false 以外的选项应该可以解决问题。

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

3）如果我省略两者怎么办？

正如@PlayMa256 已经回答的那样，不会有polyfills。

更详细和完整的信息可以在core-js 创建者的页面上找到

也请随意玩babel 沙箱

于 2019-06-08T09:52:25.267 回答
15

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

是的，根据 babel 文档：

“此选项启用了一个新插件，该插件将语句 import "@babel/polyfill" 或 require("@babel/polyfill") 替换为基于环境的 @babel/polyfill 的个别要求” - 基本上，包括所有需要的 polyfill（当您需要@babel/polyfill时安装）。

2) 我需要安装@babel/polyfill 包并使用require("@babel/polyfill"); 启动我的vendors.js吗？?

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

3）如果我省略两者怎么办？

你不会有polyfills。

于 2018-10-03T11:44:56.577 回答