随着前端技术的不断发展，ECMAScript 标准也在不断更新，新的语言特性不断涌现。ES7 是 ECMAScript 标准的第七个版本，它引入了许多新的特性，包括 Array.prototype.includes()、指数运算符、async/await 等等。但是，这些新特性在现代浏览器中并不能全部支持，因此我们需要使用 babel 来将 ES7 代码转换为可在现代浏览器中运行的 ES5 代码。
ECMAScript 标准和 babel-preset-es2016
ECMAScript 标准是 JavaScript 语言的官方标准。它定义了语言的语法、数据类型、操作语义等等。每一次新的版本都会引入一些新的特性和语法，而这些特性和语法并不是所有浏览器都支持的。因此，我们需要使用 babel 来将新的语法转换为可在现代浏览器中运行的 ES5 代码。
在 babel 6 中，我们可以使用 babel-preset-es2016 来转换 ES7 代码。babel-preset-es2016 包含了所有 ES7 的新特性，包括 Array.prototype.includes()、指数运算符、async/await 等等。如果我们想使用这些新特性，就需要在 .babelrc 文件中添加如下配置：
{
"presets": ["es2016"]
}这样，babel 就会将我们的 ES7 代码转换为 ES5 代码，使得它可以在现代浏览器中运行。
babel-preset-env 的出现
然而，babel-preset-es2016 并不是最好的选择。它包含了所有 ES7 的新特性，但是它也包含了一些我们并不需要的特性。如果我们只想使用其中的一部分特性，我们也需要将所有的特性都转换为 ES5 代码，这样会造成代码的冗余和性能的浪费。
因此，babel-preset-env 应运而生。babel-preset-env 是一个智能的预设，它会根据我们的目标浏览器和运行环境来自动确定需要转换的语法和特性，只转换我们需要的部分，从而减少了代码的冗余和性能的浪费。
我们可以在 .babelrc 文件中添加如下配置来使用 babel-preset-env：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
-
--
-
-这样，babel 就会根据我们的配置来确定需要转换的语法和特性，只转换我们需要的部分。
示例代码
下面是一个使用 async/await 的示例代码：
-- -------------------- ---- ------- ----- -------- --------- - ----- -------- - ----- ------------------- ----- ---- - ----- ---------------- ------ ----- - ------------------- -- - ------------------ -------------- -- - --------------------- ---
如果我们使用 babel-preset-es2016 转换这段代码，它会被转换为如下的 ES5 代码：
-- -------------------- ---- -------
---- --------
--- ------- - -------- -- -
--- ---- - -------------------------------------------------- --------- -
--- --------- -----
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -------------------
---- --
-------- - --------------
------------- - --
------ ----------------
---- --
---- - --------------
------ ------------------------- ------
---- --
---- ------
------ ----------------
-
-
-- -------- ------
----
------ -------- --------- -
------ ---------------- -----------
--
----
----------------------- ------ -
------------------
----------------- ------- -
---------------------
---这段代码包含了很多我们并不需要的转换，比如 regeneratorRuntime 和 _asyncToGenerator。如果我们使用 babel-preset-env 转换这段代码，它会被转换为如下的 ES5 代码：
-- -------------------- ---- -------
---- --------
-------- --------------------- -
------ -------- -- -
--- --- - -------------- -----------
------ --- ---------------- --------- ------- -
-------- --------- ---- -
--- -
--- ---- - --------------
--- ----- - -----------
- ----- ------- -
--------------
-------
-
-- ----------- -
---------------
- ---- -
------ ------------------------------------ ------- -
------------ -------
-- -------- ----- -
------------- -----
---
-
-
------ -------------
---
--
-
-------- --------- -
------ -------------------- -----------
-
-------- ---------- -
-------- - -------------------------------------------------- --------- -
--- --------- -----
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -------------------
---- --
-------- - --------------
------------- - --
------ ----------------
---- --
---- - --------------
------ ------------------------- ------
---- --
---- ------
------ ----------------
-
-
-- -------- ------
----
------ -------------------- -----------
-
----------------------- ------ -
------------------
----------------- ------- -
---------------------
---这段代码只包含了我们需要的转换，没有额外的冗余代码。
结论
babel-preset-env 是一个智能的预设，它可以根据我们的目标浏览器和运行环境来自动确定需要转换的语法和特性，只转换我们需要的部分，从而减少了代码的冗余和性能的浪费。因此，在使用 babel 时，我们应该优先考虑使用 babel-preset-env，而不是 babel-preset-es2016。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6753e3bf1b963fe9cc480afa