对@ babel/preset-env的useBuiltIns选项感到困惑(使用Browserslist集成) [英] Confused about useBuiltIns option of @babel/preset-env (using Browserslist Integration)

问题描述

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

Webpack很好地进行了编译(babel-loader版本8.0.2)，我没有任何错误，但是对此感到困惑.useBuiltIns: "entry"

.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软件包并用require("@babel/polyfill");启动我的vendors.js吗?

3)如果我两个都省略了怎么办?

如果我做1和2，我的vendors.js长大到411 KB
如果我两者都省略，那只是341 KB
生产完成后.

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

谢谢！

-编辑-

Babel的团队仅已更新 解决方案

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与false以外的选项一起使用应该可以解决此问题.

别忘了添加core-js作为项目的依赖项，并在corejs属性下的@babel/preset-env中设置其版本.

---

3)如果我两个都省略了怎么办?

@ PlayMa256已经回答，因此将不会有polyfills.

---

更多详细信息和完整信息请参见core-js babel沙箱

I'm working on a web project using Babel 7 with Webpack 4. I've never used Babel before and can't really understand some parts of it. Based on the documentation I'm using @babel/preset-env because it seems the recommended way (especially for beginners). Also using Browserslist integration via my .browserslistrc file.

Webpack does the compilation well (babel-loader version 8.0.2), I have no errors but I'm confused about this useBuiltIns: "entry" option mentioned here and how polyfill system is working in Babel.

.babelrc.js

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

.browserslistrc
Copied from here (thought reasonable because my project is using 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

So my questions are:

1) Do I need to use that useBuiltIns: "entry" option?

2) Do I need to install @babel/polyfill package and start my vendors.js with require("@babel/polyfill"); ?

3) What if I omit both?

If I do 1 and 2, my vendors.js grows up to 411 KB
If I ommit both it's just 341 KB
after a production build.

I thought @babel/preset-env handles all the rewrites and polyfills by default without any extra import/require needed on my side...

Thanks!

-- EDIT --

Babel's team has just updated the docs of @babel/polyfill based on some GitHub issues (including mine) complaining about unclear/misleading documentation. Now it's obvious how to use it. (...and after that my original question seems stupid :)

解决方案

1) Do I need to use that useBuiltIns: "entry" option?

Yes, if you want to include polyfills based on your target environment.

TL;DR

There're basically 3 options for useBuiltIns:

"entry": when using this option, @babel/preset-env replaces direct imports of core-js to imports of only the specific modules required for a target environment.

That means you need to add

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

to your entry point and these lines will be replaced by only required polyfills. When targeting chrome 72, it will be transformed by @babel/preset-env to

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": in this case polyfills will be added automatically when the usage of some feature is unsupported in target environment. So:

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

in browsers like ie11 will be replaced with

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);

In case target browser is latest chrome, no transformations will apply.

That's personally my chosen weapon as there's no need to include anything (core-js or regenerator) in source code as only required polyfills will be added automatically based on target environment set in browserlist.

---

false: that's the default value when no polyfills are added automatically.

---

2) Do I need to install @babel/polyfill package and start my vendors.js with require("@babel/polyfill"); ?

Yes for environment prior to babel v7.4 and core-js v3.

TL;DR

No. Starting from babel v7.4 and core-js v3 (which is used for polyfilling under the hood) @babel/preset-env will add the polyfills only when it know which of them required and in the recommended order.

Moreover @babel/polyfill is considered as deprecated in favor of separate core-js and regenerator-runtime inclusions.

So using of useBuiltIns with options other than false should solve the issue.

Don't forget to add core-js as a dependency to your project and set its version in @babel/preset-env under corejs property.

---

3) What if I omit both?

As @PlayMa256 already answered, there will be no polyfills.

---

More detailed and whole info con be found at core-js creator's page

Also please feel free to play with babel sandbox

这篇关于对@ babel/preset-env的useBuiltIns选项感到困惑(使用Browserslist集成)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！