在前端开发中，JavaScript 是必不可少的一部分，而 ES6（ECMAScript 2015）则是 JavaScript 语言的一个重要更新。ES6 提供了更多的语法结构，方便了开发者的编程，但是在浏览器对 ES6 的支持还不完善的情况下，需要使用 Babel 将 ES6 代码转换为浏览器可识别的 ES5 代码。然而，我们在使用 Babel 进行编译时，常常会遇到各种各样的问题，其中 ES6 语法异常是最常见的一个问题。在本文中，我们将为大家介绍这个问题以及解决方案。
问题：Babel 编译 ES6 语法异常
如果你在项目中使用了 Babel 进行编译，并且你的代码中包含 ES6 的语法结构，那么你很有可能会遇到这个问题。例如，下面的代码就包含了一些 ES6 的语法结构：
const arr = [1, 2, 3]; const arr2 = arr.map(item => item * 2);
当你使用 Babel 将上面的代码编译成 ES5 的代码时，你会看到一个异常：
ERROR in ./app.js Module build failed: SyntaxError: Unexpected token (line 2)
这个异常告诉我们，在编译过程中，Babel 发现了一个不合法的语法结构，这个结构是“箭头函数”，这个结构不是 ES5 所支持的，因此导致了编译失败。
解决方案：使用 Babel 插件进行扩展
要解决这个问题，我们可以使用 Babel 提供的插件进行扩展。Babel 提供了很多的插件，包括支持 ES7、ES8 等新的版本，也包括支持 JSX、Flow 等特殊语言的插件。对于我们要解决的问题，可以使用 babel-plugin-transform-es2015-arrow-functions 这个插件进行扩展。
安装 Babel 插件
首先，我们需要安装 babel-plugin-transform-es2015-arrow-functions 这个插件。可以使用 npm 命令进行安装：
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
配置 .babelrc 文件
接下来，我们需要在项目的根目录下创建一个 .babelrc 文件，并配置插件。下面是一个 .babelrc 文件的示例：
{
"presets": [
"env"
],
"plugins": [
"transform-es2015-arrow-functions"
]
}在这个文件中，我们配置了一个 presets，它指定了使用最新的转换规则，并且我们配置了一个 plugins，它指定了使用 babel-plugin-transform-es2015-arrow-functions 插件进行扩展。
重新编译项目
配置完成后，我们需要重新编译项目，这时候，Babel 就会自动使用我们配置的插件进行扩展，从而支持箭头函数等 ES6 语法结构。
示例代码
下面是一个包含箭头函数的 ES6 代码，它可以使用 Babel 进行编译，从而支持 ES5：
const arr = [1, 2, 3]; const arr2 = arr.map(item => item * 2);
总结
在使用 Babel 进行编译时，遇到 ES6 语法异常是比较常见的问题。解决这个问题的方法是，使用 Babel 提供的插件进行扩展。这个过程分为两个步骤，首先安装插件，然后在 .babelrc 文件中配置插件，并重新编译项目即可。通过这个方法，我们可以在项目中使用 ES6 的语法结构，从而方便开发人员进行编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648a6cc148841e989488f15f