教你webpack、react和node.js環境配置(下篇)

上篇我介紹了前端下webpack和react、redux等環境的配置,這篇將繼續重點介紹後臺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')));
歡迎加入全棧開發交流圈一起學習交流: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的語法:


教你webpack、react和node.js環境配置(下篇)


image

這個時候我們不僅可以在express裡面使用最新的es語法,還可以直接用npm start命令來開啟node服務。


教你webpack、react和node.js環境配置(下篇)


image

教你webpack、react和node.js環境配置(下篇)


image


分享到:


相關文章: