webpack搭建react项目,箭头函数报错:Unexpected token

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)