在使用 Babel 进行 JavaScript 代码编译时，可能会遇到 "Unexpected token" 的报错。这种错误通常是由于代码中使用了语言特性，而 Babel 无法识别导致的。本文将介绍如何解决这种报错并提供相关示例代码。
什么是 Unexpected token 错误？
Unexpected token 错误通常意味着在代码中使用了不被 Babel 所支持的语言特性。这些特性可能是最新的 JavaScript 语法或者是一些扩展的语言特性，而 Babel 默认只支持标准的 ES5 和 ES6 语法。
下面是一个示例代码，其中使用了箭头函数和字符串模板语法：
----- -------- - ------ -- - ------------------- ----------- - ------------------
如果尝试使用 Babel 将这段代码编译为 ES5 代码，会得到如下错误：
------------ ---------- ----- --
这是因为箭头函数是 ES6 中的一个新特性，而 Babel 默认只支持 ES5 中的语法。同样，字符串模板语法也是 ES6 中的一种新特性，需要使用插件才能被正确编译。
解决方法
为了解决 Unexpected token 错误，我们需要让 Babel 能够识别和编译我们使用的语言特性。这可以通过以下两种方式来实现。
使用插件
Babel 有很多插件可以用来识别和编译各种语言特性。例如，如果想要使用箭头函数和字符串模板语法，可以使用 @babel/plugin-transform-arrow-functions 和 @babel/plugin-transform-template-literals 插件。
首先，安装这两个插件：
--- ------- ---------- --------------------------------------- -----------------------------------------
然后，在 Babel 配置文件中添加以下代码：
-
---------- -
------------------------------------------
-------------------------------------------
-
-这样，Babel 就可以正确编译上面的示例代码了。
使用 Preset
除了单独使用插件，还可以使用 Babel 的 Preset 功能来快速配置多个插件。Preset 是一组预设的插件集合，可以通过一次性设置来启用多个插件。
例如，可以使用 @babel/preset-env Preset 来启用所有与当前环境兼容的插件：
首先，安装 @babel/preset-env：
--- ------- ---------- -----------------
然后，在 Babel 配置文件中添加以下代码：
-
---------- -
-------------------
-
-这样，Babel 就可以自动根据当前环境启用需要的插件，从而正确编译代码。
总结
Unexpected token 错误通常是由于代码中使用了不被 Babel 所支持的语言特性，可以通过使用插件或者 Preset 来解决这种问题。在实际开发中，需要根据自己的需要来选择合适的解决方案，并注意在使用新特性时，需要使用相应的插件或者 Preset 来支持编译。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65066e2695b1f8cacd250d0b