webpack搭建react项目，箭头函数报错：Unexpected token

最新推荐文章于 2026-06-20 15:32:45 发布

原创最新推荐文章于 2026-06-20 15:32:45 发布 · 2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #react

React 同时被 2 个专栏收录

27 篇文章

订阅专栏

webpack

12 篇文章

订阅专栏

在webpack搭建的react项目中遇到箭头函数`Unexpected token`错误。解决方法包括安装`babel-preset-stage-0`，更新`.babelrc`文件，配置`presets`为`["es2015", "react", "stage-0"]`，确保ES6和ES7特性得到正确编译。" 132053433,7337247,LightFM：Yelp 开源推荐系统框架解析与实践,"['推荐系统', '深度学习', '矩阵分解', '数据处理', '模型优化']

webpack搭建react项目，箭头函数报错：Unexpected token

今天在webpack搭建的react项目中，写了一个小demo，想要使用箭头函数，但是运行报错，解决方法如下：

报错

解决办法

我的 .babelrc 文件内容

{
  "presets": ["react", "es2015"],
  "plugins": [["import", { "libraryName": "antd-mobile" ,"style": true}]]
}

1.首先，使用npm安装：npm install --save-dev babel-preset-stage-0
2.修改.babelrc文件内容：

{
  "presets": ["react", "es2015","stage-0"],
  "plugins": [["import", { "libraryName": "antd-mobile" ,"style": true}]]
}

3.使用npm run dev命令运行项目，成功运行。

stage-0

由于各大浏览器并对es6的并没有完成支持，我们开发前端项目时需要使用Babel来将ES6代码编译为ES5。配置.babelrc文件时一般配置为如下：
{“presets”:[“es2015”，“react”,“stage-0”],“plugins”:[]}

这个配置文件的意思。首先，这个配置文件是针对babel 6的。babel 6做了一系列模块化，不像Babel 5一样把所有的内容都加载。
（1）如果需要编译es6，我们需要设置presets包含es2015，也就是预先加载es6编译的模块。
（2）如果需要编译jsx，我们需要设置presets包含react，也就是预先加载react编译的模块。
（3）如果需要编译es7，我们需要设置presets包含stage-0，也就是预先加载es7编译的模块。

具体内容可参考文档：https://www.jianshu.com/p/f6489ef9ef43，特此感谢！！！