Babel 7 中的 @babel/preset-env 插件使用详解-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们常常需要使用 Babel 将 ES6+ 的代码转换成 ES5 以兼容更多的浏览器。而在 Babel 7 中，@babel/preset-env 插件成为了最常用的 preset 之一，它可以根据目标浏览器或运行环境，自动确定需要转换的语法和插件，从而实现更加智能的转换。

本文将详细介绍 @babel/preset-env 插件的使用方法，包括安装、配置、参数设置等，并提供示例代码。

安装

首先，我们需要在项目中安装 @babel/preset-env 插件。可以使用 npm 或 yarn 进行安装：

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

# 或者
yarn add --dev @babel/core @babel/preset-env

同时，我们还需要在项目根目录下创建一个 .babelrc 或 babel.config.js 配置文件，用于配置 Babel 的转换选项。

配置

.babelrc 配置文件

.babelrc 配置文件是一个 JSON 格式的文件，用于配置 Babel 的转换选项。我们可以在其中指定需要转换的语法和插件，以及目标浏览器或运行环境等参数。

示例 .babelrc 配置文件：

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- -
          ----------- ------ - ---------- --- -- ----
        --
        -------------- --------
        --------- -
      -
    -
  -
-

其中，"presets" 属性用于指定需要转换的 preset，这里我们使用了 @babel/preset-env。

@babel/preset-env 插件支持以下参数：

"targets"：指定目标浏览器或运行环境，用于自动确定需要转换的语法和插件。可以使用 browserslist 格式，也可以使用对象格式。例如：
```
"targets": {
  "browsers": ["last 2 versions", "ie >= 11"]
}
```
或
```
"targets": {
  "chrome": "58",
  "ie": "11"
}
```
"useBuiltIns"：指定是否使用 polyfill，以及如何引入。可以设置为 false、entry 或 usage。其中，false 表示不使用 polyfill，entry 表示需要手动引入 polyfill，usage 表示根据代码中使用的语法自动引入相应的 polyfill。例如：
```
"useBuiltIns": "usage"
```
"corejs"：指定使用的 core-js 版本。例如：
```
"corejs": 3
```

babel.config.js 配置文件

babel.config.js 配置文件是一个 JavaScript 模块，用于配置 Babel 的转换选项。与 .babelrc 不同，babel.config.js 可以使用更多的 JavaScript 特性和语法，比如条件语句、循环、函数等。

示例 babel.config.js 配置文件：

-- -------------------- ---- -------
-------------- - -------- ----- -
  ----------------

  ----- ------- - -
    -
      --------------------
      -
        ---------- -
          ----------- ------ - ---------- --- -- ----
        --
        -------------- --------
        --------- -
      -
    -
  --

  ------ -
    -------
  --
-

其中，"api.cache(true)" 用于启用缓存，提高编译速度。"presets" 数组中的配置与 .babelrc 配置文件相同。

参数设置

@babel/preset-env 插件支持多种参数设置，这里我们介绍一些常用的参数。

targets 参数

targets 参数用于指定目标浏览器或运行环境，用于自动确定需要转换的语法和插件。可以使用 browserslist 格式，也可以使用对象格式。

使用 browserslist 格式：
```
"targets": "last 2 versions, ie >= 11"
```

使用对象格式：

"targets": {
  "chrome": "58",
  "ie": "11"
}

useBuiltIns 参数

useBuiltIns 参数用于指定是否使用 polyfill，以及如何引入。可以设置为 false、entry 或 usage。

false 表示不使用 polyfill：
```
"useBuiltIns": false
```
entry 表示需要手动引入 polyfill：
```
"useBuiltIns": "entry"
```
usage 表示根据代码中使用的语法自动引入相应的 polyfill：
```
"useBuiltIns": "usage"
```

corejs 参数

corejs 参数用于指定使用的 core-js 版本。

"corejs": 3

示例代码

最后，我们提供一个示例代码，用于演示 @babel/preset-env 插件的使用方法。

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

在使用 @babel/preset-env 插件转换前，该代码会报错，因为它使用了箭头函数和数组的 map 方法，这些语法并不是所有浏览器都支持的。

在 .babelrc 配置文件中，我们可以添加 @babel/preset-env 插件，并指定 targets 参数为 "last 2 versions, ie >= 11"，以及 useBuiltIns 参数为 "usage"，这样 Babel 会自动确定需要转换的语法和插件，并引入相应的 polyfill。

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- ----- - --------- -- -- ----
        -------------- --------
        --------- -
      -
    -
  -
-

转换后的代码如下：

-- -------------------- ---- -------
---- --------

-------------------------------------------

--- --- - --- -- ---
--- ------ - ---------------- ------ -
  ------ ---- - --
---
--------------------

可以看到，Babel 自动生成了一些代码，并引入了相应的 polyfill，使得原来的代码在更多的浏览器中都能够正常运行。

总结

@babel/preset-env 插件是 Babel 7 中最常用的 preset 之一，它可以根据目标浏览器或运行环境，自动确定需要转换的语法和插件，从而实现更加智能的转换。在使用 @babel/preset-env 插件时，我们需要了解其参数和配置方法，以便更好地应用到项目中。

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