React 在jsx文件中使用箭头函数报错

项目环境配置

npm(v5.5+)，node(v8.9.3)，webpack(v3.10.0)

问题描述

使用webpack打包编译react项目，默认安装配置了babel-loader, babel-core, babel-preset-env等babel核心库。但在jsx文件中使用extends Component方式创建的react组件里编写静态方法时使用箭头函数报错。

错误格式如下：

ERROR in ./app/components/modules/exampleComp.jsx

Module build failed: SyntaxError: 文件路径: Unexpected token (16:10)

问题分析

我们知道要在项目开发过程中使用es6等高级语法，需要用到babel。对于webpack来说，可在loader里面配置babel-loader。由于babel-preset配置选项较多，我们一般可以在根目录下建立.babelrc文件，专门用来放置babel preset配置，它是一个json文件。形如：

//.bablerc文件
{
    "presets": [
      "react", "es2015", 
        ['env',{
            "targets": {
                "browsers": ['> 1%', 'last 2 versions']
            }
        }]
    ]
}

//原webpack.config.js文件
module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'babel-loader'
            },
            exclude: '/node_modules/'
        }
    ]
}

简要来看，‘react’版块用于编译jsx文件，'es2015'用于预先加载es6语法的模块，'env'告诉babel只编译批准的内容。

项目中js文件的箭头函数是没有问题的，只在jsx文件中使用箭头函数会编译报错。

问题解决

基于上述分析，猜想还缺少编译jsx中es6语法的版块。参见阮老师的babel教程，选取内容如下：

# 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

安装ES7的转码规则npm install -D babel-preset-stage-0,并在.babelrc里更改配置：

//省略其他代码
"presets": ["react", "es2015", "env","stage-1"],

重新编译打包文件，问题解决。
以上。