在 Babel 中配置 env preset 的方法及注意事项-JavaScript中文网-JavaScript教程资源分享门户

在 Babel 中配置 env preset 的方法及注意事项

Babel 是一种 JavaScript 编译器，它可以将最新版本的 JavaScript 代码转换成向后兼容的 JavaScript 代码，以便在旧版浏览器中运行。Babel 的 env preset 是一种预设，它可以根据目标环境自动启用或禁用插件。在本文中，我们将探讨如何在 Babel 中配置 env preset 的方法及注意事项。

安装 Babel

在配置 Babel 之前，需要先安装 Babel。可以使用 npm 安装 Babel：

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

安装 env preset

在安装 Babel 后，需要安装 env preset：

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

配置 Babel

配置 Babel 时，需要在 .babelrc 文件中设置 preset 选项：

{
  "presets": ["@babel/preset-env"]
}

在这个例子中，我们只配置了一个 preset：@babel/preset-env。如果需要配置多个 preset，可以将它们放在一个数组中。

配置 env preset

env preset 可以通过 options 选项进行配置。options 选项是一个对象，可以设置以下属性：

targets：指定目标环境，可以是一个字符串或一个对象。如果是一个字符串，可以是以下值之一：">0.25%"、">0.5%"、">1%"、">2.5%"、">5%"、">10%"、"last 1 version"、"last 2 version"、"last 3 version"、"last 4 version"、"last 5 version"、"last 6 version"、"last 7 version"、"last 8 version"、"last 9 version"、"last 10 version"、"Firefox ESR"、"not dead"、"not ie <= 11"、"not op_mini all"。如果是一个对象，可以指定浏览器的版本号或其他环境的版本号。
modules：指定模块的类型，可以是 "amd"、"umd"、"systemjs"、"commonjs" 或 "false"。
useBuiltIns：指定是否启用 polyfill。可以是 "usage"、"entry" 或 false。如果是 "usage"，则根据代码中使用的特性自动导入所需的 polyfill。如果是 "entry"，则需要在入口文件中手动导入所需的 polyfill。
corejs：指定使用的 core-js 版本。

例如，以下配置指定目标浏览器为最新版本的 Chrome 和 Firefox，并启用 polyfill：

// www.javascriptcn.com code example
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "firefox": "54"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

注意事项

在使用 env preset 时，需要注意插件的顺序。如果插件的顺序不正确，可能会导致代码转换不正确。
在使用 useBuiltIns 选项时，需要安装 core-js 和 regenerator-runtime。可以使用以下命令安装：

npm install --save core-js regenerator-runtime

在使用 env preset 时，需要注意浏览器的版本号是否正确。如果浏览器的版本号不正确，可能会导致代码转换不正确。

示例代码

以下是一个示例代码，它使用了 env preset 和 useBuiltIns 选项：

// www.javascriptcn.com code example
// index.js
const arr = [1, 2, 3];
const obj = { a: 1, b: 2 };

const func = async () => {
  console.log("Hello World!");
};

const promise = new Promise((resolve, reject) => {
  resolve("Done!");
});

arr.map((item) => item + 1);

Object.values(obj);

console.log(Array.from("foo"));

func();

promise.then((result) => {
  console.log(result);
});

// .babelrc
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "firefox": "54"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ]
}

在这个例子中，我们使用了最新的 JavaScript 特性，如箭头函数、async/await、Promise、Array.from 等。在 .babelrc 文件中，我们指定了目标浏览器为最新版本的 Chrome 和 Firefox，并启用了 polyfill。当代码被转换时，会自动导入所需的 polyfill。

在使用 Babel 时，需要注意插件的顺序、浏览器的版本号和 polyfill 的使用。通过正确地配置 Babel，可以使代码在旧版浏览器中运行，并使用最新的 JavaScript 特性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3fc0fa941bf713478bb37

在 Babel 中配置 env preset 的方法及注意事项

接着读