当我们使用 Babel 编译 JavaScript 代码时，有时会出现 “SyntaxError: Unexpected token” 错误。这种错误通常是由于 Babel 没有正确识别源代码中某些语法所导致的。在本文中，我们将探讨这个错误的一些可能原因，并提供解决方法和示例代码。
1. 原因
“SyntaxError: Unexpected token” 错误通常是由于以下原因所导致的。
1.1 未指定 babel 配置文件
如果没有指定 babel 配置文件，Babel 将使用默认配置来编译代码。这可能会导致它无法识别源代码中的某些语法，从而导致错误。例如，当我们尝试编译使用了箭头函数的代码时，如果 babel 配置文件中未启用 ES6 转译器，就会出现 “SyntaxError: Unexpected token” 错误。
1.2 未安装 babel-plugin-transform-runtime 插件
在某些情况下，我们需要在代码中使用一些高级语法特性，例如 async/await 和类装饰器等。这些功能需要通过 babel-plugin-transform-runtime 插件来正确编译，否则就会出现上述错误。
1.3 源代码语法错误
最后，当源代码中存在语法错误时，也会出现 “SyntaxError: Unexpected token” 错误。Babel 可能无法处理源代码中的语法错误，因此导致编译失败。
2. 解决方案
针对上述原因，我们可以采取以下措施来解决 “SyntaxError: Unexpected token” 错误。
2.1 创建 babel 配置文件
创建一个 .babelrc 文件并将其放置在项目根目录下，以指定 babel 配置。在该文件中，我们可以启用所有需要的转换器和插件，从而确保 Babel 可以正确识别源代码中的各种语法。例如，以下是一个简单的 .babelrc 文件。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}该配置文件启用了 @babel/preset-env 和 @babel/plugin-transform-runtime 两个插件，以启用 ES6 转译和 async/await 功能
2.2 安装 babel-plugin-transform-runtime 插件
这一步非常简单，只需要使用以下命令安装插件即可。
npm install --save-dev @babel/plugin-transform-runtime
2.3 修复源代码语法错误
最后，当我们出现语法错误时，我们需要修复它们。这需要对 JavaScript 本身有一定的了解，因此本文不再赘述。
3. 示例代码
下面是一个简单的示例代码，其使用箭头函数和 async/await 语法特性。
-- -------------------- ---- -------
----- --- - --- -- -- -
------ --- --------------- -- -
------------- -- -
--------- - ---
-- ------
---
--
----- -------- ------ -
--- ------ - ----- ------ ---
--------------------
-如果我们没有配置好 Babel，则在编译代码时将出现以下错误。
SyntaxError: Unexpected token =>
为了解决这个问题，我们可以创建一个 .babelrc 文件并将其放置在项目根目录下，其中包含以下内容。
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-transform-runtime"]
}然后，我们执行以下命令来安装依赖项。
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
最后，我们可以重新编译代码，将其转换为可以在任何环境中运行的 ES5 代码。
npx babel src --out-dir lib
在上述示例中，src 目录中的源文件将编译为 lib 目录中的 ES5 兼容代码。
4. 总结
在本文中，我们讨论了 “SyntaxError: Unexpected token” 错误的一些可能原因，并提供了解决方案和示例代码。要解决此错误，我们可以创建一个 .babelrc 配置文件来启用转换器和插件，或者修复源代码中的语法错误。通过遵循上述建议，我们可以更轻松地解决这个常见的问题并提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517864b95b1f8cacdfb4e11