Babel 编译报错：Unexpected token 的解决方法-JavaScript中文网-JavaScript教程资源分享门户

在使用 Babel 进行 JavaScript 代码编译时，可能会遇到 "Unexpected token" 的报错。这种错误通常是由于代码中使用了语言特性，而 Babel 无法识别导致的。本文将介绍如何解决这种报错并提供相关示例代码。

什么是 Unexpected token 错误？

Unexpected token 错误通常意味着在代码中使用了不被 Babel 所支持的语言特性。这些特性可能是最新的 JavaScript 语法或者是一些扩展的语言特性，而 Babel 默认只支持标准的 ES5 和 ES6 语法。

下面是一个示例代码，其中使用了箭头函数和字符串模板语法：

const sayHello = (name) => {
  console.log(`Hello, ${name}!`);
}

sayHello('World');

如果尝试使用 Babel 将这段代码编译为 ES5 代码，会得到如下错误：

SyntaxError: Unexpected token =>

这是因为箭头函数是 ES6 中的一个新特性，而 Babel 默认只支持 ES5 中的语法。同样，字符串模板语法也是 ES6 中的一种新特性，需要使用插件才能被正确编译。

为了解决 Unexpected token 错误，我们需要让 Babel 能够识别和编译我们使用的语言特性。这可以通过以下两种方式来实现。

Babel 有很多插件可以用来识别和编译各种语言特性。例如，如果想要使用箭头函数和字符串模板语法，可以使用 @babel/plugin-transform-arrow-functions 和 @babel/plugin-transform-template-literals 插件。

首先，安装这两个插件：

npm install --save-dev @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals

然后，在 Babel 配置文件中添加以下代码：

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

这样，Babel 就可以正确编译上面的示例代码了。

除了单独使用插件，还可以使用 Babel 的 Preset 功能来快速配置多个插件。Preset 是一组预设的插件集合，可以通过一次性设置来启用多个插件。

例如，可以使用 @babel/preset-env Preset 来启用所有与当前环境兼容的插件：

首先，安装 @babel/preset-env：

npm install --save-dev @babel/preset-env

然后，在 Babel 配置文件中添加以下代码：

{
  "presets": [
    "@babel/preset-env"
  ]
}

这样，Babel 就可以自动根据当前环境启用需要的插件，从而正确编译代码。

Unexpected token 错误通常是由于代码中使用了不被 Babel 所支持的语言特性，可以通过使用插件或者 Preset 来解决这种问题。在实际开发中，需要根据自己的需要来选择合适的解决方案，并注意在使用新特性时，需要使用相应的插件或者 Preset 来支持编译。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65066e2695b1f8cacd250d0b