简介
Babel是一个流行的 JavaScript 编译器，支持将 ES6+ 的语法转换为浏览器或 Node.js 可以理解的语法。在 2018 年底发布的 Babel 7.x 版本中，有一些重要的变化和新特性，本文将介绍如何升级到 Babel 7.x，并逐一详细讨论配置项。
升级步骤
1. 升级到最新的 Babel 6.x
在开始升级到 Babel 7.x 之前，首先需要升级到当前最新的 Babel 6.x 版本。这一步主要是为了保证已有的配置和插件可以在 Babel 7.x 中正常工作。
可以使用以下命令升级到最新的 Babel 6.x：
--- ------- ---------- ------------
2. 升级到 Babel 7.x
升级到 Babel 7.x 需要使用以下命令：
--- ------- ---------- ----------- ----------
3. 更改配置文件
升级到 Babel 7.x 后，需要更新 .babelrc 文件中的配置项，以便能够顺利地进行转换。
以下是示例配置文件（.babelrc）：
-
---------- -
--------------------
---------------------
--
---------- -
------------------------------------------
---------------------------------
-
-在 Babel 7.x 中，一些插件被更新，并重新组织在了不同的包中。例如，@babel/preset-es2015 被重命名为 @babel/preset-env 以支持更多的 ES6+ 特性。
同时，新的插件也被增加，例如 @babel/plugin-proposal-class-properties 可以让你使用类属性的组合器语法，而无需手动在构造函数中绑定 this。 @babel/plugin-transform-runtime 可以减少你的代码中重复的代码。这是一些新插件和插件名称的更改。
为了使现有配置可以在 Babel 7.x 中正常工作，需要将插件名称和预设更改为它们的新名称，如下所示：
-
---------- -
--------------------
---------------------
--
---------- -
------------------------------------------
---------------------------------
-
-如果你的项目中使用了其它插件，需要找到它们的新名称并进行相应的更改。可以在Babel 7.x 官方文档中找到更多信息。
4. 运行 Babel
使用以下命令将代码转换为 ES5 代码：
--- ----- --- --------- ---
这将把 src 目录下的代码转换为 ES5，并将生成的文件保存在 lib 目录中。
配置项
以下是常见的 Babel 7.x 配置项，此处我们只列出常用的选项的简介以及作用，更多的请查看官方文档。
presets
预设是 Babel 的集成插件，它们包含了一组插件、预设和其它选项，以便快速配置 Babel。
以下是一些常用的预设：
- @babel/preset-env：转换 ES6+ 代码到 ES5，自动根据你设置的环境（.browserslistrc）加载所需的 polyfills。
- @babel/preset-react：转换 JSX。
plugins
插件是 Babel 的可重用转换器，它们执行特定的语法转换。
以下是一些常用的插件：
- @babel/plugin-proposal-class-properties：转换类定义中的属性，使其支持 ES6+ 的属性初始化语法。
- @babel/plugin-proposal-decorators：转换类和类成员中的装饰器。
- @babel/plugin-proposal-object-rest-spread：转换对象和数组的 rest 和 spread 操作符。
- @babel/plugin-syntax-dynamic-import：转换动态导入。
env
可以定义不同的环境变量，并在根据环境变量生成不同的配置。
以下是示例配置项：
-
------ -
-------------- -
---------- -----------------------
--
------------- -
---------- -----------------------
-
-
-overrides
在一个有多个子目录的项目中，可能需要针对不同的目录使用不同的 Babel 配置。可以使用 overrides 定义子目录的特定配置。
以下是示例配置项：
-
---------- ------------------------
------------ -
-
------- -----------------
---------- ---------------------
-
-
-此处配置将 ./src/legacy/* 的代码使用 @babel/preset-env 进行转换，而其它使用 @babel/preset-react 进行转换。
结论
升级到 Babel 7.x 非常简单，并且得到了一些新的功能和插件。通过了解不同的配置项，可以更加灵活地使用 Babel，并将 ES6+ 的语法转换为可压缩和可移植的 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67159b6ead1e889fe21827b9