React对static的支持

在使用ES6编写React组件的时候，你会发现es6支持的

static defaultProps = {
        autoPlay: false,
        maxLoops: 10,
};
static propTypes = {
       autoPlay: React.PropTypes.bool.isRequired,
      maxLoops: React.PropTypes.number.isRequired
};

会报错，因为static本是es7中的草案，要想使用static需要做一些配置。

首先，确保安装了babel-preset-react、babel-core、babel-loader、babel-preset-es2015。

如果没有安装，就执行如下语句：

cnpm install --save-dev  babel-core babel-loader babel-preset-es2015 babel-preset-react

然后安装babel-preset-stage-0(es7草案语法)：

cnpm install --save-dev  babel-preset-stage-0

之后配置webpack.config.js

let path = require('path');
let webpack = require('webpack');

module.exports = {
    entry: __dirname+'/src/entry.js',
    output: {
        path: __dirname+'/dist',
        filename: 'bundle.js'
    },
    devtool: 'source-map',
    resolve: {//指定可以被import的文件名后缀
        extensions: ['.js', '.jsx','.sass','.ts']
    },
    module: {
        loaders: [
            {
                test: /\.js?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react','stage-0']
                } //将react编译成js文件
            },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            //打包css文件
            { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
            //编译sass文件
            { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
            //对图片进行打包
        ]
    },
    //4、服务器依赖包配置
    devServer: {//注意：网上很多都有colors属性，但是实际上的webpack2.x已经不支持该属性了
        contentBase: "./dist",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true//实时刷新
    }
}

配置presets包含stage-0，重启项目，发现问题已经解决了。