基础介绍
@babel/preset-env 是一个 Babel 插件，它包含了所有可以支持的 ECMAScript 特性，并可以根据你的 target 来自动添加所需的语法转换，以实现更好的浏览器兼容性。
简而言之，如果你使用了最新的 JavaScript 语法，但又需要兼容旧版浏览器，那么 @babel/preset-env 就是你的救星！
安装方式
你可以通过 npm 或 yarn 来安装该库。在绝大多数情况下我们都会使用 npm，那么我们可以像下面这样安装：
npm install --save-dev @babel/core @babel/preset-env
或者使用 yarn：
yarn add --dev @babel/core @babel/preset-env
如何使用
安装完必要的依赖后，我们需要在 .babelrc 文件中配置一下。
先来一个 minimal 的配置，只处理 ES6 的语法转换：
{
"presets": ["@babel/preset-env"]
}这样完全没有问题，但是需求通常是让我们的代码可以在旧版本浏览器上运行。那么我们需要指定 env 的 target 了。
下面是常见的浏览器：
{ "chrome": "58", "edge": "13", "firefox": "54", "safari": "11.1" }表示最新版的 Chrome 以及 Edge、Firefox、Safari （包括移动版）中最低支持的版本是对应数字的版本还有更精细的设置，例如
{ "firefox": "50", "chrome": ["49", "55"], "safari": "10.1" }，表示 Firefox >=50、Chrome >=49 且 <55，Safari 版本 >=10.1
下面是修改后的 .babelrc 文件：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
-- ----
--- -- --
-
-
-
-
-
-别忘了，我们还可以为每个运行环境指定不同的 @babel/present-env 配置。
除了上述的配置，我还总结了常用的指南和配置项：
常用配置
除了上述的最基本配置外，我们还可以通过一些配置项让我们的编译结果变得不同。
debug
默认为false。如果为true，打印所有插件使用情况以及配置。
{
"presets": [
["@babel/preset-env", {
"debug": true
}]
]
}modules
默认为 auto。可以是 false 或者 "commonjs"，或者 "umd"、"amd" 等其中之一。
{
"presets": [
["@babel/preset-env", {
"modules": false
}]
]
}shippedProposals
默认为 false 。用于支持特定版本将来的 ECMAScript 提案，可能导致编译时间和编译后的输出增大，因此在生产环境中应该禁用。
{
"presets": [
["@babel/preset-env", {
"shippedProposals": true
}]
]
}useBuiltIns
默认为false。告诉 Babel是否使用 polyfill 方法来更好地模拟使用 ECMAScript 6+ 做出的更改并带有 targets。
下面是具体用法：
-- -------------------- ---- -------
-
---------- -
--------------------- -
-------------- --------
--------- --
---------- -
--------- -----
----- ----
-
--
-
-示例代码
最后给大家分享一下 @babel/preset-env 如何使用 Promise：
首先，我们安装依赖
npm install --save-dev @babel/plugin-transform-regenerator @babel/runtime
然后修改 .babelrc 文件如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- ------
---------- -
----------- -
----- - ------ ----------
----- - ------- ----------
----- - ------ ----------
----- - ---- ----------
--- ---
-
-
-
-
--
---------- -
-
--------------------------------------
-
------------------ -----
--------------- -----
------------- -----
-------- ----
-
-
-
-
------ -----------------
------ ------------------------------
----------------------------------------使用上述配置后，编译后的文件即可以在 main 浏览器上顺利运行了，即使你使用了最新的 JavaScript 语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/85884