使用 babel-preset-env 替换 babel-preset-es2015，babel-preset-es2016，babel-preset-es2017-JavaScript中文网-JavaScript教程资源分享门户

随着 JavaScript 的不断发展，新的语言特性不断涌现。为了让旧版本的浏览器也能够支持这些新特性，我们需要使用 Babel 进行转译。在 Babel 6 中，我们需要使用特定的 preset 来支持不同版本的 ECMAScript 规范。例如，使用 babel-preset-es2015 可以支持 ES6 的语法，使用 babel-preset-es2016 可以支持 ES7 的语法。但是，随着 ECMAScript 的不断更新和淘汰，这种方式已经不再适用。现在，我们可以使用 babel-preset-env 来替换 babel-preset-es2015，babel-preset-es2016，babel-preset-es2017，来更好地支持不同版本的 ECMAScript 规范。

什么是 babel-preset-env

babel-preset-env 是一个可以根据你的目标浏览器或者运行环境来自动确定需要的 Babel 插件和 polyfill 的 preset。这意味着，我们可以使用一个 preset 来支持所有的 ECMAScript 规范、新特性、语法和语法糖。babel-preset-env 会根据你指定的目标环境来自动确定需要的插件和 polyfill。比如，如果你只需要支持现代浏览器，babel-preset-env 会自动排除一些不必要的插件和 polyfill。

安装和使用 babel-preset-env

安装 babel-preset-env 可以使用 npm：

npm install babel-preset-env --save-dev

在 .babelrc 文件中，我们可以使用以下的配置：

// javascriptcn.com 代码示例
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

这个配置的意思是，使用 babel-preset-env，目标浏览器是最近两个版本的浏览器和 Safari 7 及以上版本。这样，babel-preset-env 就会自动确定需要的插件和 polyfill。

示例代码

下面是一个使用 babel-preset-env 的示例代码：

// javascriptcn.com 代码示例
// 使用 ES6 的语法
const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);

// 使用 ES7 的语法
const obj = {
  a: 1,
  b: 2,
  c: 3
};
const newObj = Object.entries(obj);

在 .babelrc 文件中，我们可以使用以下的配置：

// javascriptcn.com 代码示例
{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

这样，以上的代码就会被自动转译成 ES5 的语法。在转译后的代码中，我们可以看到 map 和 Object.entries 这两个函数被转译成了 ES5 的语法。

总结

babel-preset-env 是一个非常方便的工具，可以自动确定需要的插件和 polyfill，让我们不再需要手动配置每个版本的 ECMAScript 规范。在使用 babel-preset-env 时，需要注意指定目标浏览器或者运行环境，以便让 babel-preset-env 自动确定需要的插件和 polyfill。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/656eb038d2f5e1655d6e8c1a