教你webpack、react和node.js環境配置（下篇）
上篇我介紹了前端下webpack和react、redux等環境的配置，這篇將繼續重點介紹後臺node.js的配置。
我把所有程式碼都放到了我的github上： ofollow,noindex">webpack-react-express環境配置
server
後臺這邊的配置就簡單了很多，我這裡拿node.js的express框架來配置。
express
Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架，它提供一系列強大的特性，幫助你建立各種 Web 和移動裝置應用。
安裝express
npm install express --save
在這裡我推薦一個express應用生成器，會幫你自動生成express專案的目錄。
npm install express-generator -g
所以在這裡我們將此前建立好的server資料夾刪除，然後用express自動生成。
rm -rf server && express server
我們先刪除自動生成的不需要的目錄。
rm -rf views && public
這時候會發現server目錄下面也有一個package.json檔案，這個檔案儲存著express需要的依賴，我們可以把裡面的內容合併到外面的package.json裡面然後再刪除，然後不要忘了用npm install來重新安裝一遍裡面的模組。
我們開啟app.js檔案，發現裡面已經已經寫好了程式碼，但是這些程式碼並不是完全符合我們需求，比如我們不想使用jade或ejs模板引擎，我們想用前後端分離的開發方式，只想render一個html，我們需要修改一下程式碼。
因為要用到ejs的一個功能，所以先安裝ejs。
// 自動生成的程式碼
app.set('views', path.join(__dirname, 'views')); // 設定模板的路徑
app.set('view engine', 'jade');
app.use(express.static(path.join(__dirname, 'public')));
// 我們修改後的
app.set('views', path.join(__dirname, '../client/dist'));
app.set('view engine', 'html'); // 將模板設定為html
app.engine('html', ejs.renderFile);
app.use(express.static(path.join(__dirname, '../client/dist')));
歡迎加入全棧開發交流圈一起學習交流：582735936
面向1-3年前端人員
幫助突破技術瓶頸，提升思維能力
然後我們刪除掉自動生成的路由資訊，改為我們的：
// 刪掉這些
var index = require('./routes/index');
var users = require('./routes/users');
app.use('/', index);
app.use('/users', users);
// 然後新增
var port = 4000；
app.all("*", function(req, res) {
res.render("index");
})
app.listen(port, function() {
console.log("server is running on port 4000");
});
這時候，我們只需要在命令列裡面輸入node app.js就可以跑了。
但是這樣還沒完，我們每次執行node是不是都要到server目錄下面？我用的不是node新版本，但是我想用es6的語法怎麼辦？
在express裡面使用es2015
還記得上篇我們單獨提取出來一個.babelrc檔案嗎？這個裡面已經設定了轉碼規則，babel-cli自帶了一個babel-node命令，它讓在node環境裡面執行es6的語法成為可能。
開始前我先安利一下nodemon，它可以讓node自動重啟，而不需要我們每次手動重啟node。
npm install nodemon -g
它的用法和node一樣，我們可以直接nodemon app.js來開啟node服務，當你修改node程式碼時，它會自動重啟node。
我們需要修改一下package.json檔案，在scripts屬性裡面新增一個start屬性，並新增以下程式碼：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon ./server/app.js --exec babel-node"
},
把程式碼修改為es6的語法：
image
這個時候我們不僅可以在express裡面使用最新的es語法，還可以直接用npm start命令來開啟node服務。
image
image