问题描述
在使用 Babel 编译 ES6 代码时，有时会出现 SyntaxError: Unexpected token 的错误。这个错误通常出现在使用一些 ES6 特性时，比如箭头函数、模板字符串、解构赋值等等。例如，下面的 ES6 代码：
const add = (a, b) => {
return a + b;
}
console.log(`The sum is ${add(1, 2)}`);使用 Babel 编译后，会出现下面的错误：
SyntaxError: Unexpected token
这个错误提示并不是很具体，无法直接看出哪里出了问题，需要进一步调查。
解决方案
安装插件
Babel 本身只支持解析 ES6 语法，但不具备转换 ES6 语法的能力。因此，需要安装相应的 Babel 插件才能让 Babel 能够正确地转换 ES6 代码。常用的插件包括：
babel-preset-env：转换所有最新版本的 ECMAScript 语法，包括 ES6/ES2015，ES2016，ES2017 等。babel-preset-react：转换 JSX 语法，通常配合babel-preset-env使用。
这里以 babel-preset-env 为例进行说明。首先，需要在项目中安装 babel-preset-env：
npm install --save-dev babel-preset-env
安装完成后，在 .babelrc 文件中添加以下配置：
{
"presets": [
"env"
]
}添加 Polyfill
有些特性无法通过转换实现，比如全局对象 Promise、Map、Set 等。为了支持这些特性，需要添加相应的 Polyfill。常用的 Polyfill 包括：
@babel/polyfill：包含所有 ES6 新特性及新增的内置函数（如Promise、Set、Map等）的 Polyfill。core-js：与@babel/polyfill类似，但具有更细粒度的控制，可以按需引入需要的 polyfill。
这里以 core-js 为例进行说明。首先，需要在项目中安装 core-js：
npm install --save core-js
安装完成后，在代码中添加以下行：
import 'core-js/stable'; import 'regenerator-runtime/runtime';
这将会添加所有的 Polyfill，为了性能考虑，可以只添加需要的 Polyfill。例如：
import 'core-js/es6/promise'; import 'core-js/es6/set'; import 'core-js/es6/map';
这样可以添加 Promise、Set、Map 的 Polyfill。
配置 Babel
Babel 可以通过配置文件 .babelrc 来指定编译的参数，常用的参数包括：
presets：转换的预设，常用的是env和react。plugins：转换的插件，例如transform-class-properties可以将类属性转换为对象的属性。ignore：忽略特定的文件和文件夹。include：需要转换的文件和文件夹。exclude：不需要转换的文件和文件夹。sourceMaps：是否生成 sourceMap，默认值为false。
例如，下面是一个使用了 env 和 transform-class-properties 的 .babelrc 文件：
{
"presets": [
"env"
],
"plugins": [
"transform-class-properties"
]
}示例代码
下面是一个完整的示例代码，使用了箭头函数、模板字符串和解构赋值，并添加了相应的 Polyfill 和 Babel 配置。
-- -------------------- ---- ------- ------ ---------------------- ------ ------------------ ------ ------------------ ----- --- - --- -- -- - ------ - - -- - ---------------- --- -- -------- ------ ----- --- - - -- -- -- - -- ----- - -- - - - ---- -------------------- ---------
.babelrc 文件：
-- -------------------- ---- -------
-
---------- -
------- -
---------- -
----------- -
----- - ----------
------- -- --
-
--
-------------- ----
--
--
---------- -
----------------------------
-
-总结
Babel 是一个非常强大的工具，可以让我们使用最新的 ECMAScript 语法，同时又能在老版本浏览器中运行。但是，使用 Babel 也会带来一些问题，比如无法正确转换某些语法、无法正确识别某些特性。在解决这些问题时，需要仔细排查，同时注意与其他相关工具的兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f5afd0f6b2d6eab3e83dae