随着前端技术的快速发展，Web 应用程序的需求也越来越复杂。为了使我们的代码更智能、更紧凑、更易于维护，我们需要使用一些工具来帮助我们更好地实现我们的目标。而 babel-preset-env 就是其中的一种神器。
什么是 babel-preset-env
babel-preset-env 是 babel 官方提供的一个预设（preset）。它可以根据目标环境的不同，智能地将不同的插件打包成一个 preset，以便将最新的 ECMAScript 版本转换为向后兼容的 JavaScript 语法。为了简洁明了，以下统称 ES。
这个预设根据我们配置的目标环境，自动确定需要转换的 ES 特性并将其转换为低版本的 JavaScript。
由于不同的浏览器支持的 ES 特性可能不同，我们需要在编译的时候根据不同的浏览器自动转换 ES 特性。这就是 babel-preset-env 所做的工作。
babel-preset-env 的优点
使用 babel-preset-env 有以下几个优点：
- 面向未来，向后兼容性好
babel-preset-env 可以将最新的 ES 特性转换为向后兼容的 JavaScript 语法，这意味着我们可以使用这些最新的 ES 特性，而不用担心浏览器兼容性的问题。
- 精确控制转换环境
babel-preset-env 允许我们精确控制转换的环境，我们可以根据我们的需求，编写自己的 .babelrc 配置文件，来指定需要转换的 ES 版本和需要支持的浏览器。这个过程非常的智能，因为在打包的时候只会打进一些目标环境中需要转换的特性。
- 不支持的旧浏览器也能访问
我们可以使用 babel-preset-env，将代码编译成 ES5，这样即使我们的程序运行在一些不支持新特性的旧浏览器上，也能够获得相同的用户体验。
babel-preset-env 的使用
下面我们以项目打包配置为例介绍如何使用 babel-preset-env。
安装：
# 最新版本 $ npm install --save-dev babel-preset-env # 指定版本 $ npm install --save-dev babel-preset-env@1.0.2
在 .babelrc 中配置：
-- -------------------- ---- -------
-
---------- -
-
------
-
---------- -
----------- ------ - ---------- --- -- ---
--
---------- ------
-------------- -------
-
-
-
-以上配置的含义如下：
targets参数用以指定转换的目标浏览器或运行环境；modules参数指定在处理 ES6 模块时使用何种模块规范；useBuiltIns参数用于按需编译，配合browserslist使用可自动引入相关垫片，实现按需使用全新的 API 的能力。
至此，我们就可以使用 babel-preset-env 开始编写优秀而且兼容性好的 JavaScript 代码了。
babel-preset-env 的总结
babel-preset-env 可以根据我们的需求进行智能控制，使我们可以不用担心浏览器的兼容性而专注于写好的代码。由于其强大的面向未来特性，我们也不必担心一些旧的浏览器兼容性问题。
总之，babel-preset-env 是一个非常强大的 ECMAScript 转换工具，它可以提高我们代码的质量，减少兼容性问题。在使用时，一定要结合我们的项目情况来进行使用。
至此，这篇介绍 babel-preset-env 的文章到这里就结束了，希望这篇文章能够帮助你更加深入地理解和学习 babel-preset-env。
如果您有什么疑问或建议，请留言与我交流。
作为示例代码，下面给出一个 ES7 中 Generator 函数及 Async/Await 函数的转换示例。
-- -------------------- ---- -------
-- ------
--------- ---------------- -
----- --------
-
----- -------- ------------ -
------ ------ --------
-
-- -----
-------- ---------------- -
--- ------- - --------------------------------------------- --------- -
------ -------------------------------- ------------------ -
----- --- -
------ --------------- - --------------- -
---- --
------------- - --
------ --------
---- --
---- ------
------ ----------------
-
-
-- ---------
---
------ ------------------- -----------
-
-------- ------------ -
------ ----------------------- -----------
-
-------- ------------- -
----------- - ------------------ --------------------------------------------- ---------- -
------ -------------------------------- -------------------- -
----- --- -
------ ---------------- - ---------------- -
---- --
------ -------------------------- ------ ---------
---- --
---- ------
------ -----------------
-
-
-- ----------
----
------ ----------------------- -----------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64708159968c7c53b0ea2c36