引言
Babel 是一个流行的 JavaScript 编译器，用于将 ECMAScript 2015+ 的代码转换为向后兼容的 JavaScript 代码。但是在使用 Babel 进行转码时，你可能会遇到 "Invalid or unexpected token" 的错误，这种错误提示通常意味着 babel-parser 解析代码时遇到了一个无法理解的字符或语法。
本文将详细讲解这个问题并给出解决方案。
问题分析
当使用 Babel 进行转码时，可能会遇到一些语法错误，例如："token x is not a valid identifier"，这可能是因为在 ECMAScript 特定版本的代码中存在无法识别的语义。当 babel-parser 解析遇到这样的无法识别的语法时，会抛出 "Invalid or unexpected token" 的异常。
例如，以下代码会引发 "Invalid or unexpected token" 异常：
const a = {
hello world() {
console.log('hello world');
}
};其中，"hello world" 函数名包含了空格，导致 babel-parser 无法理解这个语法。在这种情况下，我们需要将代码更改为以下形式：
const a = {
'hello world'() {
console.log('hello world');
}
};通过使用引号将函数名包在一起，我们可以让 babel-parser 正确地解析这个代码。但是，在实际工作中，我们可能会遇到更加复杂的情况。下面将给出一些其他可能发生的 "Invalid or unexpected token" 异常的解决方案。
解决方案
引入对应的 babel 插件
babel 本身只能识别一些已经标准化的新特性，例如 arrow functions、rest parameters 等等。当我们项目中使用到的特性过于新，babel 尚未支持时，就会出现此类问题。这时候，我们需要引入对应的插件，以支持更新的特性。
例如，在我们的项目中使用了 ES2017 标准中的 async/await 方法，但是 babel 默认并不支持，我们需要手动安装 @babel/plugin-transform-async-to-generator 插件来支持此特性。
npm i -D @babel/plugin-transform-async-to-generator
在 babel 的配置文件中，添加如下配置：
{
"plugins": [
"@babel/plugin-transform-async-to-generator"
]
}配置 babel 解析选项
有时候，当代码中出现一些非 ASCII 字符时，也会引发 "Invalid or unexpected token" 异常。例如，以下代码：
const 中文 = 'hello world';
这里的变量名 中文 包含了中文字符，导致 babel-parser 解析错误。为了解决这个问题，我们可以将 "sourceType": "module" 添加到 babel 的解析选项中，告诉 babel 使用 ECMAScript 模块的解析规则。在 babel 的配置文件中，添加如下配置即可：
{
"parserOpts": {
"sourceType": "module"
}
}手动转义字符
如果在代码中使用了一些转义字符（如 Unicode 转义字符），可能会出现 "Invalid or unexpected token" 异常。例如，以下代码：
const \u0061 = 'hello world';
在这里，\u0061 实际上是 a 的 Unicode 编码。但是，babel-parser 并不会将其正确识别，导致解析错误。为了解决这个问题，我们可以手动将其转换为相应的字符：
const a = '\u0061';
避免被 babel 忽略的文件
最后，如果你的代码在转换之前被 babel 忽略了，也会产生 "Invalid or unexpected token" 异常。例如，如果你的代码文件命名为 main.mjs，babel 将不会对其转换，导致出现此类问题。解决方案是将其改名为 main.js。如果想让 babel 转换 .mjs 文件，可以在 babel 配置文件中添加解析选项：
{
"parserOpts": {
"allowImportExportEverywhere": true
}
}总结
当 babel-parser 解析代码遇到 "Invalid or unexpected token" 异常时，我们需要仔细检查代码，找到错误原因。这可能是由于使用了 babel 不支持的新特性，包含非 ASCII 字符，出现转义字符等等。通过引入插件、配置解析选项、手动转义字符和避免被 babel 忽略的文件，我们可以解决这些问题，使 babel-parser 成功解析我们的代码。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ca27f55ad90b6d0419e3ab