关于React前端构建的一般过程 - 理论篇

　　

概要

本文以个人阅读实践经验归纳前端架构构建过程，以Step by Step方式说明创建一个前端项目的过程。并会对每个阶段所使用的技术进行可替代分析，如Express替换Hapi或者Koa的优缺点分析。本文仅供参考。

流程

1. Package.json

首先，我们需要创建package.json文件。对设计初期已知的引用包和依赖包进行管理，使用ES6的，需要设置babel。其次编写脚本命令。一般文件形式如下：

{
"name": "practice",
"description": "Ryan Project",
"version": "1.0.0",
"main": "server.js",
"scripts": {
"start": "node server.js",
"watch": "nodemon server.js"
},
"babel": {
"presets": [
"es2015",
"react"
]
},
"dependencies": {
"alt": "^0.17.8",
"async": "^1.5.0",
"body-parser": "^1.14.1",
"colors": "^1.1.2",
"compression": "^1.6.0",
"express": "^4.13.3",
"history": "^1.13.0",
"mongoose": "^4.2.5",
"morgan": "^1.6.1",
"react": "latest",
"react-dom": "latest",
"react-highcharts": "^10.0.0",
"react-router": "^1.0.0",
"request": "^2.65.0",
"serve-favicon": "^2.3.0",
"socket.io": "^1.3.7",
"swig": "^1.4.2",
"underscore": "^1.8.3",
"xml2js": "^0.4.15"
},
"devDependencies": {
"babel-core": "^6.1.19",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"babel-register": "^6.3.13",
"babelify": "^7.2.0",
"bower": "^1.6.5",
"browserify": "^12.0.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-concat": "^2.6.0",
"gulp-cssmin": "^0.1.7",
"gulp-if": "^2.0.0",
"gulp-less": "^3.0.3",
"gulp-plumber": "^1.0.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.4.2",
"gulp-util": "^3.0.7",
"optimize-js": "^1.0.0",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0"
},
"license": "MIT"
}

输入完成后，运行npm install，将package.json中的包安装到项目目录中，存放于对应node_modules文件夹

2. Server.js

即服务端，可以使用Express、Koa、Hapi等方式去创建服务端，设置服务端口。也可以设置socket相关的工作。

Express创建服务端

var express = require('express');
var app = express();

//创建路由
app.get('/', function(req, res) {
　　res.send('Hello world');
});
//创建REST API
var router = express.Router();
router.route('/items/:id')
.get(function(req, res, next) {
　　res.send('Get id: ' + req.params.id); })
.put(function(req, res, next) {
　　res.send('Put id: ' + req.params.id); })
.delete(function(req, res, next) { 　　
　　res.send('Delete id: ' + req.params.id); });

app.use('/api', router);
var server = app.listen(3000, function() {
　　console.log('Express is listening to http://localhost:3000'); });

Koa创建服务端

var koa = require('koa');
var app = koa();
//创建路由
app.use(function *() {
　　this.body = 'Hello world';
});
//创建REST API
app.use(route.get('/api/items', function*() { this.body = 'Get'; }));
app.use(route.post('/api/items', function*() { this.body = 'Post'; }));
app.use(route.put('/api/items/:id', function*(id) { this.body = 'Put id: ' + id; }));
app.use(route.delete('/api/items/:id', function*(id) { this.body = 'Delete id: ' + id; }));
var server = app.listen(3000, function() {
console.log('Koa is listening to http://localhost:3000'); });

Hapi创建服务端

var Hapi = require('hapi');
var server = new Hapi.Server(3000);
server.route({
　　method: 'GET',
　　path: '/',
　　handler: function(request, reply) {
　　　　reply('Hello world'); } });
server.route([
　　{ method: 'GET', path: '/api/items', handler: function(request, reply) { reply('Get item id'); } },
　　{ method: 'GET', path: '/api/items/{id}', handler: function(request, reply) { reply('Get item id: ' + request.params.id); } },
　　{ method: 'POST', path: '/api/items', handler: function(request, reply) { reply('Post item'); } },
　　{ method: 'PUT', path: '/api/items/{id}', handler: function(request, reply) { reply('Put item id: ' + request.params.id); } },
　　{ method: 'DELETE', path: '/api/items/{id}', handler: function(request, reply) { reply('Delete item id: ' + request.params.id); } },
　　{ method: 'GET', path: '/', handler: function(request, reply) { reply('Hello world'); } } ]);
server.start(function() {
console.log('Hapi is listening to http://localhost:3000'); });

三者间优缺点比较

	优点	缺点
Express	庞大的社区，相对成熟。极易方便创建服务端，创建路由方面代码复用率高	基于callback机制，不可以组合使用，也不能捕获异常
Koa	相比Express,移除Route和View，中间件的使用移植和编写都比较方便，拥抱ES6， 借助Promise和generator而非callback，能够捕获异常和组合使用	以Express一样，需要routers中间件处理不同的选择
Hapi	基于配置而非代码的框架，对于大型项目的一致性和可重用性比较有用。	为大型项目定制，导致在小项目中，常见的过于形式化的代码。相关的开源资料也比较少

3. 工程化工具

首先，我们需要先设计好我们项目的目录结构，以便使用工程化工作进行压缩打包等操作。

简单举例如下项目的结构

--/public
--/css
--/js
--/fonts
--/img
--/app
--/actions
--/components
--/stores
--/stylesheets
--main.less
--alt.js
--route.js
--main.js

其次，需要webpack或者browserify工具，打包压缩一系列的脚本文件。使用babel转换ES6语法，因为绝大部分的浏览器还不支持ES6，所以需要转换为ES5。最后，创建gulpfile.js文件，使用gulp创建系列的工程指令，如绑定vendor文件、引用sourcemap、使用类似uglify、gulp-cssmin等辅助压缩文件。

如下是简易的gulpfile.js文件的配置

View Code
这里采用的是alt（基于Flux）第三方库，所以还需要添加Actions和Store，以及alt.js文件。这里不一一列举，可以查看上面的源码地址。

Tip: 也可以使用react-redux来构建我们自己的app组件，redux能更好的管理react的state。　

7. 数据库

创建数据库数据，如果你是单页应用，那么建议使用mongoDB。具体实现不再一一描述，可以上网搜索相关内容

8. API

如果是基于mongoose的话，则只需要利用上面的Express、Koa或者Hapi创建API，访问mongoose数据.

如果是大型项目，有自己独立的后端语言，如C#或者Java。则可以基于微服务框架创建服务API。使用axios或者superagent等库访问数据。

参考文献

http://sahatyalkabov.com/create-a-character-voting-app-using-react-nodejs-mongodb-and-socketio/

http://stackoverflow.com/questions/27290354/reactjs-server-side-rendering-vs-client-side-rendering

http://stackoverflow.com/questions/18641899/what-is-the-difference-between-bower-and-npm

https://ifelse.io/2015/08/27/server-side-rendering-with-react-and-react-router/

https://www.airpair.com/node.js/posts/nodejs-framework-comparison-express-koa-hapi