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