什么是 babel-preset-env？
babel-preset-env 是 Babel 的一个官方插件，它可以自动根据你的代码中使用的 ES6+ 特性，进行智能编译，让你可以更轻松地使用最新的 JavaScript 语法。
为什么需要 babel-preset-env？
在过去，我们需要手动配置 Babel，指定哪些 ES6+ 特性需要编译成 ES5，这样才能让我们的代码在所有浏览器中运行。但是，这样做非常繁琐，并且需要对每个项目进行手动配置。
而 babel-preset-env 则可以自动检测你的代码使用了哪些 ES6+ 特性，并根据你的目标浏览器列表，智能地编译你的代码。
如何使用 babel-preset-env？
首先，你需要安装 babel-preset-env：
npm install --save-dev babel-preset-env
然后，在 .babelrc 文件中配置 babel-preset-env：
{
"presets": ["env"]
}这样，babel-preset-env 就会自动根据你的代码中使用的 ES6+ 特性，进行智能编译。
配置选项
babel-preset-env 还提供了一些配置选项，可以帮助你更好地控制编译过程。下面是一些常用的配置选项：
targets
targets 选项可以指定目标浏览器列表。例如，如果你想要支持所有的现代浏览器，可以这样配置：
// javascriptcn.com 代码示例
{
"presets": [
["env", {
"targets": {
"browsers": [
"last 2 versions",
"safari >= 7"
]
}
}]
]
}modules
modules 选项可以指定编译后的模块类型。默认情况下，babel-preset-env 会将 ES6 模块编译成 CommonJS 模块，但你也可以将其编译成 AMD、UMD 或者 SystemJS 模块。例如，如果你想要将 ES6 模块编译成 AMD 模块，可以这样配置：
{
"presets": [
["env", {
"modules": "amd"
}]
]
}useBuiltIns
useBuiltIns 选项可以自动引入 polyfill。例如，如果你的代码中使用了 Promise，但是你不想手动引入 Promise 的 polyfill，可以这样配置：
{
"presets": [
["env", {
"useBuiltIns": "usage"
}]
]
}这样，babel-preset-env 就会自动引入 Promise 的 polyfill，而不需要你手动引入。
示例代码
下面是一个使用 babel-preset-env 的示例：
// index.js
const message = 'Hello, world!';
console.log(message);
// .babelrc
{
"presets": ["env"]
}在这个示例中，我们使用了 const 关键字来声明变量，这是 ES6 的新特性。但是，由于 const 关键字在某些浏览器中不被支持，我们需要使用 babel-preset-env 来进行编译。
最后，我们可以使用 Babel 将代码编译成 ES5：
// javascriptcn.com 代码示例 // 编译前 const message = 'Hello, world!'; console.log(message); // 编译后 'use strict'; var message = 'Hello, world!'; console.log(message);
可以看到，const 关键字被编译成了 var 关键字，这样就可以在所有浏览器中运行了。
总结
babel-preset-env 是一个非常方便的工具，可以帮助我们更好地使用 ES6+ 特性。它可以自动检测我们的代码中使用了哪些特性，并智能地进行编译。如果你想要更好地使用最新的 JavaScript 语法，那么 babel-preset-env 绝对是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656ebbf8d2f5e1655d6f9352