随着现代浏览器对 ES6 语法支持的增加，越来越多的前端开发者开始使用 ES6 语法编写 JavaScript 代码。但是，一些老旧的浏览器并不支持 ES6 语法，这就需要使用 Babel 来将 ES6 代码转换成能够在老旧浏览器中运行的代码。
Babel 是一个 JavaScript 代码转换工具，它的核心功能是将 ES6 代码转换成 ES5 代码。不过，Babel 是可扩展的，通过预设（preset）和插件（plugin）的配合使用，可以实现更多的功能。下面将详解 Babel 中的预设和插件的使用方法。
预设（preset）
Babel 中的预设是一组插件的集合，通常用于应用到特定的项目中。预设使用起来比较方便，只需安装对应的预设，然后在 .babelrc 文件中设置即可。预设包含了一些比较常用的插件，如转换 ES6 到 ES5、转换 React JSX 到 JavaScript、转换 ES6 模块到 CommonJS 等。
常用的一些预设有：
- @babel/preset-env：用于转换 ES6+ 代码到 ES5，根据你的代码中使用到的特性自动进行代码转换，或者你可以自己配置哪些特性需要转换。
- @babel/preset-react：用于转换 React JSX 代码到普通的 JavaScript 代码。
- @babel/preset-typescript：用于转换 TypeScript 代码到 JavaScript 代码。
使用预设的示例如下：
-- ----
--- ------- ----------------- ----------
-- - -------- -------
-
---------- -
--------------------
---------------------
-
-注意：Babel 7 版本之后，需要安装 @babel/core 模块，然后再安装预设和插件。
插件（plugin）
与预设不同，Babel 中的插件通常需要精确控制。插件可以为 Babel 添加更多的转换特性，可以为运行时加入更多的功能。插件需要手动添加到 .babelrc 文件中的 plugins 字段中。
常用的一些插件有：
- @babel/plugin-transform-arrow-functions：转换箭头函数为普通函数。
- @babel/plugin-transform-runtime：将 Babel 转换所需的库抽离出来，减小每个模块的体积。
- @babel/plugin-proposal-class-properties：实现类中静态属性定义，如通过
static x = 'hello'定义静态字段。 - @babel/plugin-syntax-dynamic-import：支持动态
import()。
使用插件的示例如下：
-- ----
--- ------- --------------------------------------- ----------
-- - -------- -------
-
---------- -
------------------------------------------
---------------------------------
-
-注意：Babel 还有一些其它的插件，可以通过 Babel 官方文档了解更多。
配合使用
Babel 中预设和插件的配合使用可以实现更多的功能。如，你可能需要将 ES6 的代码转换成 ES5，同时也希望使用动态 import() 功能。这时就可以同时使用 @babel/preset-env 和 @babel/plugin-syntax-dynamic-import。
配置示例如下：
-
---------- -
-------------------
--
---------- -
-------------------------------------
-
-除了为项目中的代码配置 Babel，你还可以开发自己的 Babel 插件，为 Babel 添加更多的转换特性。
总结
- Babel 可以将 ES6 代码转换成能够运行在老旧浏览器中的 JavaScript 代码。
- Babel 可以使用预设和插件来扩展功能，如转换 React JSX 到 JavaScript、将 ES6 的模块转换到 CommonJS 等。
- 预设是一组插件的集合，使用方便，通常用于应用到特定的项目中。
- 插件需要手动添加，用于为 Babel 添加更多的转换特性。
- Babel 中预设和插件的配合使用可以实现更多的功能。
总的来说，Babel 为前端开发者带来了非凡的便利，帮助开发人员使用最新的语法而不必担心浏览器兼容性问题，同时也为 Babel 插件的开发提供了广阔的空间。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6475ec87968c7c53b02eb27d