Babel 编译出现”SyntaxError: Invalid or unexpected token“,如何解决?

阅读时长 4 分钟读完

Babel 是一个非常流行的 JavaScript 编译器,可以把高级语法的 JavaScript 代码转换成适合大多数浏览器的代码。但是,当我们使用 Babel 时,有可能会出现 SyntaxError: Invalid or unexpected token 的报错。出现这个错误通常是因为 Babel 编译后的代码存在语法错误,本文将介绍如何解决这个问题。

1. 确认使用了正确的插件

Babel 默认只支持部分语法特性,如果我们需要使用一些新的语法特性,需要使用相应的插件。当出现 SyntaxError: Invalid or unexpected token 的报错时,首先需要检查是否使用了正确的插件。例如,如果我们想使用箭头函数,需要安装 @babel/plugin-transform-arrow-functions 插件。

我们可以在 .babelrc 文件中配置插件:

也可以在 webpack.config.js 文件中配置插件:

-- -------------------- ---- -------
-------------- - -
  ---
  ------- -
    ------ -
      -
        ----- --------
        ---- -
          ------- ---------------
          -------- -
            -------- -------------------------------------------
          -
        --
        -------- --------------
      -
    -
  -
--

2. 检查 Babel 配置

如果我们已经安装了正确的插件,但是仍然出现 SyntaxError: Invalid or unexpected token 的报错,需要检查 Babel 配置。Babel 配置文件 .babelrc 可能包含有误或未包含需要的插件。

以下是 .babelrc 配置示例:

-- -------------------- ---- -------
-
  ---------- -
    -
      --------------------
      -
        ---------- -
          ----- ----
        --
        -------------- --------
        --------- -
          ---------- --
          ------------ ----
        -
      -
    -
  --
  ---------- -
    -----------------------------------------
  -
-

3. 检查源代码是否包含语法错误

如果以上解决方法都不起作用,那么发生 SyntaxError: Invalid or unexpected token 的原因可能是由于源代码包含语法错误。可以通过 ESLint 检查代码是否存在语法错误。运行以下命令进行代码检查:

如果发现了语法错误,就需要修改源代码中的错误并再次编译。

4. 检查 babel-polyfill 是否被正确包含

如果使用了 babel-polyfill,并且出现了 SyntaxError: Invalid or unexpected token 的报错,可能是因为 babel-polyfill 还未被正确包含。我们可以通过确定 babel-polyfill 是否已正确加入入口文件的顶部来确认是否引入正确。

总结

在使用 Babel 编译代码时可能会遇到 SyntaxError: Invalid or unexpected token 的报错,出现这个错误通常是因为 Babel 编译后的代码存在语法错误。正确安装插件、检查 Babel 配置、检查源代码是否包含语法错误、检查 babel-polyfill 是否被正确包含可以解决这个问题。希望本文能为你解决这个问题提供帮助。

参考资料:

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64b0ac6448841e9894cc1f01

纠错
反馈