在使用 Babel 编译 ES6 代码的过程中，我们有时会遇到 Unexpected token 错误，这种错误通常是由于语法错误导致的。本文将分享一些常见的 Unexpected token 错误，以及如何解决这些错误。让我们一起来学习吧！
1. 没有使用插件
ES6 语法相对于 ES5 来说有很多新的语法特性，因此大多数代码需要使用 Babel 转换器进行转换。Babel 的转换器被称为插件，每个插件可以将 ES6 语法转换为 ES5 语法的等价语法。
出现 Unexpected token 错误的原因之一是没有使用相应的插件或使用了错误的插件。下面是一个例子：
-- -------------------- ---- -------
----- ------- -
----------------- -
--------- - ----
-
------- -
------------------ ---------------
-
-在这个例子中，class 和箭头函数 () => {} 都是 ES6 语法特性。如果我们没有安装 @babel/plugin-transform-classes 和 @babel/plugin-transform-arrow-functions 这两个插件，那么在编译的时候就会出现 Unexpected token 错误。我们需要在 .babelrc 文件中添加以下配置：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- ------
---------- -
----------- ------ - ----------
-
-
-
--
---------- -
----------------------------------
-----------------------------------------
-
-这个配置中，@babel/preset-env 是预设，允许我们按照我们所需的 ES6 语法转换自动生成相应的插件列表。使用以上配置后，就可以正确地将 ES6 代码转换成 ES5 代码了。
2. 编写错误的代码
另一个导致 Unexpected token 错误的原因是我们编写了错误的 ES6 语法。下面是一个例子：
const myArray = [1,2,3] const [first, second, third fourth] = myArray
这段代码中，我们给 third 后面使用了 fourth，这是一种错误的语法。这种错误可以在开发过程中轻易发现，但在项目较大时，有可能出现这种错误。因此，我们需要仔细阅读 ES6 语法并且避免这些错误。
3. 使用 eval 函数
在某些情况下，我们会使用 eval() 函数来执行一些动态脚本。eval() 会在程序执行时动态地编译代码，这可能会导致一些错误，例如 Unexpected token。下面是一个例子：
const myCode = `
const myArray = [1,2,3]
myArray.forEach(item) => {
console.log(item)
})
`
eval(myCode)在这个例子中，我们没有正确编写箭头函数的语法，导致 Unexpected token 错误。尽管这种方式很方便，在文件中使用它时要谨慎行事。我们应该使用其他方法来执行动态脚本，例如使用 Function 构造函数或者把脚本放在单独的文件中。
结论
在本文中，我们学习了一些如何处理 Unexpected token 错误的方法。通过在 .babelrc 文件中配置相应的插件和仔细地编写 ES6 代码，我们可以避免这种错误的出现。当我们使用动态脚本时，我们应该避免使用 eval() 函数。希望这篇文章能帮助你更好地理解并解决这些问题！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c3b86ddd3a70eb6d6df1b