在进行前端开发时，我们经常会使用 ES6 的语法，但是浏览器并不支持 ES6 的语法，这时我们就需要使用 Babel 将 ES6 转换成浏览器可以支持的 ES5 的语法。然而，有时候在使用 Babel 编译 ES6 时会遇到 SyntaxError: Unexpected token 的错误，这是由于语法错误导致的。本文将详细介绍这个问题以及解决方案，帮助大家更好的理解 Babel 以及解决问题。
问题示例
假设我们有一个 ES6 的代码文件 demo.js：
const a = () => {
console.log('Hello World!')
}
a()使用 Babel 将其转换成 ES5 的代码：
const a = function () {
console.log('Hello World!');
};
a();然而，当我们在命令行中运行以下命令时：
babel demo.js
却得到了以下错误：
SyntaxError: demo.js: Unexpected token (1:6)
> 1 | const a = () => {
| ^
2 | console.log('Hello World!')
3 | }这个错误的主要原因是 Babel 不能识别箭头函数，因此它报错了。那么，我们应该如何解决这个问题呢？
解决方案
解决 Babel 编译 ES6 时出现 SyntaxError：Unexpected token 的办法有两种。一种是使用 Babel 插件转换 ES6 语法，另一种则是升级到最新版本的 Babel。
使用 Babel 插件转换 ES6 语法
有时候，我们需要在 Babel 中使用插件来转换 ES6 的语法。可以使用以下步骤来解决这个问题：
- 安装插件
npm install --save-dev @babel/plugin-transform-arrow-functions
- 添加插件到 Babel 配置文件中
在 .babelrc 文件中加入以下内容：
{
"plugins": ["@babel/plugin-transform-arrow-functions"]
}- 运行测试
运行以下命令测试是否解决了问题：
babel demo.js
如果你看到了期望的即将输出，则说明你已经成功解决了问题，并且升级 Babel 这个步骤可以省略。
升级到最新版本的 Babel
还有一种解决 Babel 编译 ES6 时出现 SyntaxError：Unexpected token 的错误的方法，那就是升级到 Babel 的最新版本。Babel 的最新版本已经支持大部分的 ES6 语法，不需要添加额外的插件进行转换。
可以使用以下步骤升级 Babel：
- 升级 Babel
npm install --save-dev babel-core babel-preset-env
- 修改
.babelrc文件
在 .babelrc 文件中，将以下内容：
{
"presets": ["es2015"]
}修改为：
{
"presets": ["env"]
}- 运行测试
运行以下命令测试是否解决了问题：
babel demo.js
如果你看到了期望的即将输出，则说明你已经成功解决了问题。
总结
在使用 Babel 编译 ES6 时，如果你遇到了 SyntaxError: Unexpected token 的错误，那么有两种解决方案：使用插件转换 ES6 语法或升级到最新版本的 Babel。通过以上方法，你可以成功解决这个常见的问题，并且在你的前端开发中更加愉快。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e4f0e5f6b2d6eab306ba39