iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 14
0
Modern Web

從無到有,打造一個漂亮乾淨俐落的 RESTful API系列 第 14

[Day-14] 使用 nodemon 取代 node 啟動程式

什麼是 nodemon?

在我們開發 node.js 時執行程式碼必須都要使用 node 指令來執行程式碼例如:node index.js ,但是如果你今天正在開發階段必須一直修修改改並且頻繁地測試內容,豈不是要一直重複著些指令嗎?從今天開始你可以使用 nodemon 的自動化 reload 幫你省去這些不必要麻煩的動作!

官方是這麼解釋的 nodemon 是一個公用程序,它會監視你的程式碼有無的任何更改並自動重新啟動服務,這時只要刷新你的瀏覽器就能看到改動,此外 nodemon 使用 npm 進行安裝,只需使用 nodemon 取代 node 執行你的程式碼,就能輕鬆的開發 node.js。

nodemon

nodemon 功能

  • 自動重啟應用程式
  • 持續偵測你的預設程式
  • 默認支持 node&coffeescript,但是易於運行任何可執行文件(比如python,make等)
  • 可以忽略特定文件或目錄
  • 觀察指定的目錄資料夾
  • 與服務器應用程序或一次運行公用程序和 REPLs 一起使用
  • 可在 node 中被存取使用
  • 有完整的開源碼分享在 GitHub

安裝

nodemon 使用 npm 進行安裝當然用 yarn 也可以,你可以安裝在全域也可以安裝在專案的 devDependencies 本機目錄中,以下指令,兩者挑一即可,作者是習慣把常用的安裝一次在全域中,所以會挑選第一種方法。

  • 使用 npm 安裝
  1. 安裝於全域
npm install nodemon -g  
  1. 安裝於專案資料夾中
npm install --save-dev nodemon 
  • 使用 yarn 安裝
  1. 安裝於全域
yarn global add nodemon
  1. 安裝於專案資料夾中
yarn add -D nodemon 

使用

新增一個檔案名為 index.js 在裡面可以先隨便寫個 console.log() 好測試,原本執行檔案輸入指令 node index.js 現在只要改成 nodemon 即可。

nodemon index.js

其實你輸入 nodemon 也會執行 index.js 這支檔案,因為它會自動抓取預設路徑,但你今天取別的名字時就要根據檔名去執行它囉。

https://ithelp.ithome.com.tw/upload/images/20171223/201072470FUlksBye3.png

若檔案變動會自動重啟,這時網頁重新整理就會立即看出結果,如果你覺得手動去刷新網頁這個動作也是多餘的太麻煩你可以試試搭配 gulp-webserver 來刷新你的網頁,可以參考這個 GitHub 教學。

https://ithelp.ithome.com.tw/upload/images/20171223/20107247GwpP2UZprk.png

文章同時發表於:https://andy6804tw.github.io/2017/12/24/nodemon-tutorial/


上一篇
[Day-13] Webpack 與 babel 轉譯
下一篇
[Day-15] Editor Config自訂編輯與設定
系列文
從無到有,打造一個漂亮乾淨俐落的 RESTful API43
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
O口O
iT邦新手 4 級 ‧ 2022-03-08 21:41:11

個人使用node.js資歷尚淺,只是想學好nodejs,所以想問一下比較低階的問題...

個人經過測試後,混用npm和yarn安裝套件,好像會產生執行檔不能執行的問題.
例如:
使用yarn安裝webpack套件(Day13文章,只有提供yarn的安裝指令,此時能夠正常使用的webpack),到Day14使用了npm去安裝nodemon後,想說index.js文件有修改過了,所以重新webpack一下index.js,沒想到會發現無法辨視webpack命令,但只要在以yarn再次安裝webpack套件後,又能正常使用webpack.

希望樓主能看見.

看更多先前的回應...收起先前的回應...
10程式中 iT邦研究生 4 級 ‧ 2022-03-08 21:56:21 檢舉

如果是初學還是希望以 npm 為主用熟悉,因為 npm 是 Node.js 預設的套件管理工具。關於 day13 若想用 npm 安裝可以使用 npm install --global webpack 安裝在全域。更多的 npm 與 yarn 指令比較可以參考這篇文章。

O口O iT邦新手 4 級 ‧ 2022-03-08 21:57:04 檢舉

提醒看這篇文章的朋友們,這篇文章在做的時候,必須先完成Day13的動作:
(1)在專案下,建立資料夾src,並在底下建立檔案index.js
(2)修改package.json,增加scripts指令「build」
(3)修改webpack.config.js,指定打包進入點為src\index.js這個檔案.
(4)開啟終端機A:執行yarn build,讓webpack能夠一直監控index.js的檔案有無修改,一經修改,就立刻重新打包.
(5)開啟另一個終端機B:執行nodemon index.js,會一直偵察打包後的index.budle.js有無修改,一有修改,重新執行伺服器.
(6)瀏覽器輸入:localhost:3000後,觀察網頁結果.
(7)再次修改src/index.js->webpack重新打包->nodemon重新載入,
瀏覽器按下F5更新,果然更改後的結果動態的變化.(證實nodemon的功能)

注意 : 修改index.js時,要修改src資料夾的,而不是router資料夾的。

10程式中 iT邦研究生 4 級 ‧ 2022-03-08 21:59:30 檢舉

Good! 感謝完整解說~/images/emoticon/emoticon12.gif

O口O iT邦新手 4 級 ‧ 2022-03-08 21:59:50 檢舉

謝謝樓主^_^

我要留言

立即登入留言