在前端开发中，Babel 是一个非常重要的工具，它可以将 ES6+ 的代码转换成 ES5 的代码，从而让我们的代码可以在更多的浏览器上运行。而在转换的过程中，Babel 还可以自动添加 Polyfill，以兼容一些浏览器缺失的 API。但是，这样做会导致代码体积增大，影响网页的加载速度。本文将介绍如何使用 Babel 的 preset-env 插件来自动根据目标环境选择 Polyfill，以降低代码大小。
什么是 Polyfill？
Polyfill 是指一种技术，它可以在不支持某些新特性的浏览器中模拟这些特性，从而让我们的代码可以在这些浏览器上运行。比如，ES6 引入了 Promise 对象，但是在一些旧的浏览器中并不支持 Promise，这时候我们可以使用 Polyfill 来模拟 Promise 对象的行为。
什么是 preset-env？
preset-env 是 Babel 的一个插件，它可以根据目标环境自动选择需要的 Polyfill，从而降低代码大小。在使用 preset-env 之前，我们需要先配置好 Babel。
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-在上面的配置中，我们指定了目标环境为 Chrome 58 和 IE 11。当我们使用 preset-env 转换代码时，它会自动根据这个配置选择需要的 Polyfill。
如何使用 preset-env？
在使用 preset-env 之前，我们需要先安装相关的依赖。在项目的根目录下执行以下命令：
--- ------- ---------- ----------- ---------- -----------------
安装完成后，我们可以在项目中创建一个 index.js 文件，然后编写一些 ES6+ 的代码：
----- --- - --- -- --- ----- ------ - ------------ -- ---- - --- --------------------
这段代码使用了箭头函数和数组的 map 方法，这些特性在一些旧的浏览器中并不支持。
接下来，我们可以使用 Babel 的命令行工具来将这段代码转换成 ES5 的代码：
--- ----- -------- ---------- ------------
执行完上面的命令后，我们会得到一个 index.es5.js 文件，它包含了转换后的代码：
---- -------- --- --- - --- -- --- --- ------ - ---------------- ------ - ------ ---- - -- --- --------------------
这段代码已经可以在大部分浏览器上运行了，但是它还包含了一些不必要的 Polyfill，比如 Promise 和 Set，这会导致代码体积增大，影响网页的加载速度。
为了解决这个问题，我们可以使用 preset-env 插件。在项目根目录下创建一个 .babelrc 文件，并添加以下配置：
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
-
-
-
-
-在这个配置中，我们指定了目标环境为 Chrome 58 和 IE 11。当我们使用 Babel 转换代码时，preset-env 会自动根据这个配置选择需要的 Polyfill。
接下来，我们再次执行转换命令：
--- ----- -------- ---------- ------------
这一次，Babel 会自动根据目标环境选择需要的 Polyfill，从而降低代码大小。如果我们打开转换后的文件，会发现它只包含了必要的 Polyfill：
---- -------- ---------------------------------------- --- --- - --- -- --- --- ------ - ---------------- ------ - ------ ---- - -- --- --------------------
总结
在前端开发中，Babel 是一个非常重要的工具，它可以将 ES6+ 的代码转换成 ES5 的代码，从而让我们的代码可以在更多的浏览器上运行。而在转换的过程中，Babel 还可以自动添加 Polyfill，以兼容一些浏览器缺失的 API。但是，这样做会导致代码体积增大，影响网页的加载速度。为了解决这个问题，我们可以使用 Babel 的 preset-env 插件，它可以根据目标环境自动选择需要的 Polyfill，从而降低代码大小。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658ecdb6eb4cecbf2d49df20