手把手教你webpack、react和node.js環境配置（下篇）

上篇我介紹了前端下webpack和react、redux等環境的配置，這篇將繼續重點介紹後臺node.js的配置。

這裏是上篇連接：手把手教你webpack、react和node.js環境配置（上篇）

我把全部代碼都放到了個人github上：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')));

而後咱們刪除掉自動生成的路由信息，改成咱們的：

// 刪掉這些
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的語法：

這個時候咱們不只能夠在express裏面使用最新的es語法，還能夠直接用npm start命令來開啓node服務。