從零開始 – 使用React+Webpack+Nodejs+Express快速構建專案
前言
目前 React 、 Webpack 等技術如火如荼，你是不是還在愁苦如何把這些雜亂的知識統統學習一下，開啟一段新的前端開發之路呢？本文將以一個例子來講解如何使用React 、 Webpack 、 Nodejs 、 Express 這些技術快速構建專案，為後期的深入學習鋪好道路，接下來我們就一起動手體驗一下吧！
1. 安裝及配置環境
1.1 安裝Node.js與NPM
Windows下安裝 Node.js 還是比較方便的，請自行下載並安裝， 安裝包及原始碼下載地址為： https://nodejs.org/en/download/ 。安裝過程基本就一直‘NEXT’就可以。安裝完成後，記得到環境變數裡配置了 Node.js
NPM 是隨同 Node.js 一起安裝的包管理器，新版的 Node.js 已經集成了 npm，所以之前 npm 也一併安裝好了。這裡就不詳細說了，如有問題可自行百度一下。
1.2 建立並初始化專案
首先，進到你的工作目錄裡新建一個專案並開啟
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 。
1.3 建立專案目錄
1.4 安裝Webpack並建立配置檔案webpack.config.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
1.4.2 安裝loader
本專案中目前使用到的有 babel-loader 、 css-loader 、 style-loader 、jsx-loader 。之後如有需要可以再按需安裝其他 loader 。
npm install babel-loader css-loader style-loader jsx-loader --save
1.4.3 建立webpack.config.js
每個專案下都必須配置有一個 webpack.config.js 檔案，通俗的講，它的作用就是告訴 Webpack 要做什麼。進到“React-Nodejs-Learnclientstatic”目錄下新建一個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
1.5 安裝React
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
1.6 安裝Express
Express 是一個簡潔而靈活的 node.js Web應用框架, 提供一系列強大特性幫助你建立各種Web應用。全域性安裝 Express 並將其儲存到依賴列表中：
npm install express --save -g
1.7 安裝模板引擎EJS
EJS 是一款 Node.js 的模板引擎，同樣使用 npm 安裝。
npm install ejs --save -g
2. 寫程式碼
環境搭建好後，就可以開始我們的程式碼作業了。
2.1 編寫主頁index.html
目錄“React-Nodejs-Learnclientview”下的 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>2.2 修改入口檔案app.js
// 引入模組
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
要補充的一點是， node 命令也是隻能執行一次，每次修改檔案都要再重新手動執行一下這個命令，會很麻煩。我們可以通過 npm 安裝一個 nodemon ：
npm install nodemon --save
再執行命令：
nodemon app.js
這樣每次修改程式碼後，無需手動重新啟動 app.js ，它會幫助你自動啟動 app.js。
2.3 用JSON模擬後臺資料
進到“React-Nodejs-Learnserver”目錄下，後端程式碼都寫在該目錄下。新建一個“data”資料夾並開啟，編寫模擬資料程式碼。（D:my-workReact-Nodejs-LearnserverdatagetMessage.js）
var MessageList = [
{ "Message":"Hello React"},
{ "Message":"Hello Webpack"},
{ "Message":"Hello Nodejs"},
{ "Message":"Hello Express"}
];
exports.getMessageList = function (callback) {
callback(MessageList);
};當然我們也可以直接去連資料庫，這一塊兒有機會再分享給大家。
2.4 封裝介面
進到“React-Nodejs-Learnserver”目錄下，新建一個“actiondata”資料夾並開啟，編寫對應的取資料的程式碼。（D:my-workReact-Nodejs-LearnserveractiondatagetMessage.js）
var getMessageList = require('../../data/getMessage');
exports.execute = function (req, res) {
getMessageList.getMessageList(function (data) {
res.send(data);
});
};2.5 定義介面並修改路由配置
修改 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/ ，可以看到資料正確的返回。
2.6 編寫React元件
首先進到目錄“React-Nodejs-Learnclientstaticjsstoremain”下，新建一個 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-Learnclientstaticjsviewmain”，新建 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')
);重新整理一下頁面，元件已經成功讀取資料並渲染到頁面上了，這時候可以繼續編寫樣式程式碼了，在此我們就省略不寫樣式了。
3. 總結
至此，一個專案就快速構建好了，這樣我們就可以繼續後續開發工作了。當然，專案開始時，其實我們可以直接使用 Express 建立專案，例如通過命令 express -t ejs project 建立專案，此時，會自動生成一個 project 資料夾。資料夾裡面面會有 model 、 public 、 routes 和 views 資料夾，還有 app.js 和package.json 兩個檔案。不再需要我們手動建立目錄。
本篇文章只著重講了如何快速構建專案，只是一個demo，其中涉及到的知識還需大家深入學習與探索，一起加油吧！