介绍
ES6 是一种新的 JavaScript 标准，在 ES6 中引入了很多新的语法和功能，为了使所有浏览器都能够正确地解析这些新特性，我们需要使用 Babel 转换器来将 ES6 代码转换成浏览器可以识别的 ES5 代码。Babel 转换器通过使用 polyfill 来实现 ES6 标准中新功能和语法的兼容性，本文将探讨如何正确配置 polyfill 以兼容 ES6 语法。
什么是 Polyfill
Polyfill 是一个 JavaScript 库，它将新的 JavaScript 功能“填充”到旧的浏览器中，使旧版本的浏览器可以支持新的 JavaScript 语法和功能。在 Babel 中，我们可以使用 @babel/polyfill 来添加 polyfill。
如何配置 Polyfill
对于 Babel 7，我们可以使用 @babel/preset-env 预设来配置 polyfill。@babel/preset-env 可以根据目标环境自动包含所需的 polyfill，不需要手动添加每个 polyfill。为了使用 @babel/preset-env，我们需要在项目中安装 @babel/preset-env。
npm install @babel/preset-env --save-dev
安装完成后，我们需要在 Babel 配置文件（babel.config.js）中添加 @babel/preset-env 预设，例如：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------- -
-------- -
--- ----
--
------------ --------
------- -------
--
-
--targets：指定要支持的浏览器版本，可以是字符串或对象。例如，ie: '10'表示仅支持 IE10 及以上版本，chrome: '63'表示仅支持 Chrome 版本 63 及以上。useBuiltIns：用于配置何时应该启用 polyfill。如果设置为'usage'，则 Babel 会根据文件中使用的 ES6 功能自动引入相应的 polyfill。如果未使用某些功能，则不会引入相应的 polyfill。如果设置为'entry'，则需要手动指定 polyfill 的入口文件（通常是import '@babel/polyfill'）。corejs：用于指定 polyfill 库使用的core-js版本。
Polyfill 示例
假设我们有如下 ES6 代码：
const obj = {
name: 'Tom',
age: 20
};
const { name, age } = obj;
console.log(name, age);使用 Babel 编译后，变成了：
-- -------------------- ---- -------
---- --------
--- --- - -
----- ------
---- --
--
--- ---- - ---------
--- - --------
----------------- -----默认情况下，编译后的代码中并没有包含相应的 polyfill，如果在旧版本的浏览器上运行，会导致语法错误。我们可以通过配置 @babel/preset-env 来添加相应的 polyfill，最终的配置文件如下：
-- -------------------- ---- -------
-------------- - -
-------- -
--------------------- -
-------- -
------- ----
--
------------ --------
------- -------
--
-
--执行 npm run build 后，我们可以发现 babel 在输出目录中自动生成了一个 polyfills.js 文件，该文件包含了针对 Chrome 58 版本新增的 ES6 特性的 polyfill。我们可以将该文件引入到 HTML 页面中，以使旧版本的浏览器可以正常运行我们的代码。例如：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ -------- ------------
-------
------
------- -----------------------------------
------- -------------------------------
-------
-------结论
Babel 使用 polyfill 来帮助我们实现 ES6 标准中新功能和语法的兼容性。在 Babel 7 中，我们可以使用 @babel/preset-env 预设来配置 polyfill，使用 useBuiltIns: 'usage' 可以自动添加所需的 polyfill。当我们编译 ES6 代码时，Babel 会自动生成一个包含所需 polyfill 的文件，我们需要将该文件引入到 HTML 页面中，以支持旧版本的浏览器运行我们的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67517b588bd460d3ad8a125c