JavaScript 语言一直在不断发展，新的语法特性也随之出现。然而，不同的浏览器支持的语法特性也不同，导致前端开发者需要使用兼容性工具来保证代码在不同浏览器上的兼容性。Babel 编译器是其中一种工具，它可以将最新的 JavaScript 代码转换成更早的版本，从而兼容旧版浏览器。
Babel 编译器的使用
Babel 编译器可以通过命令行或者构建工具（如 Webpack）来使用。项目中需要安装 @babel/cli 来使用命令行，或者 babel-loader 来使用构建工具。安装方法如下：
npm install @babel/cli --save-dev npm install babel-loader --save-dev
安装完成之后，我们就可以在命令行中使用 Babel 了，例如将一个 ES6 中的箭头函数转换成 ES5 的普通函数：
npx babel --plugins @babel/plugin-transform-arrow-functions index.js -o output.js
上述命令将 index.js 文件中的箭头函数转换成普通函数，并将结果输出至 output.js 文件中。除了命令行，我们还可以在构建工具中使用 Babel，例如在 Webpack 中的配置：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-上述配置将会匹配所有的 .js 文件，并且使用 Babel 编译器将最新的语法特性转换成更早的版本。
Babel 编译器的配置
Babel 编译器的配置项非常丰富，可以根据需要进行配置。可以在项目的根目录下创建一个 .babelrc 文件，该文件用于指定一些配置，例如：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}上述配置指定了 Babel 编译器使用 @babel/preset-env，并且添加了一个插件 @babel/plugin-proposal-class-properties，该插件可以让我们使用 ES6 中的类属性。之后，我们就可以在命令行中使用 npx babel 命令时省略一些配置项了：
npx babel index.js -o output.js
Babel 编译器的插件
除了上述提到的 @babel/plugin-proposal-class-properties，还有很多其他的插件可以让我们在代码中更方便地使用最新的语法特性。以下是一些常用的插件：
@babel/plugin-transform-arrow-functions：将箭头函数转换成普通函数；@babel/plugin-transform-async-to-generator：将 Async/Await 转换成 ES5 可以理解的代码；@babel/plugin-proposal-object-rest-spread：可以使用 ES6 的对象 Destructuring 和 Spread 运算符。
当然，Babel 编译器也支持自定义插件，我们可以根据自己的需要编写插件来扩展 Babel 编译器的功能。
总结
Babel 编译器可以让我们在代码中使用最新的语法特性，同时不用担心代码在旧版浏览器上的兼容性问题。通过简单的配置和使用，我们就可以让 Babel 编译器快速支持最新的语法特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c9ca1968c7c53b079b132