前端开发离不开 JavaScript，但是现代的 JavaScript 规范更新非常快，而不同的浏览器又对规范的支持程度千差万别，这就导致了我们在编写 JavaScript 代码的时候需要考虑非常多的因素。Babel 就是为了解决这一问题而出现的工具。
什么是 Babel
Babel 是一个 JavaScript 编译器，可以将 ES6 或者更新的 JavaScript 代码转换成向后兼容的版本，这样我们就能够在旧版浏览器上运行最新的 JavaScript 代码。同时，Babel 还支持插件系统，可以让我们自定义转换规则，满足更多复杂的需求。
集成 Babel 到开发工作流程中
接下来我们将演示如何使用 Babel 快速地将 ES6 代码转换为 ES5 代码，并把 Babel 集成到 Webpack 的开发工作流程中。
安装 Babel：
npm install babel-loader @babel/core @babel/preset-env webpack
@babel/preset-env 可以转换最新的 JavaScript 代码。
配置 Webpack：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--Webpack 的配置中添加一个规则，让所有 .js 文件都经过 babel-loader 来处理。并且在 babel-loader 中增加 options，把 @babel/preset-env 传入 presets 中，让编译器知道如何编译 ES6 代码。
创建 .babelrc 文件：
{
"presets": ["@babel/preset-env"]
}.babelrc 文件也是设置转换规则的重要文件，它可以包含很多个 preset，也可以配置 plugin。
至此，我们已经成功地集成了 Babel 到 Webpack 的开发工作流程中。当我们编写 ES6 代码时，Webpack 会自动地调用 Babel 来将代码转换成旧版本的 JavaScript，以确保我们的代码可以在所有浏览器上运行。
自定义 Babel 转换规则
如果我们需要更加定制化的转换规则，可以使用插件机制。插件可以对代码进行更细粒度的处理，例如转换特定语法或者新增新功能。
安装插件：
npm install @babel/plugin-transform-arrow-functions
@babel/plugin-tranform-arrow-functions 插件可以将 ES6 箭头函数转换成 ES5 的函数，例如：
const func = () => {
console.log('Hello World!');
}会被转换成
var func = function () {
console.log('Hello World!');
};配置 Babel：
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-arrow-functions"]
}在 .babelrc 文件中增加 plugins 属性，并把需要的插件传递进去即可。
总结
Babel 可以帮助我们在前端开发中更便捷地使用最新的 JavaScript 特性。通过集成到我们的工作流程中，我们可以自动地将 ES6 的代码转换成向前兼容的版本，以确保我们的应用在任何浏览器上都能够运行。同时，Babel 的插件机制让我们可以更加自由地定制转换规则，完美满足我们的复杂需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647b12f0968c7c53b06a4b8c