首页 > 代码库 > ReactJS webpack实现JS模块化使用的坑
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.react和react-dom
又被旧教程坑，以前只有react框架，所以都是React.render，后来分离出了ReactDom专门用来操作JSXDOM内容。
所以现在最新的都是ReactDom.render，但是ReactDom里又有用到React的API，所以如果使用到ReactDom，必须先import React，否则会报错 react undefined.
4.production模式
webpack没有设置成production模式下，直接使用，会冒出一大堆警告来。
需要在webpack里配置build process的环境变量为生产模式。
new webpack.DefinePlugin({ ‘process.env‘:{ ‘NODE_ENV‘: JSON.stringify(‘production‘) } }),
5.warning
可以通过下面的语句消除好几个终端窗口的warning
new webpack.optimize.UglifyJsPlugin({ compress:{ warnings: false } })
demo:https://github.com/rayshen/reactjs-webpack-demo
完整的webpack配置文件：
var webpack = require(‘webpack‘);var path = require(‘path‘);var ExtractTextPlugin = require(‘extract-text-webpack-plugin‘);var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);var config = { entry: path.resolve(__dirname, ‘./src/js/main.js‘), output: { path: path.resolve(__dirname, ‘./build‘), filename: ‘./js/[name].js‘ }, module: { noParse: [], loaders: [ { test: /\.js$/, loader: ‘babel-loader‘, exclude: /node_modules/, query: { presets:[‘react‘] } }, { test: /\.jsx?$/, loader: ‘babel-loader‘, exclude: /node_modules/, query: { presets:[‘react‘] } }, { test: /\.(css)$/, loader: ExtractTextPlugin.extract(‘style-loader‘,‘css-loader‘) }, ] }, plugins:[ new HtmlWebpackPlugin({ template: __dirname + "/src/index.html" }), new ExtractTextPlugin("./css/[name].css"), new webpack.DefinePlugin({ ‘process.env‘:{ ‘NODE_ENV‘: JSON.stringify(‘production‘) } }), new webpack.optimize.UglifyJsPlugin({ compress:{ warnings: false } }) ]};module.exports = config;
参考链接：
http://www.tuicool.com/articles/fQB3IjE
http://www.cnblogs.com/Leo_wl/p/4862714.html
ReactJS webpack实现JS模块化使用的坑