前言
随着前端技术的飞速发展，我们的代码也越来越复杂，为了让代码更加兼容，我们经常会使用 Babel 这个工具来将 ES6+ 的代码转成 ES5 代码。而在最近的 Babel 7 版本中，出现了一些问题，本文将为大家介绍这些问题以及解决方式。
问题一：@babel/preset-env 的默认配置变化
在 Babel 7 中，@babel/preset-env 的默认配置发生了变化。在之前的版本中，@babel/preset-env 会根据当前的运行环境来自动选择需要转换的语法特性，但是在 Babel 7 中，@babel/preset-env 不再自动选择需要转换的语法特性，而是需要手动配置。
解决方式：
在 babel.config.js 中手动配置需要转换的语法特性，例如：
-------------- - -
-------- -
-
--------------------
-
---------- -
----------- ------ - ---------- --- -- ---
--
-------------- -------
-
-
-
--问题二：@babel/plugin-transform-runtime 报错
在 Babel 7 中，@babel/plugin-transform-runtime 报错，提示找不到 @babel/runtime-corejs2/core-js。
解决方式：
安装 @babel/runtime-corejs2 并在 babel.config.js 中配置：
-------------- - -
-------- -
-
----------------------------------
-
--------- -
-
-
-
--问题三：@babel/preset-react 报错
在 Babel 7 中，@babel/preset-react 报错，提示找不到 @babel/plugin-transform-react-jsx。
解决方式：
安装 @babel/plugin-transform-react-jsx 并在 babel.config.js 中配置：
-------------- - -
-------- -
-
----------------------
-
---------- -----------
-
-
--
-------- -
-----------------------------------
-
--问题四：@babel/preset-typescript 不工作
在 Babel 7 中，@babel/preset-typescript 不工作，提示找不到 typescript。
解决方式：
安装 @babel/preset-typescript 和 @babel/plugin-transform-typescript 并在 babel.config.js 中配置：
-------------- - -
-------- -
--------------------------
--
-------- -
------------------------------------
-
--总结
通过本文的介绍，我们了解了 Babel 7 升级出现的问题以及解决方式。在升级 Babel 7 时，我们需要注意 @babel/preset-env 的默认配置变化，以及 @babel/plugin-transform-runtime、@babel/preset-react、@babel/preset-typescript 的报错问题，并按照解决方式进行配置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660aa55dd10417a222a529fc