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
参考链接:
___________________________________________________
专注iOS/前端开发,广泛涉猎多种平台和技术,欢迎交流
可以在微博关注并@沈z伟