配置react+webpack+es6中的一些教训

1.要用es6,因为目前浏览器的支持情况，那么肯定需要插件将e6的代码转换成es5，我用的是babel-loader，事实证明使用6.x版本似乎是不行的，我换成5.3.2之后就成功了。

2.webpack.config.js配置文件中，配置loader的时候，我从网上博客中copy的

loader: 'babel-loader!jsx-loader?harmony' 不知道是语法错误还是本身不通，编译时会报错
改成仅用babel-loader 错误解决

 

2017/02/16更新： 

一.最近又重新装了一次webpack2.0，发现webpack2有些地方作了修改 

1.webpack.config.js中loader需要写全名，如：

{
    test: /\.json$/,
    loader: "json-loader"
}

2.不再允许插件自定义属性直接写在外层对象中，如postcss属性，需要将插件自定义属性放在plugins属性内：

plugins:[
        new webpack.LoaderOptionsPlugin({
            options:{
                postcss:autoprefixer
            }
        })
    ]

 

二.另外，安装sass-loader和node-sass的时候遇到了问题

　　新的sass-loader需要4.0.0版本以上的node-sass，但是我使用npm install node-sass 老是报一个"1% is not a valid win32 application"的错误，按照stack overflow上说的

　　npm rm node-sass+npm install node-sass

　　依然不行。改成npm install node-sass@4.0.0还是不行

　　后来通过

　　npm rm node-sass

　　cnpm install node-sass@4.0.0

　　安装成功，不知道什么原因。

 

三.使用async函数的时候，发现babel并不支持对async的转换。有两种方法，第一种是安装体积较大的polyfill。

   我选择了第二种，安装"babel-plugin-transform-runtime"

     npm install babel-plugin-transform-runtime --save-dev

　　然后还需要在webpack.config.js配置，在query中增加一项：

{
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
    query: {
        presets: ['react', 'es2015','stage-1'],
        plugins: ['transform-runtime']
    }
},

　　这样，async函数就可以使用了。

 

四.babel升级后不再支持decorator装饰器写法。需要安装

babel-plugin-transform-decorators-legacy

然后再在 webpack.config.js中对js和jsx的配置的query中增加：

plugins: ["transform-decorators-legacy"]