随着前端技术的迅速发展，越来越多的开发者开始使用 ES6 编写 JavaScript 代码。然而，不同的浏览器支持不同的语法和特性，这导致了一些兼容性问题。为解决这些问题，开发者可以使用 Babel 这样的工具将 ES6 代码转换为 ES5 代码。在本文中，我们将介绍 Babel7 的使用，并且详细讲解如何选择 babel-preset-env。
Babel7 简介
Babel 是一个 JavaScript 编译器，它可以将 ES6 代码转换为 ES5 代码，还可以支持一些 JSX 和 Flow 等语言的转换。最新版本的 Babel 是 Babel7，我们可以使用 npm 进行安装。
npm install --save-dev @babel/core @babel/cli
上述命令会安装 Babel 依赖项和 Babel CLI。我们还需要安装一些插件来确保 Babel 正常工作。下面是安装 Babel 插件的命令：
npm install --save-dev @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime
babel-preset-env
babel-preset-env 是 Babel7 的核心插件，它可以根据当前的环境（如所使用的浏览器、node 版本等）自动转换代码为当前环境所支持的 ES5 代码。babel-preset-env 可以处理任何 ES5 或 ES6+ 代码，并自动转换为 ES5 代码。这就是为什么 babel-preset-env 被称为是 “一个智能的” 解决方案。我们可以通过配置 .babelrc 文件来启用它：
{
"presets": ["@babel/preset-env"]
}这将会将所有使用 ES6 的代码编译为 ES5，同时排除掉所有不必要的转换。这样一来，我们就能够确保在所有支持 ES5 的浏览器上正常运行我们的代码。接下来看代码示例：
// ES6 代码示例 const arr = [1, 2, 3]; const [a, b, c] = arr; console.log(a, b, c);
// 转换后的 ES5 代码
"use strict";
var arr = [1, 2, 3];
var a = arr[0],
b = arr[1],
c = arr[2];
console.log(a, b, c);babel-plugin-proposal-class-properties
在 ES6 中，我们可以通过 class 关键字定义类，但是类的属性必须在 constructor 中进行初始化。babel-plugin-proposal-class-properties 插件提供了类属性的初始化机制，让我们可以在类声明之外进行属性的初始化：
class Person {
name = "Tom";
age = 22;
}我们将上述代码交由 babel-plugin-proposal-class-properties 处理后，写成了下面的代码：
"use strict";
class Person {
constructor() {
this.name = "Tom";
this.age = 22;
}
}将类属性放在类声明之外，会让代码形式更加简洁，也能让我们更加方便地修改属性的默认值。
babel-plugin-transform-runtime
babel-plugin-transform-runtime 插件可以避免重复代码的产生，并且还可以减小转换后的文件大小。它会将 Babel 注入的辅助代码从每个文件中移除，但是前提是确保 babel-runtime 已经安装了。要在代码中使用它，需要通过 npm 安装：
npm install --save @babel/runtime
然后在 .babelrc 配置文件中启用插件：
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}这里的配置项是：
- corejs：是否启用 core-js；
- helpers：是否启用内置的 helpers。这些 helpers 是用于实现 Object.assign 和其它 polyfill；
- regenerator：是否启用 regenerator（用于 async 函数）；
- useESModules：是否启用 es modules helpers。
总结
本文简单介绍了 Babel 和 babel-preset-env 的使用及其相关插件的配置，希望能够帮助大家更好地理解 ES6 的相关知识并且确定对代码进行转换后，“自治区”能正确地运行代码。
参考
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594e30feb4cecbf2d92e3b9