配置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中增長一項：

1 {
2     test: /\.jsx?$/,
3     exclude: /node_modules/,
4     loader: 'babel-loader',//在webpack的module部分的loaders裏進行配置便可
5     query: {
6         presets: ['react', 'es2015','stage-1'],
7         plugins: ['transform-runtime']
8     }
9 },

　　這樣，async函數就可使用了。

 

四.babel升級後再也不支持decorator裝飾器寫法。須要安裝

babel-plugin-transform-decorators-legacy

而後再在 webpack.config.js中對js和jsx的配置的query中增長：

plugins: ["transform-decorators-legacy"]