近年来，Babel 已成为前端开发中最常用的工具之一。它是用于将 ECMAScript 2015+ 代码编译成可以在现代浏览器和运行环境中运行的 JavaScript 的工具。Babel 6 曾经是其中一个受欢迎的版本，但现在更新的 Babel 7 换了一些东西并引入了一些新功能。在本文中，我们将回顾一些常见问题，并为你提供 Babel 6 到 Babel 7 的迁移方案。
Q. 我需要升级吗？
如果您在使用 Babel 6 并且不打算更改任何东西，那么升级到 Babel 7 可能不是必要的。但是，如果您正在冒着不兼容错误，通过使用不兼容的插件或者使用无法在 Babel 6 中得到支持的新语法来使用编译器，那么升级会是一个明智的选择。
Q. Babel 7 有什么新功能？
Babel 7 带来了很多有用的新功能，主要有以下几个方面：
1. 内置插件的替代方式
在 Babel 6 中，您必须明确地安装和使用各种插件和预设（设置插件的组合），而 Babel 7 简化了这一过程。其中一个选择是使用 @babel/preset-env，它只是一个预设，涵盖了在任何浏览器中执行任何 JavaScript 代码所需的配置。
2. 从 Polyfill 到 env
Polyfill 是让你的代码在目标浏览器中运行的一种方式，但是 Babel 7 引入了一个名为 @babel/preset-env 的新选项，这是更加灵活且更容易配置的选择。
3. 更好的 Tree Shaking
Tree Shaking 是指构建（打包）应用程序时，通过识别未使用的代码块来优化它的过程。在 Babel 7 中有更好的支持「side-effect-free」静态分析的插件，并且网络上也有许多好的教程和实际应用例子。
4. 更好的支持 TypeScript
如果您在使用 TypeScript，这也是讲述 Babel 7 的另一个理由。您现在可以使用 @babel/preset-typescript 预设，这将使您不需要转换整个 TypeScript 文件集，而只需要对其中一小部分进行转换或解析。同时你也可以使用 @babel/plugin-proposal-class-properties，让你在类声明中使用实例属性的属性初始化器。
5. Async generator functions
在 Babel 6 中您必须使用 regenerator-runtime 来转换 async/await 语法，但是现在，Babel 7 内置了该功能，并在其 core-package 之一 @babel/polyfill 中包含了 regenerator-runtime。
Q. 如何从 Babel 6 迁移到 Babel 7？
迁移到 Babel 7 并不是完全平滑的过程，但是下面的几个步骤可以使迁移过程变得更加轻松和自动化。
1. 在 package.json 中更新值
首先，你需要在你的包管理器（通常是 Yarn 或者 npm）中更新值。在 package.json 文件中，将 "babel-core": "^6.x.x"（或其他版本）替换为 "@babel/core": "^7.x.x"，并取消依赖项的安装以及对 .babelrc 文件的引用。
例如：
-
------- -------------
---------- --------
-------- -
---------- -
---------
-------
-
--
--------------- -
------------- --------
-
-被更新为
-
------- -------------
---------- --------
-------- -
---------- -
--------------------
---------------------
-
--
--------------- -
-------------- --------
-
-2. 更新现有插件
您需要找到当前的 .babelrc 文件（如果有）并将其替换为以下内容：
-
---------- -
--------------------- ----
---------------------
--
---------- -
----------------------------------
-----------------------------------------
-
-这里我们添加了 @babel/plugin-transform-runtime 以及 @babel/plugin-proposal-class-properties 插件，这样在进行构建时就可以将 async/await 等 feature 转化改针对 env.
3. 配置 Webpack
如果您在使用 Webpack，则需要更新其配置以引用以前已经提到的最新 Babel 包。根据您的 Webpack 版本和使用情况，这个步骤会有所不同，但大多数集成过程都涉及到更新依赖的引用。您可以在 这个示例仓库 中找到更多关于如何更新 Webpack 的信息。
4. 运行所有新的命令
最后，你需要更新你的命令行中的所有相关命令。例如，如果您在使用 Jest 的话，则需要更新其配置文件来使用新的 babel-jest 包，该包是 Babel 版本 7 的完整包存储库。例如，您可以使用下面的命令将 Jest 更新到版本 23.0.1：
- ---- --- ----- -----------------
结论
Babel 7 对于正在使用 JavaScript 的前端开发者来说是一个可行的升级选择。虽然存在一些变动，但是在您完成了所有必要步骤之后，使用体验会变得愉快和高效。在迁移过程中，建议您仔细阅读文档以避免出现任何意想不到的问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67341cca0bc820c58246a452