Babel 是一个广受欢迎的 JavaScript 编译器，用于将 ES6+ 的 JavaScript 代码转化成浏览器或者旧版本的 Node.js 可以运行的代码。它的版本 7 带来了许多的变化，但是我们在用的时候也需要注意一些这个版本的坑点。
1. @babel/preset-env 的配置
在 Babel 7 中，@babel/preset-env 取代了之前的 babel-preset-env。preset-env 能够根据指定的环境自动调整所需的 babel 插件来使得代码可以在特定的环境中运行。但是在配置时，我们需要注意几个问题。
首先，如果你的项目是使用了 React 框架的话，你需要同时使用 @babel/preset-react 进行配置。示例代码如下：
-- -------------------- ---- -------
-
---------- -
--------------------
---------------------
--
---------- -
-- ---- ------- ----
-
-其次，如果你的项目中使用了 TypeScript 的话，你需要使用 @babel/preset-typescript 进行配置。示例代码如下：
-- -------------------- ---- -------
-
---------- -
--------------------
----------------------
--------------------------
--
---------- -
-- ---- ------- ----
-
-最后，注意需要保留 modules 配置。modules 配置是告诉 babel 不要将 ES6 模块转换成其他模式的代码。示例代码如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -----
-
-
--
---------- -
-- ---- ------- ----
-
-2. 使用 @babel/runtime 和 @babel/plugin-transform-runtime
@babel/runtime 和 @babel/plugin-transform-runtime 具有相同的目的：防止在将本地代码编译到像 UMD 的库时，创建对全局作用域的 polyfill 的副本。这两个配合使用可以相互补充，让我们使用更加顺手，并且不会让我们的发布效率变慢。
需要注意的是，我们在使用 @babel/runtime 时，需要设置 corejs 和 regenerator 版本。示例代码如下：
-- -------------------- ---- -------
-
---------- -
-
----------------------------------
-
--------- --
-------------- ----
-
-
--
--------------- -
----------------- ---------
-
-3. 使用 @babel/polyfill
@babel/polyfill 是一个用于实现 ES2015+ 环境的缺乏的 APIs 的库。但是在 Babel 7 中，@babel/polyfill 经历了一些变化。具体来说，@babel/polyfill 从之前的 core-js/stable 和 regenerator-runtime/runtime 两部分变成了一个单一的包。
在使用 @babel/polyfill 时，需要将其导入到项目的入口中。示例代码如下：
import '@babel/polyfill';
结论
以上就是遇到 Babel 7 的坑点时，需要注意的几个方面。尽管初学者可能会因为配置的微小改动而感到迷惑并且无法解决问题，但是掌握这些知识点后，我们将会更加自如的运用 Babel。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670a185ed91dce0dc87ea2fa