Babel 是一个 JavaScript 编译器，可以将新版本的 JavaScript 代码转换成向后兼容的代码，使得开发者可以在老版本的浏览器上运行新版 JavaScript 代码。
最近，Babel 发布了 7.0 版本，相对于之前的 6.x 版本有很多变化和更新。如果你已经在使用 Babel 6，并打算升级到 7，请务必了解以下内容。
安装和使用
Babel 7 不再支持单独的 babel-cli 和 babel-core，而是将所有 Babel 相关的库都打包在一个单独的 npm 包中，即 @babel/cli 和 @babel/core。所以，第一步需要卸载旧版本并安装新版本：
npm uninstall babel-cli babel-core --save-dev npm install @babel/cli @babel/core --save-dev
接着，在 package.json 中配置 @babel/preset-env，让 Babel 可以根据目标环境自动转换代码。
{
"presets": [
"@babel/preset-env"
]
}在执行命令行操作时，需要使用新的 syntax，例如：
./node_modules/.bin/babel src --out-dir lib
或者在 package.json 中添加 scripts 配置：
{
"scripts": {
"build": "babel src --out-dir lib"
}
}然后，可以使用 npm run build 命令运行程序。
插件
Babel 7 中，插件的命名和 package.json 的配置都发生了变化。
插件命名
Babel 6 插件的命名格式为 babel-plugin-NAME，例如 babel-plugin-transform-runtime。而 Babel 7 插件的命名格式为 @babel/plugin-NAME，例如 @babel/plugin-transform-runtime。
package.json 配置
Babel 6 的 package.json 配置如下：
-- -------------------- ---- -------
-
------------------ -
--------------------------------- --------
--
-------- -
---------- ---------- ---------
---------- ---------------------
-
-Babel 7 的 package.json 配置如下：
-- -------------------- ---- -------
-
------------------ -
---------------------------------- --------
--
-------- -
---------- --------------------- -----------------------
---------- -----------------------------------
-
-preset
Babel 7 中将启用 preset-env 代替 es2015、es2016、es2017、latest 等 preset。preset-env 会根据目标环境的配置，自动转换代码。
在 Babel 6 中，我们可能会使用这样的配置：
-- -------------------- ---- -------
-
-------- -
---------- -
---------
----------
-------
--
---------- -
-------------------
-
-
-而在 Babel 7 中，我们应该改成：
-- -------------------- ---- -------
-
-------- -
---------- -
--------------------
---------------------
--
---------- -
---------------------------------
-
-
-preset-env 会根据目标环境的配置，自动转换代码。因此，我们无需手动指定 es2015 或 stage-2 之类的 preset。
Polyfill
在 Babel 7 中，使用 @babel/polyfill 代替 babel-polyfill。
npm install @babel/polyfill --save
然后在代码中导入即可。
import '@babel/polyfill';
总结
Babel 6 升级到 7，并不是一件很艰难的事情，只需注意其中变动的方面，然后相应地修改代码即可。
升级到 Babel 7，可以让我们使用更强大的 preset-env，更优雅的插件命名方式，更简便的 Polyfill 引入方式等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648d1b9e48841e9894b67845