Babel 是一个非常流行的 JavaScript 编译器，可以把高级语法的 JavaScript 代码转换成适合大多数浏览器的代码。但是，当我们使用 Babel 时，有可能会出现 SyntaxError: Invalid or unexpected token 的报错。出现这个错误通常是因为 Babel 编译后的代码存在语法错误，本文将介绍如何解决这个问题。
1. 确认使用了正确的插件
Babel 默认只支持部分语法特性，如果我们需要使用一些新的语法特性，需要使用相应的插件。当出现 SyntaxError: Invalid or unexpected token 的报错时，首先需要检查是否使用了正确的插件。例如，如果我们想使用箭头函数，需要安装 @babel/plugin-transform-arrow-functions 插件。
我们可以在 .babelrc 文件中配置插件：
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}也可以在 webpack.config.js 文件中配置插件：
-- -------------------- ---- -------
-------------- - -
---
------- -
------ -
-
----- --------
---- -
------- ---------------
-------- -
-------- -------------------------------------------
-
--
-------- --------------
-
-
-
--2. 检查 Babel 配置
如果我们已经安装了正确的插件，但是仍然出现 SyntaxError: Invalid or unexpected token 的报错，需要检查 Babel 配置。Babel 配置文件 .babelrc 可能包含有误或未包含需要的插件。
以下是 .babelrc 配置示例：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----- ----
--
-------------- --------
--------- -
---------- --
------------ ----
-
-
-
--
---------- -
-----------------------------------------
-
-3. 检查源代码是否包含语法错误
如果以上解决方法都不起作用，那么发生 SyntaxError: Invalid or unexpected token 的原因可能是由于源代码包含语法错误。可以通过 ESLint 检查代码是否存在语法错误。运行以下命令进行代码检查：
npx eslint src/**/* --ext .js,.jsx,.ts,.tsx
如果发现了语法错误，就需要修改源代码中的错误并再次编译。
4. 检查 babel-polyfill 是否被正确包含
如果使用了 babel-polyfill，并且出现了 SyntaxError: Invalid or unexpected token 的报错，可能是因为 babel-polyfill 还未被正确包含。我们可以通过确定 babel-polyfill 是否已正确加入入口文件的顶部来确认是否引入正确。
import 'babel-polyfill';
总结
在使用 Babel 编译代码时可能会遇到 SyntaxError: Invalid or unexpected token 的报错，出现这个错误通常是因为 Babel 编译后的代码存在语法错误。正确安装插件、检查 Babel 配置、检查源代码是否包含语法错误、检查 babel-polyfill 是否被正确包含可以解决这个问题。希望本文能为你解决这个问题提供帮助。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b0ac6448841e9894cc1f01
