天天看點

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

上一篇講完搭建Typescritp版的Koa架構後,F5運作服務端,頁面進行正常顯示服務。

今天要分享的是,如果要修改服務端代碼,如果讓編譯服務自動重新開機,免去手動結束服務再重新開機的過程。

自動重新開機服務需要使用nodemon工具。nodemon可以自動檢測到目錄中的檔案更改時,通過重新啟動應用程式來調試基于node.js的應用程式。

1. 全局安裝nodemon

2. 配置引導檔案lunch.json,修改為如下代碼

{

    // Use IntelliSense to learn about possible attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [{

        "type": "node",

        "request": "launch",

        "name": "Launch Program",

        "preLaunchTask": "typescript",

        "protocol": "inspector",

        "program": "${workspaceFolder}/index.ts",

        "outFiles": [

            "${workspaceFolder}/bin/*.js"

        ],

        "runtimeExecutable": "npm",

        "runtimeArgs": [

            "run",

            "debug"

        "port": 5858,

        "env": {

            "NODE_ENV": "dev"

        },

        "restart": true,

        "console": "integratedTerminal",

        "internalConsoleOptions": "neverOpen"

    }]

}

3. 修改package.json的scripts,如下:

4. 修改task.json,如下:

5. F5運作調試,控制台顯示如下:

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

  6. index.ts如上篇文章内容不變,打開浏覽器,輸入位址:localhost:3000,顯示效果如下:

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

 7. 修改index.ts代碼,如下:(僅修改:ctx.body = 'Hello World...Hello LaoLv';)

8. 儲存index.ts,此時控制台自動編譯輸出内容:

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

9. 打開浏覽器,重新整理,自動更改為修改後的結果,效果如下:

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

 到此,後端調試,自動編譯重新開機服務的功能完成。

可能F5後vs code會彈出下面問題:Cannot connect to runtime process,timeout after 10000 ms -......

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

解決辦法就是,launch.json中,一定要加上:"port": 5858,因為此處的port要與package.json中scripts-->debug中的 --inspect 0.0.0.0:5858的端口一緻。

附:文檔結構如下

Vue2+Koa2+Typescript前後端架構教程--02後端KOA2架構自動重新開機編譯服務(nodemon)

(文章為老呂原創,轉載請注明出處)