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， 特此感谢！！！

最后

以上就是愉快保温杯为你收集整理的webpack搭建react项目，箭头函数报错：Unexpected tokenwebpack搭建react项目，箭头函数报错：Unexpected token的全部内容，希望文章能够帮你解决webpack搭建react项目，箭头函数报错：Unexpected tokenwebpack搭建react项目，箭头函数报错：Unexpected token所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。