引言
Babel 是最受欢迎的前端编译器之一，可以将 ES6 或 ES7 的代码转化为 ES5 的代码，支持的语言特性非常多，也支持开发者自定义的插件，可以让我们的代码运行在更多的浏览器和运行环境上。但是，在使用 Babel 编译代码时，常常会遇到 "Unexpected token" 错误，这是因为 Babel 在编译语法时可能会出现一些问题，导致编译后的代码出现语法错误。本文将会介绍一些解决这些错误的方法。
方法一：使用正确的 Preset
Babel 支持通过预设设置需要使用的插件和语法转换，如果你需要编译 ES6 的代码，可以使用 "@babel/preset-env"，该预设包括了大部分的 ES6 语法转换和一些较新的 ECMAScript 提案，如果你需要使用 React，可以使用 "@babel/preset-react" 预设，该预设将会帮助我们转换 JSX 语法。
以下是一个使用 "@babel/preset-env" 的示例：
// .babelrc
{
"presets": ["@babel/preset-env"]
}当然，不同的项目需要使用不同的预设，需要根据具体情况来选择。
方法二：手动添加插件
在使用 Babel 的过程中，你可能需要自己编写插件来转换一些特定的语法，或者使用一些第三方的插件，这时候你需要手动将插件添加到 Babel 当中。
以下是一个通过手动添加插件解决 "Unexpected token" 错误的示例：
// .babelrc
{
"plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}方法三：检查代码语法错误
在使用 Babel 编译代码时，如果代码本身存在语法错误，那么编译器会报 "Unexpected token" 错误。因此，在解决这个问题之前，我们需要检查一下代码本身是否存在语法错误。
以下是一个使用 ESLint 检查语法错误的示例：
-- -------------------- ---- -------
-- ------------
-------------- - -
-------------- -
------------ -----
----------- ---------
------------- -
---- -----
--
--
------ -
------------- ------
----------------- -------
----------- --------
---------------------- --------
--
-------- ---------------------- ----------------------------
-方法四：升级 Babel 版本
在遇到 "Unexpected token" 错误时，也可以尝试升级 Babel 的版本，可能是 Babel 的某个版本在编译某些特定的语法时出现了问题。
升级 Babel 的版本非常简单，只需要使用 npm 或者 yarn 将版本号值改变即可。比如：
yarn add babel-core@^7.14.5
结论
Babel 能够让我们的代码在更多的浏览器和运行环境中运行，但是，在使用 Babel 编译代码时，常常会遇到 "Unexpected token" 错误。本文介绍了一些解决这些错误的方法，我们可以使用正确的预设、手动添加插件、检查代码语法错误或者升级 Babel 的版本来解决这些错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67049755d91dce0dc84f654b