# NodeJS(Max)第 4 節： Improved Development Workflow and Debugging

> Udemy課程：[NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)
](https://www.udemy.com/course/nodejs-the-complete-guide/)

`20231203Sun.~20231204Mon.`

## 4-42. Understanding NPM Scripts
先用npm init去初始化設定。

npm init

他會問你一連串的問題，如果直接按enter跳過，npm會給你預設值，預設的值他都寫在後方括號中。

之後設定完，輸入yes後便會幫你建立一個package.json檔案

其中，script的區塊，我們可以自行新增自己的語法。例如說我們先前需要打上`node app.js`去執行我們的檔案（以這裡為例，就是去執行名為app.js的檔案）。

而現在我們要在script的區塊加入新語法（如下所示），這讓其他人下載你的檔案之後，不必去猜測他需要執行哪個檔，取而代之的是只需要打上`npm start`即可，不須再附上檔名。

"start": "node app.js"


上方所設置的key name start，是可以自行修改的，我們可以任意命名，重點在於value的部份，是我們要去執行的內容，因此不能出錯（當然也不能隨意修改），不過！若任意命名且想執行該script時，必須以「`npm run`」作為前綴詞。

（前面可以直接`npm start`，而非`npm run start`，那是在npm中的special case。）

**▊ 錯誤的寫法**

若想執行script，直接用npm會報錯

**▊ 正確的寫法**

npm run start-server


****

## 4-43. Installing 3rd Party Packages
目前若我們修改程式碼後，先是ctrl+S儲存修正後的程式碼，然後都必須先按下ctrl+C停止server之後再次執行程式碼，才能看到修正後的成果，這有點cumbersome。（我們更希望每次ctrl+S儲存後，server都能自動的去重新啟動）

為了達成這樣的目的，我們可以去下載一個第三方的套件，那要如何下載第三方套件呢？

先前我們利用了run的命令(command)，去執行package.json中的各種客製scripts，現在就要利用install這個命令來下載第三方套件：

npm install 套件名稱

而這裡我們希望讓server在每次我們修正並儲存程式檔時都能自動的restart，用到的套件名稱叫做「[nodemon](https://www.npmjs.com/package/nodemon)」。


而在下載之前，可以先了解一些npm的語法：

**▊ --save**

以下兩種是同樣的作用，目前的預設即為`--save`。他便是一般的下載套件，而下載後的套件會被寫入"dependencies"裡面，也就是說這個套件也會作用在我們發布的project上。

舉例來說，若專案中使用到jQuery套件，那麼我們專案發布至線上環境後，專案仍然需要jQuery的運作，因此jQuery套件應該使用`--save`，將套件寫入"dependencies"裡面。

npm install nodemon
npm install nodemon --save


**▊ --save-dev**

相反地，若我們只有在開發時才會使用到該套件，那麼我們可以`--save-dev`下載套件，如此一來套件將寫入"devDependencies"裡面。

舉例來說，此處的nodemon作用，在於當我們開發時修正了程式碼，儲存該程式檔後，nodemon可以幫助我們自動地restart server，但是當這個專案被發布至線上後，我們並不會在線上動到他的程式碼，也就不會有需要restart server的清況發生，因此nodemon套件很適合寫入"devDependencies"裡面。

npm install nodemon --save-dev


:::success
**Global Features vs Core Modules vs Third-Party Modules**

:::

****

## 4-45. Using Nodemon for Autorestarts
上一章節知道如何安裝套件，也安裝完成nodemon了，接著便要開始使用，使用方式則是用nodemon來取代我們先前的`node app.js`。

"start": "nodemon app.js"


此時，我們試著在app.js中做更動並儲存，可以發現terminal會出現以下內容，他已幫助我們restart整隻程式碼了。


****

## 4-50. Logical Errors
一些logic error較難找出錯誤的地方在哪裡，因為logic error不會出現error的警示給我們，因此可以善用VScode中的debuger。

可以在覺得有問題的行數設置breakpoint，當我們滑鼠hover至程式碼之上，可以看見當下的變數被賦予什麼樣的內容（下圖為老師的範例做截圖）

（覺得使用概念跟goole devtool相似）


**在VS code中可以從view中找到debug console**

**或者按下F5快捷鍵，**

**再選擇nodejs**

記得！要先停掉nodemon，不要同時開啟nodemon又同時開啟debug，這會讓debug無法正常執行。

老師提供的延伸資料：[Node.js debugging in VS Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging)

****

## 4-52. Restarting the Debugger Automatically After Editing our App
在vscode中，debug的部份也可以自動更新。

**Run > Add Configuration**

**Node.js**

**會新增一個launch.json檔案**

**額外加上三行指令，即完成設置**

"restart": true,
"runtimeExecutable": "nodemon",
"console": "integratedTerminal"


:::success
其他更多關於VS code debug的內容：

* More on debugging Node.js: https://nodejs.org/en/docs/guides/debugging-getting-started/
* Debugging Node in Visual Studio Code: https://code.visualstudio.com/docs/nodejs/nodejs-debugging
:::