ReactJS webpack實現JS模塊化使用的坑

從一個原生HTML/CSS/JS模式的網頁改造到ReactJS模塊化的結構，須要如下步驟：

（1）引用ReactJS框架 ->（2）使用webpack 工具 -> （3）配置webpack使之識別各類語法：JAX,HTML,CSS等

 

如下是一些坑：

1.ReactJS框架並不能實現JS的模塊化

純ReactJS其實和JqueryTemplate差很少，能夠把HTML寫成一個模板，而後以插入到某個DIV裏的方式來實現HTML的模板化。

可是單純靠ReactJS這個框架，其實這並無實現JS的模塊化，只是實現了HTML的模板化。

JS的模塊化，經過import、require的方式導入其餘JS模塊，須要依靠「build」。

 

webpack就是實現JS模塊化的比較流行的方式。

 

2.webpack打包時不識別JAX語法

webpack在build工程的時候，若是不用loader，只能識別原生JS，並不能識別JSX語法，一樣HTML和CSS也不能識別。

因此須要一份webpack的配置文件，並使用npm安裝相應的語法加載器，即loader。

好比下面這份webpack配置文件，就實現了JS的編譯，CSS的編譯，HTML的拷貝。

 

3.webpack打包時不識別ES6語法，如import等

安裝babel-loader對es2015的識別，即 babel-preset-es2015

而後在webpack的config文件中配置：

{
      test: /\.js$/, 
      loader: 'babel-loader',
      exclude: /node_modules/,
      query: {
          presets: ['react','es2015']
      }
    },

 

 

4.react和react-dom

又被舊教程坑，之前只有react框架，因此都是React.render，後來分離出了ReactDom專門用來操做JSXDOM內容。

因此如今最新的都是ReactDom.render，可是ReactDom裏又有用到React的API，因此若是使用到ReactDom，必須先import React，不然會報錯 react undefined.

 

5.production模式

webpack沒有設置成production模式下，直接使用，會冒出一大堆警告來。

須要在webpack裏配置build process的環境變量爲生產模式。

new webpack.DefinePlugin({
      'process.env':{
        'NODE_ENV': JSON.stringify('production')
      }
    }),

 

6.warning

能夠經過下面的語句消除好幾個終端窗口的warning

new webpack.optimize.UglifyJsPlugin({
      compress:{
        warnings: false
      }
    })

　　

 一份完整的配置文件：

demo:https://github.com/rayshen/reactjs-webpack-demo

 

參考連接：

http://www.tuicool.com/articles/fQB3IjE

http://www.cnblogs.com/Leo_wl/p/4862714.html