使用Webpack和Gulp构建ReactJS应用详解编程语言

class Counter extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

count: this.props.initialCount

};

}

handleClick () {

this.setState({count:this.state.count + 1});

},

componentWillMount(){

}

shouldComponentUpdate (nextProps, nextState){

if((nextState.count % 3) === 0){

return true;

}else{

return false;

}

}

componentWillUpdate(){

console.log(this.state.count);

}

componentDidUpdate(){

console.log(this.state.count);

}

componentWillMount(){

},

componentDidMount(){

console.log(this.props);

this.setState({count:this.props.initialCount + 1});

}

render(){

return <div><input onClick={this.handleClick} type=’submit’ value=’add’ /><span>{this.state.count}</span></div>;

}

ReactDOM.render(<Counter initialCount={0} />,document.getElementById(“app-counter”));

申明Counter类，该类继承自 React.Component；

构造函数中调用父类的构造方法；

初始化state；

响应点击事件，更新组件的state。

该方法在组件被服务端渲染的时候和将要被浏览器渲染到页面上时，均会执行一次。

组件的state更新时，react默认会更新UI上对应的字段，该方法在state更新之后执行，如果返回false则不更新UI，React将不再计算DOM的变化，不再刷新页面。

shouldComponentUpdate()返回true之后执行。

React刷新页面之后执行。

组件在服务端渲染时执行，在浏览器挂载之前也执行。

组件在浏览器挂载之后执行，在服务端渲染时不执行。

初始化state之后，React根据render方法将组件挂载到页面上。

渲染组件到 id为app-counter的元素下。

class UserInfo extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

users: [{

    id:1,

    firsrName:’xx’,

    latName:’yy’,

    age:10,

    sex:’male’

    }

}];

}

render(){

    let greeting = ‘Hello ‘;

    let users = this.state.users;

    function getFullName(u){

    return u.firstName+’.’+ u.lastName;

    }

    return (

    <span className=’text-info’>Total:{ users.length}</span>

    <ul>

    users.map((item,index)=>{

    return(

    <li key={index}>

    <span className=’text-info’>{ item.lastName}</span>

    <SexSeletor sex={ item.sex} />

    <span>{if(item.age<18){‘young’}}</span>

    <span>{getFullName(item)}}</span>

    </li>

    );});

    </ul>

    );

}

}

render方法中定义的对象和当前组件的state与props可在标签中使用。{}内使用js 表达式。

将users.map方法返回的element添加到ul中。

 建议为list类的元素增加key属性，该属性可帮React做DOM树的遍历和比较。

 使用className代替html5中的class。Text-info是React-Bootstrap的样式

使用自定义component.

使用js表达式

使用function.

class Parent extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

     userName :’test’

    };

}

onTextChange:function(event){

    this.setState({

userName: event.target.value

})

}

onChildChanged(newName) {

this.setState({

userName : newName

});

}

render(){

    return (<Son userName ={this.state.userName } callbackParent={this.onChildChanged} />);

}

}

定义onTextChanged 方法。Input的change事件发生时，更新parent组件的state，react根据这个state的变化去更新引用该state的子组件。此处实现父组件到子组件的信息传递。

定义onChildChanged 方法。

将onChildChanged方法传递给子组件。

class Son extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

    userName:’test’

    };}

onUserNameChange:function(event){

this.props.callbackParent(event.target.value);

}

render(){

    return (<span>username:<input value={this.props.userName} type=’text’ onChange={this. onUserNameChange } /></span>);

}

}

子组件调用父组件传递的 callbackParent方法。

此处实现子组件向父组件传递信息；

class Component1 extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

    userName:’test’

    };

}

componentDidMount: function () {

this.pubsub_token = PubSub.subscribe(‘message’, function (topic, data) {

this.setState({

userName : data

});

}.bind(this));

},

componentWillUnmount: function () {

PubSub.unsubscribe(this.pubsub_token);

} }

这里定义了message订阅和对应的回调函数。并维护在当前组件

当组件从将要从document卸载时，删除订阅。

class Component2 extends React.Component{

constructor(props, context) {

super(props, context);

this.state = {

    name:’test’

    };

}

onChange: function (event) {

this.setState({name: event.target.value });

PubSub.publish(‘message’, this.state.name);

},

render: function() {

return <input onChange={this. onChange } value= {this.state.name} / >;

}}

数据变化时发布message。

webpack打包配置文件

libs：带插件的Reactjs和外部js库

通过npm安装到当前项目的node modules,包括gulp plugins和功能需要的js库

app:app源代码

client:通过res.sendFile()发送到客户端的资源

server:node服务端代码

babellrc:babel(ES6配置文件)

gulpfile:引入gulp插件并定义task

package:npm安装的js库的信息

Application 文件夹

所有的组件

Root 组件

Cart组件

Cart的每一个项定义成一个组件

用户的联系人组件

用户信息组件

定义一个User Model，其中包含user的方法

定义公用的工具类的方法（一般与具体业务无关）

加载AppRoot组件

App入口

客户端资源

客户端入口，同时也是webpack打包的入口

发送到客户端的页面

申明server，指定服务器端口，资源相对路径；

响应客户端请求

import React from ‘react’;

//在root组件引入各个子模块；

import UserInfo from ‘../user-info/userInfo’;

import Cart from ‘../cart/cart’;

import Contact from ‘../contact/contact’;

import UserModel from ‘../../models/user’;

class AppRoot extends React.Component{

shouldComponentUpdate () {

// 在当前组件的state或props变化时，使用React.addons.PureRenderMixin插件来决定是否重新渲染UI.

return React.addons.PureRenderMixin.shouldComponentUpdate.apply(this, arguments);

}

render(){

let userModel = new UserModel();

return (

//.appRoot在styles.css中定义

<div className=’appRoot’>

//申明各个组件

<UserInfo user={this.props.state.user} />

<Contact user={this.props.state.user} usersPromise={userModel.getUsers()} />

<Cart cart={this.props.state.cart} />

</div>

);

}

}

export default AppRoot;

var path = require(‘path’);

var webpack = require(‘webpack’);

module.exports = {

/*配置externals的模块

1.这一类模块需要单独打包到一个js中，和应用组件的打包文件分开。

2.webpack通过import指令发现以下模块时，会通过window[‘moduleName’]去引用这一类模块。如:window.jQuery,window.React.

3.单独打包外部library到dist目录下，在开发中，只需要打包修改的js或者css到dist供客户端访问即可。尤其是在dev-debug的要求下，这样打包更快，更容易区分开外部library和业务组件。如果发布到生产环境，可以省去externals，以减少客户端加载过程中请求的资源个数，但包含外部library的打包会比较慢。

*/

externals: {

‘react’: ‘window.React’,

‘jquery’:’window.jQuery’

},

entry:{

/*

这里配置了一个打包入口，webpack通过识别import指令，去找到该入口下的所有依赖模块和子模块的依赖模块，将所有模块打包，并且建立引用关系。

如果是一个多页面的应用，此处也可以配置多个入口。

*/

application: path.resolve(__dirname,’../src/client/scripts/client.js’),

//react: path.resolve(__dirname,’../libs/react/dist/react.js’),

//utility: path.resolve(__dirname,’../src/app/utils/appUtilities.js’),

},

output: {

/*

配置打包之后的输出路径。

*/

path: path.resolve(__dirname, ‘../dist’),

/*

使用entry的名称命名输出文件.此处打包预期得到：application.js文件。

*/

filename: ‘[name].js’

},

resolve: {

/*

配置可打包的被import的文件类型。

*/

extensions: [”, ‘.js’, ‘.jsx’]

},

module: {

loaders: [{

/*

配置程序语言解释器模块。

*/

test: //.js$/,

loader: ‘babel-loader’

}, {

test: //.jsx$/,

loader: ‘babel-loader!jsx-loader?harmony’

}]

},

plugins: [

/*

此处配置模块之间的公共文件，将打包到common.js，在dev-debug时，同样可以注释改行配置，一简少打包时间消耗。

*/

new webpack.optimize.CommonsChunkPlugin(‘common’,’common.js’,[‘react’,’ utility’]),

new webpack.optimize.CommonsChunkPlugin(‘vendor’, ‘vendor.js’, Infinity),

/*

配置代码压缩插件

*/

new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

}

})

]

};

{

/*在使用babel的项目根目下，配置该文件*/

“presets”: [

/*需要编译的语言，es2015即es6

需要解释jsx，则增加’react’ 配置项

此处stage-0 包含了对所有es6和最新es(es7)提案中的部分功能的解释

eg. do语句

do {

if(role == ‘admin’) {

<AdminComponent/>;

}else if(role == ‘user’) {

<UserComponent/>;

}else {

<GuestComponent/>; }

}

}*/

“es2015”,

“react”,

“stage-0”

]

}

var gulp = require(‘gulp’),

jshint = require(‘gulp-jshint’),

uglify = require(‘gulp-uglify’),

webpack = require(‘gulp-webpack’),

rename = require(‘gulp-rename’),

del = require(‘del’),

react = require(‘gulp-react’),

babel = require(‘gulp-babel’),

nodemon = require(‘gulp-nodemon’),

minifycss = require(‘gulp-minify-css’),

concat = require(‘gulp-concat’);

var webpackConfig = require(‘./config/webpack.config’);

gulp.task(“webpack”, function() {

return gulp

.src(‘./src’)

.pipe(webpack(webpackConfig))

.pipe(uglify({

compress: true,

preserveComments: ‘none’

}))

.pipe(gulp.dest(‘./dist’));

});

gulp.task(‘clean’, function(cb) {

del([‘dist/*.js’,’dist/*.css’], cb)

});

gulp.task(‘startServer_buildAll’,

[‘bundleLibs’,’minifyCss’,’webpack’],

function () {

nodemon({ script: ‘./src/server/index.js’, ext: ‘js’ })

.on(‘start’,function(){

console.log(‘starting server…’);

})

.on(‘restart’, function () {

console.log(‘restarted!’);

});

});

gulp.task(‘startServer_buildOnlyComponent’,

[‘webpack’],

function () {

nodemon({ script: ‘./src/server/index.js’, ext: ‘js’ })

.on(‘start’,function(){

console.log(‘starting server…’);

})

.on(‘restart’, function () {

console.log(‘restarted!’);

});

});

gulp.task(‘startServer_buildOnlyCss’,

[‘minifyCss’],

function () {

nodemon({ script: ‘./src/server/index.js’, ext: ‘js’ })

.on(‘start’,function(){

console.log(‘starting server…’);

})

.on(‘restart’, function () {

console.log(‘restarted!’);

});

});

gulp.task(‘minifyCss’,

function() {

return gulp.src([‘./src/client/styles/*.css’,

‘./src/client/styles/external/*.css’])

.pipe(minifycss())

.pipe(concat(‘styles.css’))

.pipe(minifycss())

.pipe(rename({suffix: ‘.min’}))

.pipe(gulp.dest(‘./dist’));

});

gulp.task(‘bundleLibs’,

function(){

return gulp.src([‘./libs/react-with-addons.min.js’,

‘./libs/jquery.min.js’])

.pipe(concat(‘libs.js’))

.pipe(rename({suffix: ‘.min’}))

.pipe(gulp.dest(‘./dist’));

});

引入webpack.config,

定义webpack task.

打包文件发布到dist文件夹

清除dist下的打包文件的task

在完成外部library的打包，css打包，webpack 任务之后，启动server.

在dev-debug时，如果只有component文件发生改变，可以不清除dist文件夹，在启动server前只启动webpack任务

原理同上，启动服务之前，只打包变动了的css，节省测试等待时间。

打包所有css文件到./dist/styles.min.css

打包js库，在开发环境，可以只执行一次，不需要每次build应用都打包

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>My React App</title>

<link href=”styles/styles.min.css” rel=”stylesheet” />

</head>

<body>

<div id=”app”></div>

<script src=”libs.min.js”></script>

<script src=”vendor.js”></script>

<script src=”common.js”></script>

<script src=”application.js”></script>

</body>

</html>

在发送到服务端的页面中链如打包css

链入打包js

require(‘babel-register’);

module.exports = require(‘./server’);

我们将通过node server 将index.html发送到客户端

Note. nodejs服务端对es6的支持度比客户端（浏览器）好很多，只需要在程序入口模块中引入’babel-register’ ，就可以在其子程序中使用ES6

import Express from “express”;

import path from ‘path’;

let app = Express();

let server;

const PATH_STYLES = path.resolve(__dirname, ‘../../dist’);

const PATH_DIST = path.resolve(__dirname, ‘../../dist’);

app.use(‘/styles’, Express.static(PATH_STYLES));

app.use(Express.static(PATH_DIST));

app.get(‘/’, (req, res) => {

res.sendFile(path.resolve(__dirname, ‘../client/index.html’));

});

server = app.listen(process.env.PORT || 3001, () => {

let port = server.address().port;

console.log(‘Server is listening at %s’, port);

});

申明一个express app

服务端css路径

Js资源路径

相应客户端请求，发送index.html到浏览器

定义端口，服务端访问的url为：http://127.0.0.1:3001/

UserInfo组件Contact 组件

异步从另外一台服务器上读取的contact json.

http://myapps.eastus.cloudapp.azure.com:8899/users/findAll

Cart 组件

每一行为一个CartItem组件的实例