使用 preset-env 让 Babel 自动根据目标环境选择 Polyfill 并降低代码大小-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，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。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

在上面的配置中，我们指定了目标环境为 Chrome 58 和 IE 11。当我们使用 preset-env 转换代码时，它会自动根据这个配置选择需要的 Polyfill。

如何使用 preset-env？

在使用 preset-env 之前，我们需要先安装相关的依赖。在项目的根目录下执行以下命令：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

安装完成后，我们可以在项目中创建一个 index.js 文件，然后编写一些 ES6+ 的代码：

const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr);

这段代码使用了箭头函数和数组的 map 方法，这些特性在一些旧的浏览器中并不支持。

接下来，我们可以使用 Babel 的命令行工具来将这段代码转换成 ES5 的代码：

npx babel index.js --out-file index.es5.js

执行完上面的命令后，我们会得到一个 index.es5.js 文件，它包含了转换后的代码：

"use strict";

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log(newArr);

这段代码已经可以在大部分浏览器上运行了，但是它还包含了一些不必要的 Polyfill，比如 Promise 和 Set，这会导致代码体积增大，影响网页的加载速度。

为了解决这个问题，我们可以使用 preset-env 插件。在项目根目录下创建一个 .babelrc 文件，并添加以下配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

在这个配置中，我们指定了目标环境为 Chrome 58 和 IE 11。当我们使用 Babel 转换代码时，preset-env 会自动根据这个配置选择需要的 Polyfill。

接下来，我们再次执行转换命令：

npx babel index.js --out-file index.es5.js

这一次，Babel 会自动根据目标环境选择需要的 Polyfill，从而降低代码大小。如果我们打开转换后的文件，会发现它只包含了必要的 Polyfill：

"use strict";

require("core-js/modules/es.array.map");

var arr = [1, 2, 3];
var newArr = arr.map(function (item) {
  return item * 2;
});
console.log(newArr);

总结

在前端开发中，Babel 是一个非常重要的工具，它可以将 ES6+ 的代码转换成 ES5 的代码，从而让我们的代码可以在更多的浏览器上运行。而在转换的过程中，Babel 还可以自动添加 Polyfill，以兼容一些浏览器缺失的 API。但是，这样做会导致代码体积增大，影响网页的加载速度。为了解决这个问题，我们可以使用 Babel 的 preset-env 插件，它可以根据目标环境自动选择需要的 Polyfill，从而降低代码大小。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ecdb6eb4cecbf2d49df20