从零开始 - 使用React+Webpack+Nodejs+Express快速构建项目
目前React、Webpack等技术如火如荼，你是不是还在愁苦如何把这些杂乱的知识统统学习一下，开启一段新的前端开发之路呢？本文将以一个例子来讲解如何使用React、Webpack、Nodejs、Express这些技术快速构建项目，为后期的深入学习铺好道路，接下来我们就一起动手体验一下吧！
Windows下安装Node.js还是比较方便的，请自行下载并安装， 安装包及源码下载地址为：https://nodejs.org/en/download/。安装过程基本就一直‘NEXT’就可以。安装完成后，记得到环境变量里配置了Node.js，变量值就是你的安装路径，例如“ C:\Program Files\nodejs ”。
NPM是随同Node.js一起安装的包管理器，新版的Node.js已经集成了npm，所以之前npm也一并安装好了。这里就不详细说了，如有问题可自行百度一下。
首先，进到你的工作目录里新建一个项目并打开
D:\my-work>mkdir React-Nodejs-learn && cd React-Nodejs-learn
通过npm init命令为你的项目创建一个package.json文件。
D:\my-work\React-Nodejs-learn>npm init
该命令会要求你输入一些参数，包括应用名、版本等，可以直接按回车设置为默认值。需要注意的是，其中有一项为entry point:，它的值为项目的入口文件，你可以设置成你想要的名称，例如app.js或者index.js等，在这儿我就默认选择了app.js。
Webpack是当下较热门的前端资源模块化管理和打包工具，它不仅可以将松散的模块按照规则打包成前端资源，还可以实现模块的按需加载。任何形式的资源都可以被视为模块，如 CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、SASS等。对应各种不同文件类型的资源，Webpack有对应的模块loader。
####1.4.1 安装Webpack####
使用npm安装依赖模块时，可以选择全局安装（通过-g参数），也可以选择只在项目中安装。同时，如果还指定了--save参数，那么被安装的模块还将被添加到package.json文件中的dependencies依赖列表中。这样，通过npm install命令即可自动安装依赖列表中所列出的所有模块。执行以下命令安装Webpack。
npm install webpack --save -g
本项目中目前使用到的有babel-loader、css-loader、style-loader、jsx-loader。之后如有需要可以再按需安装其他loader。
npm install babel-loader css-loader style-loader jsx-loader --save
每个项目下都必须配置有一个webpack.config.js文件，通俗的讲，它的作用就是告诉Webpack要做什么。进到“React-Nodejs-Learn\client\static”目录下新建一个webpack.config.js配置文件，可以参考如下内容：
var webpack = require('webpack');
module.exports = {
// 页面入口文件配置
entry : {
'view/main/index': './js/view/main/index.js'
},
// 入口文件输出配置
output : {
path : __dirname + '/output/js/',
filename : '[name].bundle.js'
},
module: {
// 加载器配置
loaders: [
{
test: /\.js$/,
loader: 'babel-loader!jsx-loader?harmony'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
]
},
// 其他解决方案配置
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.json'],
},
// 插件项
plugins : [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
写完配置文件，就可以通过在控制台执行命令打包了。打开控制台并进入到webpack.config.js文件所在目录下，执行webpack命令：
webpack
执行这个命令时会自动读取webpack.config.js文件，按照配置进行打包。命令执行成功后，控制台会显示打包结果，如下图：
这里需要注意的是，如果执行webpack命令不带参数的话，每次修改文件都要重新手动执行一下这个命令，会很麻烦，由此，我们可以在该命令后加一个- watch参数，这样我们每次改完文件都会自动编译，无需再手动执行一次了。
webpack --watch
React可以直接下载使用，可以到官网 http://facebook.github.io/react/ 下载最新版，然后在主页html中引入 react.min.js（React的核心库） 、react-dom.min.js（提供与DOM相关的功能）和 browser.min.js（用于将 JSX 语法转为 JavaScript 语法）这三个库就可以。
当然也可以通过npm安装React，执行以下命令来完成安装。
npm install react --save
npm install react-dom --save
同时，也需要安装一些babel插件：
npm install babel-core --save
npm install babel-preset-react --save
npm install babel-preset-es2015 --save
Express是一个简洁而灵活的node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用。全局安装Express并将其保存到依赖列表中：
npm install express --save -g
EJS是一款Node.js的模板引擎，同样使用npm安装。
npm install ejs --save -g
环境搭建好后，就可以开始我们的代码作业了。
目录“React-Nodejs-Learn\client\view”下的index.html是我们项目的首页面。在index.html中引入css文件和webpack打包后的js文件。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>React-Nodejs-Learn</title>
<link rel="stylesheet" href="../client/static/css/style.css" type="text/css"/>
</head>
<body>
<div id="main-container"></div>
<script src="../client/static/output/js/view/main/index.bundle.js"></script>
</body>
</html>
// 引入模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
// 对所有(/)URL或路由返回index.html
app.get('/', function (req, res) {
res.render('index');
});
// 设置views路径和模板
app.set('views', './client/view');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
// 静态文件配置
app.use('/client/static', express.static(path.join(__dirname, 'client/static')));
// 启动一个服务，监听从8888端口进入的所有连接请求
var server = app.listen(8888, function(){
var host = server.address().address;
var port = server.address().port;
console.log('Listening at http://%s:%s', host, port);
});
通过如下命令启动app.js：
node app.js
然后在浏览器中打开 http://localhost:8888/ 并查看输出结果，结果如下图所示。
要补充的一点是，node命令也是只能执行一次，每次修改文件都要再重新手动执行一下这个命令，会很麻烦。我们可以通过npm安装一个nodemon：
npm install nodemon --save
再运行命令：
nodemon app.js
这样每次修改代码后，无需手动重新启动app.js，它会帮助你自动启动app.js。
进到“React-Nodejs-Learn\server”目录下，后端代码都写在该目录下。新建一个“data”文件夹并打开，编写模拟数据代码。（D:\my-work\React-Nodejs-Learn\server\data\getMessage.js）
var MessageList = [
{ "Message":"Hello React"},
{ "Message":"Hello Webpack"},
{ "Message":"Hello Nodejs"},
{ "Message":"Hello Express"}
];
exports.getMessageList = function (callback) {
callback(MessageList);
};
当然我们也可以直接去连数据库，这一块儿有机会再分享给大家。
进到“React-Nodejs-Learn\server”目录下，新建一个“action\data”文件夹并打开，编写对应的取数据的代码。（D:\my-work\React-Nodejs-Learn\server\action\data\getMessage.js）
var getMessageList = require('../../data/getMessage');
exports.execute = function (req, res) {
getMessageList.getMessageList(function (data) {
res.send(data);
});
};
修改app.js
// 引入模块
var express = require('express');
var path = require('path');
var ejs = require('ejs');
var app = express();
// 新增接口路由
app.get('/data/:module', function (req, res, next) {
var c_path = req.params.module;
var Action = require('./server/action/data/' + c_path);
Action.execute(req, res);
});
// 对所有(/)URL或路由返回index.html
app.get('/', function (req, res) {
res.render('index');
});
// 设置views路径和模板
app.set('views', './client/view');
app.set('view engine', 'html');
app.engine('html', ejs.renderFile);
// app.use配置
app.use('/client/static', express.static(path.join(__dirname, 'client/static')));
// 启动一个服务，监听从8888端口进入的所有连接请求
var server = app.listen(8888, function(){
var host = server.address().address;
var port = server.address().port;
console.log('Listening at http://%s:%s', host, port);
});
接口定义好了后，在浏览器里访问一下： http://localhost:8888/data/getMessage/，可以看到数据正确的返回。
首先进到目录“React-Nodejs-Learn\client\static\js\store\main”下，新建一个index.js文件。该文件用于组件与后端数据的交互。
var EventEmitter = require('events').EventEmitter;
class Store_MessageList extends EventEmitter {
constructor() {
this.allData = null;
}
getAllData(callback) {
var self = this;
fetch(
"/data/getMessage/"
)
.then(function(res) {
if (res.ok) {
res.json().then(function(data) {
self.allData = data;
callback(self.allData);
});
} else {
console.log("Looks like the response wasn't perfect, got status", res.status);
}
}, function(e) {
console.log("Fetch failed!", e);
});
}
}
module.exports = new Store_MessageList();
然后进到目录“React-Nodejs-Learn\client\static\js\view\main”，新建index.js。编写视图组件并渲染到页面上。
var React = require('react');
var ReactDOM = require('react-dom');
var store = require('../../store/main');
class MessageList extends React.Component {
constructor(props) {
super(props);
this.state = {
messageList: []
};
this.getData();
}
render() {
var self = this;
var messages = this.state.messageList;
var arr = [];
messages
.forEach(function(em) {
arr.push(<li key={em}> {em} </li>);
});
return <section className="pageContentInner">
<div className="head-section"><h1>MessageList: </h1></div>
<ul>
{arr}
</ul>
</section>;
}
getData() {
var self = this;
store
.getAllData(function (data) {
var i = 0;
var len = data.length;
var messageListArr = [];
for(; i<len; i++) {
messageListArr[i] = data[i].Message;
}
self.setState({messageList: messageListArr});
console.log(self.state.messageList);
})
}
}
ReactDOM.render(
<MessageList />,
document.getElementById('main-container')
);
刷新一下页面，组件已经成功读取数据并渲染到页面上了，这时候可以继续编写样式代码了，在此我们就省略不写样式了。
至此，一个项目就快速构建好了，这样我们就可以继续后续开发工作了。当然，项目开始时，其实我们可以直接使用Express创建项目，例如通过命令express -t ejs project创建项目，此时，会自动生成一个project文件夹。文件夹里面面会有model、public、routes和views文件夹，还有app.js和package.json两个文件。不再需要我们手动创建目录。
本篇文章只着重讲了如何快速构建项目，只是一个demo，其中涉及到的知识还需大家深入学习与探索，一起加油吧！