JavaScript

2020.11.10

用 Express + nodemon 建一個乾淨的 nodeJS 樣板


最近因為工作關係,開始學用 nodeJS 了,我使用的是非常知名的 Express framework,他也有提供 APP 產生器快速建構一個基本的 nodeJS 網站,為了避免每次都要重新查資料,所以就記錄在自己的 Blog 裡。

安裝 Express 產生器

第一次使用要先安裝他的產生器:

$ npm install express-generator -g

安裝完後可以執行 express -h 看到產生器的選項:

$ express -h

  Usage: express [options][dir]

  Options:

    -h, --help          output usage information
        --version       output the version number
    -e, --ejs           add ejs engine support
        --hbs           add handlebars engine support
        --pug           add pug engine support
    -H, --hogan         add hogan.js engine support
        --no-view       generate without view engine
    -v, --view <engine> add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
    -c, --css <engine>  add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
        --git           add .gitignore
    -f, --force         force on non-empty directory

建立 Express 專案

Express 可以選擇要使用的「樣版引擎」以及「CSS 預處理器」,如果都沒有指定,預設就是:

  • 樣版引擎:jade
  • CSS 預處理器:原生的 css

我自己是習慣使用 ejs 跟 scss,所以我會下這樣的指令新建專案:

$ express clean-express --view=ejs --css=compass

補充

--css=sass,使用的是 sass 語法,沒有大括號跟分號。
--css=compass,使用的是 scss 語法,有大括號跟分號。

接著請輸入以下指令:

# 開啟該專案的目錄
$ cd clean-express

# 安裝需要用到的套件
$ npm install

# 啟動伺服器
$ npm start

預設的 port 是 3000,所以啟動後請在網址輸入 http://localhost:3000,如果安裝正常會看到 Express 的歡迎畫面:

Express 歡迎畫面

用 compass 出現錯誤 ENOENT

假設你跟我一樣使用 compass,啟動之後卻在終端機出現錯誤訊息,大致長這樣:
GET / 304 23.164 ms - -
events.js:174
throw er; // Unhandled 'error' event
Error: spawn compass ENOENT


那有很大的原因是沒有安裝 compass,因此請輸入以下指令安裝 compass 後,再重新啟動應該就沒問題囉!
$ gem update --system
$ gem install compass

使用 nodemon 自動重啟伺服器

這個就跟前端的 livereload 類似。

nodemon 可以讓我們更改 server 的程式碼之後,不用重新關閉伺服器再打開,直接到網頁重新整理即可。

安裝 nodemon

你可以選擇全域安裝(推薦全域安裝,因為他真的很好用XD):

$ npm install nodemon -g  

也可以選擇只安裝在特定的資料夾:

$ npm install --save-dev nodemon 

正常情況下,安裝完之後輸入以下指令,就可以正常使用了:

# 原本的啟動方式
$ node app.js

# 修改後的啟動方式
$ nodemon app.js

搭配 Express,自動重啟伺服器

但如果我們有使用 Express 的話,他的啟動方式是 npm start,所以我們需要做一點小修改,才可以使用 nodemon 這個好用的服務!

請打開你的首頁(預設會是 app.js),將最後一行註釋起來

// module.exports = app;

然後加入以下程式碼:

var debug = require('debug')('my-application');
app.set('port', process.env.PORT || 3000);

// 啟動監聽
var server = app.listen(app.get('port'), function() {
debug('Express server listening on port ' + server.address().port);
});

接著再啟動 nodemon:

$ nodemon app.js

這樣每次改完程式碼存檔之後,就能直接到網頁重新整理看結果囉!

下載 Express-Clean-APP

最後我也將這份 Express Clean 的專案資料夾放到 Github 上面,有需要的朋友可以自行 Clone 或是 Fork 唷。

GitHub - mukiwu/clean-express

GitHub – mukiwu/clean-express

Contribute to mukiwu/clean-express development by creating an account on GitHub.

https://github.com/mukiwu/clean-express

歡迎給我點鼓勵,讓我知道你來過 :)

guest
0 則留言
Inline Feedbacks
View all comments
Copyright (C) MUKI space* / Reborn Theme All Rights Reserved.