前言
在前端开发中，我们经常需要使用一些新特性的语法，但是这些语法并不是所有浏览器都支持。虽然现在大多数浏览器已经支持了 ES6、ES7 等语法，但是某些古老的浏览器还是无法支持。为了兼容这些浏览器，我们需要使用一些转译工具，这就是 Babel 的作用。
Babel 是一个 JavaScript 编译器，可以将 ES6+ 的代码转译成 ES5 的代码。它可以帮助我们使用最新的语法，让新特性在旧版本的浏览器上运行起来。
安装
在使用 Babel 的时候，我们需要先安装一些包。包括 babel-core、babel-loader、babel-preset-env 和 babel-plugin-xplicit。
npm install babel-core babel-loader babel-preset-env babel-plugin-xplicit --save-dev
使用方法
配置
在使用 Babel 进行转译之前，我们需要先进行一些配置。我们需要在项目的根目录中创建一个 .babelrc 文件，并在文件中添加以下内容：
{
"presets": ["env"],
"plugins": ["xplicit"]
}这里的 presets 是预设，用来指定 Babel 转译的规则集。我们使用的是 env，表示只转译需要转换的语法。plugins 则是插件，用来扩展 Babel 的功能。我们这里使用的是 babel-plugin-xplicit。
使用
在我们的项目中，我们只需要在 webpack 配置文件的 module 部分添加一条规则即可。
-- -------------------- ---- -------
------- -
------ --
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------
-------- -----------
-
-
--
-这里的 rules 表示转译规则，我们定义了一个转译 JavaScript 文件的规则，其中 exclude 表示不需要转译的目录，use 则表示使用的 loader 和相关配置，我们这里使用的是 babel-loader。
示例
下面我们来看一个实际的示例。我们将使用 babel-plugin-xplicit，将箭头函数转译成普通函数。
源码
const sum = (a, b) => a + b; console.log(sum(1, 2));
上面的代码中，我们定义了一个箭头函数 sum，它接收两个参数并返回它们的和。我们可以在控制台打印出这个函数的运行结果，可惜有些古老的浏览器并不支持箭头函数。因此，我们需要使用 babel-plugin-xplicit 将其转译成普通函数。
转译后的代码
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(1, 2));我们可以看到，箭头函数已经被转译成了普通函数，可以在所有浏览器上正常运行了。
总结
在现代的前端开发中，Babel 已经成为了必不可少的工具。它可以帮助我们快速地实现新特性的语法，同时又保证了兼容性。而 babel-plugin-xplicit，作为 Babel 的扩展插件之一，可以帮助我们更高效地进行开发，让我们摆脱一些繁琐的操作，让代码更加简洁易读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c8d81e8991b448d9f90