作为前端开发者，我们经常会遇到不同版本的浏览器，不同的 Node.js 运行环境等，导致同一份代码无法在各种环境中平稳运行。而 Babel 作为前端构建工具的重要组成部分，可以帮助我们将新语法转译为旧语法以兼容不同版本的浏览器和 Node.js 等环境。在 Babel 中，插件 env 是一个非常实用的插件。本文将会详细讲解 Babel 插件 env 的用法，帮助大家更好地使用该插件。
env 简介
env 是 Babel 插件之一，它可以根据指定环境的配置来确定需要进行哪些转译。例如，在开发过程中我们只需要将 ES6 语法转译为 ES5 语法来兼容现代浏览器，而在生产环境中我们则需要将代码转译为可在所有环境中运行的代码。env 插件就是为这种情况而生的，使得我们可以非常方便地根据不同的环境进行代码转译。
env 的使用方法
env 插件的使用非常简单，只需要进行以下两步即可完成配置。
步骤一：安装依赖
首先需要安装 babel-preset-env 依赖。
--- ------- ---------------- ----------
步骤二：添加配置
然后在 .babelrc 文件中添加 env 配置。例如，我们需要将 ES2015 代码转译为 ES5 代码：
-
---------- -
------- -
---------- -
----------- -
-- ----
----- - ----------
---- -- -- --
--
------- ------
-
--
-
-在上面的配置中，我们设置了转译目标为所有市场份额大于 1% 的浏览器，最近两个版本的浏览器，不包括 IE8 及以下版本，以及 Node.js 的版本为 6.10。
env 的指令
除了使用配置文件来配置 env 插件，我们还可以使用指令来进行配置。在代码中使用指令可以覆盖 .babelrc 文件中的配置，同时还可以动态更改配置，非常灵活。下面是两种常见指令的使用方法。
1. pragma
我们经常会使用 React 来开发应用程序，在 React 中，JSX 代码需要使用一个名为 React.createElement 的方法来进行转换。在使用 env 插件的情况下，会对 JSX 语法进行转译，但是不会对 React.createElement 方法进行转译，所以我们需要使用 pragma 指令来指定使用什么来替代 React.createElement。
在代码中添加指令如下：
--- ----------- ------- -- --- ---- ------------------- -- ----- ------- - ---------- ------------
在上面的代码中，我们通过第一条指令声明该文件使用经典的 JSX 解析器，然后通过第二条指令声明使用 React.createElement 方法。
2. useBuiltIns
有些新的内置函数，例如 Object.assign 和 Promise 等，不是所有浏览器都支持。如果我们想要使用这些新函数，并且同时希望代码可以在所有浏览器中运行，就需要使用 polyfill 来进行兼容。env 插件中提供了 useBuiltIns 指令来自动添加 polyfill，非常方便。
在代码中添加指令如下：
-- ------------------------------- --- ---- ------ ---- -------------- ---- -- ----------------- - -- - -- - -- - ---
在上面的代码中，我们通过指令来告诉 env 插件需要使用 useBuiltIns，然后就可以使用新的 Object.assign 函数了。
env 的示例
下面是一个实际的示例，可以帮助大家更好地理解 env 插件的使用方法。
-- --------
-
---------- -
------- -
---------- -
----------- -
-- ----
----- - ----------
---- -- -- --
--
------- ------
-
--
-
--- -------- ----- ------- - ---------- ------------ ----- --- - - -- - -- ----- ------ - ----------------- ---- - -- - --- -------------------- ----- -------- ----- - ----- ------ - ----- -------------------- -------------------- - ------
在执行以上代码时，会自动将 JSX 语法、Object.assign 和 async/await 等新语法转译为浏览器和 Node.js 等环境可以运行的代码。如果需要使用某些新的内置函数，可以使用 useBuiltIns 指令。
总结
env 插件是 Babel 插件中非常实用的一个插件，可以根据不同的配置来确定需要进行哪些代码转译，非常灵活，可以实现代码的自动转译，让我们更关注业务逻辑。同时，env 插件也支持指令模式，让我们可以更好地控制代码的转译过程。希望本文能够帮助大家更好地掌握 Babel 中 env 插件的使用方法。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66452615d3423812e43131ba