在编写 ES6 箭头函数时，很多人会遇到 Babel 编译报错的情况，提示 “Unexpected token =>”。这是因为在旧版的 Babel 中不支持箭头函数语法，需要升级 Babel 或引入新的插件。
本文将详细介绍如何解决这个问题，并为读者提供参考示例代码和学习指导。
什么是箭头函数
在 ES6 中，箭头函数是一种新的函数定义方式。它可以简化函数的语法，使代码更加简洁易懂。
箭头函数的语法形式为：
(param1, param2, …, paramN) => { statements }箭头函数支持单个参数省略括号，无参数时需使用空括号表示：
param => { statements }或者：
() => { statements }当函数体只有一条语句时，可以省略花括号，也可以省略 return：
(param1, param2, …, paramN) => expression
或者：
param => expression
问题分析
旧版的 Babel 不支持 ES6 箭头函数语法，会报错 “Unexpected token => ”。
例如，下面这段代码：
const sum = (a, b) => a + b;
在旧版的 Babel 中编译会出现以下错误信息：
SyntaxError: Unexpected token =>
解决方法
为了解决该问题，我们需要升级 Babel 或者引入新的插件，使之支持箭头函数的语法。
Babel 升级
升级 Babel 是比较简单的方法，只需更新包管理器中的 Babel 即可。
使用 npm 安装最新的 Babel：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
这里使用了三个包来升级 Babel：
- @babel/core：Babel 的核心库。
- @babel/cli：Babel 的命令行工具，可以在终端中使用。
- @babel/preset-env：Babel 的转换规则，可以根据需要自动转换为目标环境所需的语法。
升级完 Babel 后，需要在 .babelrc 文件中加入以下配置：
{
"presets": ["@babel/preset-env"]
}这样，在编译代码时，Babel 就会自动按照目标环境所需的语法进行转换，从而支持箭头函数的语法。
引入插件
如果您不想或不能升级 Babel，那么可以通过引入新的插件来解决这个问题。
需要安装 transform-es2015-arrow-functions 插件：
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
在 .babelrc 文件中加入以下配置：
{
"plugins": ["transform-es2015-arrow-functions"]
}这样，在编译代码时，Babel 就会自动使用 transform-es2015-arrow-functions 插件，支持箭头函数的语法。
示例代码
通过下面这段示例代码，您可以了解在 Babel 核心库升级或者引入插件后，如何编译箭头函数。
-- -------------------- ---- ------- -- --- ------- ----- --- --- ------- ----- -------- ----- --- - --- -- -- - - -- ------------------ --- -- ------- - -- --- --- ------- ----- -- ------ ----- ----- - -------- --- -- - ------ - - -- - -------------------- --- -- ------- -
学习指导
本文介绍了解决 Babel 编译 ES6 箭头函数报错的方法，提供了升级 Babel 和引入插件两种解决方案，并配合示例代码让读者更好地学习和理解。
同时，我们还需要了解 ES6 中的其他新特性以及使用方法，这有助于我们更好地掌握现代前端开发的技术。
建议在学习 ES6 的过程中结合实际开发，不断实践并总结，培养自己的编程能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fbde9cf6b2d6eab31f67a2