什么是 Babel？
Babel 是一个广泛使用的 JavaScript 编译器，它可以将 ECMAScript 2015+（ES6+）的代码转换为向后兼容的旧版 JavaScript 代码。由于客户端浏览器对新的 ES6+ 语法的支持度不够，而流行的前端框架和库（如 React、Vue 和 Angular）都是基于 ES6+ 来编写的，因此开发人员需要使用 Babel 来将代码转换为浏览器可支持的格式。Babel 可以通过 Presets 和 Plugins 来扩展其能力，以便使代码转换更为高效。
Babel Presets
Babel Presets 是一些打包好的 Babel 插件集合，开发人员可以通过预设来扩展 Babel 的能力，避免单独添加多个插件的方式。以下是一些值得使用的 Babel Presets：
es2015
该预设包含 ES6 的所有语法特性，它可以将所有 ES6 语法转换为 ES5 语法，以支持所有的浏览器。
{
"presets": [
["es2015", { "modules": false }]
]
}react
该预设包含将 JSX 语法转换为 JavaScript 的 Babel 插件集合，因此，它可以使 React 代码在浏览器中正常运行。
{
"presets": [
"react"
]
}env
该预设可以根据目标浏览器或运行环境自动确定需要转换的 Babel 插件。这个预设很好用，因为它可以根据浏览器或者 Node.js 版本进行代码转换优化，从而防止因为没有必要的语法转换而造成代码冗余。
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- ------ - ---------- ------- -- ---
-
--
-
-Babel Plugins
Babel Plugins 是单独的 Babel 插件，方便开发人员对特定功能进行更加细粒化的转换，以下是一些值得使用的 Babel Plugins：
transform-runtime
该插件可以避免重复注入生成的辅助函数和内置函数。这个插件可以将这些辅助函数包装，并从 @babel/runtime 引入
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
--------- ------
---------- -----
-------------- -----
--------------- -----
-
-
-
-
syntax-dynamic-import
该插件可以将动态导入语法转换为标准的 import() 语法，以便在浏览器中使用。
{
"plugins": [
"syntax-dynamic-import"
]
}transform-object-rest-spread
该插件可以将对象的 Rest 和 Spread 属性转换为 ES6+ 标准代码，从而支持一些比较新的 JavaScript 特性。
{
"plugins": [
["transform-object-rest-spread", { "useBuiltIns": true }]
]
}总结
通过 Presets 和 Plugins，Babel 在编译上大大降低了开发者的学习成本，提供了很多优秀的功能和 API，为项目打下坚实的基础。除了上述的这些常用的开发者常用的构建工具，还有许多像 "env", "transform-react-jsx-source", "transform-class-properties" 等等等等， 以至于你可以 ： 转换 JavaScript 的最新版本、转换 React 的语法编号 JSX、样式 插件如 CSS、并且能够动态地配置浏览器支持性！
因此，当你使用 Babel 时，对于选择 Presets 和 Plugins，开发者需要根据需求进行选择，同时还要考虑预算，因为添加太多的插件会为项目增加额外的开销。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e1f7395b1f8cacd5ceb46