stage-0

今天在项目中用到了箭头函数

image.png
然后刷新项目时报错，报错原因是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