Babel 是一种将 ES6+ 代码转换为向后兼容的 JavaScript 代码的工具。前些年的应用基本上都是以 Babel 6 为基础的，但是 Babel 最近发布了 7.0 版本，这个版本带来了很多变化，这篇文章旨在让读者了解 Babel 7 相较 Babel 6 有哪些变化，以及它们是否足以让我们从 Babel 6 迁移到 Babel 7。
Babel 7 带来的变化
更改了插件 API
Babel 7 修复了插件 API 的一些问题。为了解决这些问题，Babel 7 作出了一些重大适用变更。除了插件 API，Babel 7 还弃用了一些插件。如果你想迁移到 Babel 7 但之前使用了一些弃用插件，那么你需要寻找替代方案或选择保留 Babel 6。
使用 @babel 包
Babel 7 引入了 @babel 包。在 Babel 6 中，所有 babel 引用都是指向新版本的 babel-core，这使得使用旧插件的应用程序运行起来可能会出现错误。Babel 7 中，在插件和预设中，你需要指定 @babel/ 的前缀，以访问 core 包。如果你正在使用 Babel 6 中的一些插件，则需要检查是否有替代品，因为这些插件已被弃用。
Polyfill 与 @babel/preset-env
在 Babel 7 之前，@babel/polyfill 可以帮助你使用实现了 ES6+ 功能的浏览器。在 Babel 7 中不再建议使用这个包，而是使用 @babel/preset-env，它可以根据你的目标环境动态地删除未使用的 polyfill，这样你就可以减小打包大小和加快构建速度。
动态导入支持
Babel 7 支持动态导入(import())。在 Babel 6 中，当使用动态导入时，需要使用 babel-plugin-syntax-dynamic-import 插件来支持。但是，在 Babel 7 中已经集成。动态导入可以帮助你更好地组织代码，并按需加载新内容。
TypeScript 支持
Babel 7 可以通过 @babel/preset-typescript 和 @babel/plugin-transform-typescript 来解析 TypeScript。
JSX 支持
在 Babel 7 中，可以使用 @babel/preset-react 来解析 JSX 语法。
是否应该升级到 Babel 7？
如果你在 Babel 6 中使用了很多弃用的插件或者你的项目中使用了许多的 polyfill，那么迁移到 Babel 7 可能会很困难。同时，如果你的应用是一个相对较小的应用并且和 Babel 6 的兼容性非常好，那么升级到 Babel 7 可能并没有太大的必要。相反，如果你需要使用动态导入或者 TypeScript，那么升级到 Babel 7 就是件值得去做的事情。最终的决定取决于你的项目情况。
如何迁移到 Babel 7？
如果你决定迁移到 Babel 7，那么需要记住以下几点：
- 使用 @babel 包。
- 检查你所使用的插件是否与 Babel 7 兼容。若不兼容，尝试找到替代方案。
- 升级你的 babelrc 文件中的插件到新的版本。
- 如果你使用了 polyfill，则升级到 @babel/preset-env。
- 检查你的应用是否使用了弃用的插件，寻找替代方案。
以下是一个迁移到 Babel 7 的示例：
-- -----------
----- ------- - -
-
-------------
-
-------- -
--------- -- ----
--
------------ --------
--
--
--------------
--
----- ------- - -
--------------------------------------
----------------------------------
--
-------------- - - -------- ------- --结论
Babel 7 带来了很多重大的变化，包括更改了插件 API、使用 @babel 包等等。如果你需要使用一些新的功能，如动态导入或 TypeScript 的支持，那么迁移到 Babel 7 当然是一个好的选择。但是，如果你不想花费很多精力去迁移并且目前在 Babel 6 中使用得很好，那么就没有必要去升级了。最后，记住在迁移之前备份你的代码，以免遇到问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fa742744713626014c7792