iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 20
1

出處

Creating the project

$ express express-locallibrary-tutorial --view=pug
後方 tag 也可以縮寫成
-v pug

建立後會看到一堆 create : 開頭的訊息, 還有接下來可以怎麼做的指令 ( 進入目錄 、 npm i 、 設變數後啟動 )

Note: 設變數後啟動在不同作業系統會有不同的指令。 在 Windows 中, &&& 是預設成使用 Command Prompt 。 ( 我不是用 Windows , 這裡我要跳過 ... )

Running the skeleton website

照著上段最後的那幾個步驟做 ( 進入目錄 、 npm i 、 設變數後啟動 ), 啟動完去瀏覽器 (http://localhost:3000/) 瞧瞧, 看到有歡迎頁就表示沒問題了

Note: 啟用也可以只輸入 $ npm start, 指定 DEBUG 是因為可以顯示 logging/debugging 的訊息。 例如當網站被訪問時可以看到如下的訊息

$ DEBUG=express-locallibrary-tutorial:* npm start

> express-locallibrary-tutorial@0.0.0 start /Users/peterliao/Documents/鐵人賽2020/express-locallibrary-tutorial
> node ./bin/www

  express-locallibrary-tutorial:server Listening on port 3000 +0ms
GET / 200 491.115 ms - 170
GET /stylesheets/style.css 200 25.615 ms - 111

Enable server restart on file changes

每次改檔案都要關掉再開是否讓人感到厭煩呢? 讓我們告訴大家一個好消息!
這個工具 nodemon 通常是安裝成全域 , 不過為了讓其他開發者知道我們有用這個工具, 所以這邊安裝 devDependency
現在我們要來裝這自動幫我們重啟的好用工具

npm i --save-dev nodemon

如果要全域安裝

npm i -g nodemon

打開 package.json 可以看到

"devDependencies": {
  "nodemon": "^1.18.10"
}

因為我們這邊不是用全域安裝, 不能直接下 command line, 但可以透過 NPM script 設定執行

打開 package.json 去找這段然後新增成如下

"scripts": {
  "start": "node ./bin/www",
  "devstart": "nodemon ./bin/www"
},

結束之後執行 command 修改 DEBUG

DEBUG=express-locallibrary-tutorial:* npm run devstart

Note: 現在如果專案資料夾中的檔案有任何更動, server 就會重啟, 或是在 nodemon 執行時下 command rs 也可以重啟 ( 啟動 nodemon 就會有這段提示 ) , 但我們還是需要在瀏覽器重新整理頁面。
這邊是我執行後的結果:

$ DEBUG=express-locallibrary-tutorial:* npm run devstart

> express-locallibrary-tutorial@0.0.0 devstart /Users/peterliao/Documents/鐵人賽2020/express-locallibrary-tutorial
> nodemon ./bin/www

[nodemon] 1.18.10
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./bin/www`
  express-locallibrary-tutorial:server Listening on port 3000 +0ms
rs
[nodemon] starting `node ./bin/www`
  express-locallibrary-tutorial:server Listening on port 3000 +0ms

下指令 npm run <scriptname> 會比 npm start 好, 以下是原網頁中文版本的說明

我們現在必須調用“npm run ”而不是 npm start,因為“start”實際上是映射到指定腳本的 NPM 命令。我們可以在啟動腳本中替換該命令,但我們只想在開發期間使用 nodemon,因此創建新的腳本命令是有意義的。


上一篇
25日: Express Tutorial 2: Creating a skeleton website ( $ express [options] 、 怎麼選 template/CSS/db )
下一篇
27日: Express Tutorial 2: Creating a skeleton website ( 結構 - package.json & www file )
系列文
還在想要買哪一堂線上課程嗎?培養看文件的習慣吧!用 MDN 文件學後端:NodeJS & MongooseDB30

尚未有邦友留言

立即登入留言