在进行前端开发时，经常会使用 Babel 来转译 ES6+ 代码，使其在旧版本浏览器中也能够正常运行。但是使用 Babel 进行转译时，有时会遇到“Unexpected token” 错误，本文将介绍如何解决这个问题。
错误原因
“Unexpected token” 错误表示在解析代码时遇到了意外的标记（例如未关闭的大括号，缺少分号等）。这往往是由于未正确使用语言特性或未正确引入依赖。
当使用 Babel 进行编译时，代码会先被转译为 ES5 代码，然后再执行。如果代码中存在不被 ES5 支持的语言特性（例如箭头函数、解构等），那么在转译过程中就会出现 “Unexpected token” 错误。
解决方案
解决“Unexpected token” 错误的方法主要是检查代码中使用的语言特性是否被正确转译。以下是一些常见的解决方案：
使用正确的 Babel 插件
Babel 支持大量的插件，不同的插件可以转译不同的语言特性。如果在代码中使用了某些语言特性，但 Babel 编译时未包含相应的插件，则会出现错误。
例如，在使用箭头函数时，需要使用 @babel/plugin-transform-arrow-functions 插件。如果未安装或未启用该插件，则会出现“Unexpected token” 错误。
安装插件的方法如下：
npm install @babel/plugin-transform-arrow-functions --save-dev
在 Babel 配置文件中启用插件的方法如下：
{ "plugins": ["@babel/plugin-transform-arrow-functions"] }
确认 Babel 版本和配置文件版本是否匹配
Babel 7.x 的配置文件为 babel.config.js，而 Babel 6.x 的配置文件为 .babelrc。如果使用了不匹配的配置文件或版本，则会出现“Unexpected token” 错误。
另外，Babel 7.x 支持使用 @babel/preset-env 做编译优化，而 Babel 6.x 不支持。如果使用了 Babel 6.x 并且未安装 @babel/preset-env，则会出现“Unexpected token” 错误。
升级 Babel 或安装 @babel/preset-env 的方法如下：
npm install @babel/core@7.x.x @babel/preset-env@7.x.x --save-dev
在 babel.config.js 文件中启用 @babel/preset-env 的方法如下：
{ "presets": ["@babel/preset-env"] }
确认依赖是否正确安装
Babel 的核心模块为 @babel/core，如果未正确安装该依赖，则会出现“Unexpected token” 错误。
安装 @babel/core 的方法如下：
npm install @babel/core --save-dev
另外，如果使用了一些 Babel 插件，也需要确保正确安装了相应的依赖。
确认使用语言特性的环境是否正确
在某些情况下，Babel 编译时未识别使用的语言特性，可能是因为环境问题。例如，在使用 ES6 模块语法时，如果在浏览器中直接打开 HTML 文件，则会出现“Unexpected token” 错误。这是因为浏览器并不支持 ES6 模块语法。解决方法是使用构建工具（例如 Webpack、Rollup 等）对项目进行打包，或使用浏览器不支持的 JavaScript 特性时，建议使用 Polyfill 库来实现兼容性。
代码示例
下面是一个使用箭头函数时产生“Unexpected token” 错误的示例代码：
const numbers = [1, 2, 3]; const greaterThanTwo = numbers.filter(n => n > 2); console.log(greaterThanTwo);
运行上述代码进行 Babel 编译时，会出现 “Unexpected token” 错误，因为 Babel 默认不会将箭头函数转译成 ES5 代码。要解决这个问题，需要安装 @babel/plugin-transform-arrow-functions 插件并启用它：
npm install @babel/plugin-transform-arrow-functions --save-dev
修改 babel.config.js 文件：
module.exports = { "plugins": ["@babel/plugin-transform-arrow-functions"] }
运行 Babel 编译后的代码：
-- -------------------- ---- ------- ---- -------- --- ------- - --- -- --- --- -------------- - ----------------------- --- - ------ - - -- --- ----------------------------展开代码
通过使用插件，箭头函数被成功转译成了 ES5 代码，没有出现 “Unexpected token” 错误。
小结
在前端开发中，遇到“Unexpected token” 错误是很常见的，但只要正确使用 Babel 的插件，并确认依赖、版本、环境等问题，就能够快速解决这个问题。在日常开发中，建议使用构建工具对项目进行打包，并谨慎使用 JavaScript 特性，以确保代码的兼容性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bb1518306f20b3a6a63435
