教你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的語法:

 

image

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

image

image

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章