Vue2+Koa2+Typescript先後端框架教程--02後端KOA2框架自動重啓編譯服務（nodemon）

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

今天要分享的是，若是要修改服務端代碼，若是讓編譯服務自動重啓，免去手動結束服務再重啓的過程。

自動重啓服務須要使用nodemon工具。nodemon能夠自動檢測到目錄中的文件更改時，經過從新啓動應用程序來調試基於node.js的應用程序。

1. 全局安裝nodemon

npm i nodemon -g

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，以下：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558 
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [{
        "label": "typescript",
        "type": "typescript",
        "tsconfig": "tsconfig.json",
        "isBackground": true,
        "problemMatcher": "$tsc-watch",
        "option": "watch"
    }]
}

4. 修改task.json，以下：

 "scripts": {
    "start": "node ./bin/index.js",
    "debug": "nodemon --watch ./bin --inspect=0.0.0.0:5858 --nolazy ./bin/index.js",
    "build": "npm run build-ts",
    "build-ts": "tsc",
    "watch": "npm run watch-ts",
    "watch-ts": "tsc -w"
  }

5. F5運行調試，控制檯顯示以下：

  6. index.ts如上篇文章內容不變，打開瀏覽器，輸入地址：localhost:3000，顯示效果以下：

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx: any) => {
  ctx.body = 'Hello World';
});

console.log('app server start on port 3000...')
app.listen(3000);

 7. 修改index.ts代碼，以下：（僅修改：ctx.body = 'Hello World...Hello LaoLv';）

const Koa = require('koa');
const app = new Koa();

app.use(async (ctx: any) => {
  ctx.body = 'Hello World...Hello LaoLv';
});

console.log('app server start on port 3000...')
app.listen(3000);

8. 保存index.ts，此時控制檯自動編譯輸出內容：

9. 打開瀏覽器，刷新，自動更改成修改後的結果，效果以下：

 到此，後端調試，自動編譯重啓服務的功能完成。

 

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

解決辦法就是，launch.json中，必定要加上："port": 5858，由於此處的port要與package.json中scripts-->debug中的 --inspect 0.0.0.0:5858的端口一致。

 

附：文檔結構以下