什么是 Babel？
Babel 是一个 JavaScript 编译器，可以将最新版本的 JavaScript（ES6、ES7、ES8 等）代码转换成可以在当前浏览器环境下运行的代码，也就是转换成 ES5 版本的 JavaScript 代码。Babel 的主要功能是语法转换，例如将箭头函数转换成普通函数，将 const 和 let 转换成 var，还有一些其他的语法转换。
Babel 插件
Babel 的主要功能是语法转换，但有些特性（例如 Promise 和 Map）需要额外的处理才能转换，这就需要借助 Babel 插件了。Babel 插件可以扩展 Babel 的功能。Babel 插件可以分为两类：
- 语法插件（syntax plugins）：用于解析新的 JavaScript 语法；
- 转换插件（transform plugins）：用于将新的 JavaScript 特性转换成 ES5 特性。
Babel 的最佳实践
配置 Babel 的 .babelrc 文件
Babel 的配置文件为 .babelrc，这个文件使用 JSON 格式来描述 Babel 的配置。
示例代码：
-- -------------------- ---- -------
-
---------- -
-------------------
--
---------- -
----------------------------------
-----------------------------------------
-
-上面的配置文件中：
presets字段用来配置 Babel 的预设（preset）。Babel 的预设是一组插件的集合，用来转换某个特定的 JavaScript 特性。@babel/preset-env是一个预设，它可以根据当前环境的配置来自动地转换新的 JavaScript 特性。plugins字段用来配置 Babel 的插件。@babel/plugin-transform-runtime可以解决转换特定语法所需要的 runtime helpers 产生的代码冗杂问题，如不支持 Promise 的浏览器的代码转换问题。@babel/plugin-proposal-class-properties用来支持 JavaScript 的类属性特性，该特性是 ES7 的语法。
使用 Babel 转换 JavaScript
Babel 可以转换 JavaScript 源代码，我们可以使用 Babel 命令行工具或 Webpack 插件来实现。
在命令行下使用 Babel 转换 JavaScript：
npx babel app.js -o dist/app.js
在 Webpack 中使用 Babel：
-- -------------------- ---- -------
------- -
------ -
-
----- --------------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
-------- -----------------------------------
-
-
-
-
-使用 Polyfill
Babel 转换 ES6 及以上版本的代码时，会使用 ES5 的语法特性来代替新的特性。但是有些 ES5 版本的浏览器还是不支持某些新的特性，这时就需要使用 Polyfill。Polyfill 是一种 JavaScript 代码，可以在运行时（runtime）为不支持某些语法特性的浏览器提供必要的代码实现。其中，@babel/polyfill 是 Babel 提供的一个非常优秀的 Polyfill。
在 Babel 的配置文件中使用 Polyfill：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- -------
-
-
-
-上面的配置文件中，我们使用了 @babel/preset-env 的 useBuiltIns 这个参数，用来确定如何引入 polyfill。这个参数有如下几个值：
false：默认值，仅会对代码进行语法转换，不会引入 polyfill；entry：会根据 browserslist 中配置的浏览器环境，自动导入相应的 polyfill；usage：仅会导入使用到的 polyfill，这需要根据具体的代码情况进行自动选择；
corejs 是一个必选参数，用来指定 polyfill 所使用的 CoreJS 的版本号。
Tips
在日常的开发中，我们经常会使用 TypeScript 来编写代码，Babel 也提供了一个称为 @babel/preset-typescript 的预设，用来将 TypeScript 编译成 JavaScript。这个预设与 @babel/preset-env 预设一样，所以可以在 .babelrc 配置文件中轻松将 TypeScript 代码编译成 JavaScript 代码。
总结
Babel 是一个非常优秀的 JavaScript 编译器，可以将最新版本的 JavaScript 代码转换成可以在当前浏览器环境下运行的代码，也就是转换成 ES5 版本的 JavaScript 代码。通过本文，你应该掌握了 Babel 插件及其配置的最佳实践，并且能够编写可靠的 Babel 配置文件，以实现 JavaScript 代码的转换，同时使用 Polyfill 为旧版本浏览器提供相应的代码实现，减少兼容性问题的出现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64507a31980a9b385b9815cf