今天在项目中用到了箭头函数
然后刷新项目时报错,报错原因是
Unexpected token
image.png
在项目开发过程中使用es6等高级语法,需要用到babel,在webpack配置的module中配置babel-loader。由于babel-preset配置选项较多,我们一般可以在根目录下建立.babelrc文件,专门用来放置babel preset配置。
image.png
image.png
image.png
.babelrc中的配置
-
react
版块用于编译jsx文件 -
es2015
用于预先加载es6语法的模块 -
env
告诉babel只编译批准的内容。
项目中js文件的箭头函数是没有问题的,只在jsx文件中使用箭头函数会编译报错。
解决方案
# ES2015转码规则
$ npm install --save-dev babel-preset-es2015
# react转码规则
$ npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
.babelrc里更改配置
image.png
网友评论