版權聲明：本文為博主原創文章，遵循?CC 4.0 BY-SA?版權協議，轉載請附上原文出處鏈接和本聲明。 本文鏈接：https://blog.csdn.net/keysking/article/details/88373871

本文首發于在下的個人博客可轉發,但請保留來源原地址:blog.keysking.com
從零開始創建一個可調試,支持熱加載的TypeScript+Koa工程.

本文為了盡量詳細,對出現的各種東西都做了簡單的介紹,可能會看起來比較啰嗦.

環境搭建

首先,需要一套安裝了node,typescript和VScode的開發環境.

安裝node的過程就不贅述了,網上一大把.

安裝typescript也很簡單:

npm install -g typescript

• 1

安裝完成后,使用tsc -v命令,如果出現版本號,則為安裝成功.

安裝VSCode…也不說了

創建typescript工程

cd到需要創建工程的文件夾后,先建一個工程文件夾,比如我們的工程文件夾叫"koaDemo".

mkdir koaDemo cd koaDemo

• 1
• 2

創建npm工程:

npm init

• 1

這個命令會創建package.json?文件,這個文件定義了這個項目所需要的各種模塊，以及項目的配置信息.

創建typescript工程:

tsc --init

• 1

這個命令會創建?tsconfig.json?文件,是用來配置typescript編譯的

打開后是所有的可以配置的選項(我猜是所有的),但大多數都被注釋了起來,我們需要哪個就把哪個解開注釋即可.

我們對此文件進行如下更改:

把target改成ES2017,改完后這一行是這樣的:"target": "ES2017",?這樣我們就能使用node本身實現的一些新特性,

打開sourceMap那一行的注釋

"sourceMap": true,

這樣就能生成.map文件,map文件是用來映射ts文件與生成出來的js文件的,方便我們調試用的.因為我們調試的時候執行的是js文件,但是看的卻是ts文件.(不過用ts-node的話,也該就不需要map文件了)

設置輸出文件夾:

"outDir": "./dist",

打開靜態文件選項

"strict": true,

在最后的大括號前添加如下語句(記得上一個大括號后加逗號)

"include": ["src/**/*"],

• 1
• 2
• 3

最后忽略掉注釋后的?tsconfig.json?文件是這樣的:

{"compilerOptions": {"target": "ES2017", /*編譯到ES2017版本的js*/ "module": "commonjs", /*使用commonjs規范*/ "sourceMap": true, /*生成map文件*/ "outDir": "./dist", /*輸出文件夾*/ "strict": true, /*啟用所有嚴格的類型檢查選項*/ "noImplicitAny": true, /*允許any類型*/ }, "include": [ /*要進行編譯的文件*/ "src/**/*" /*src目錄下的所有文件*/ ], }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

安裝必要的包

因為要創建koa工程,我們要安裝koa,然后為了使用路由功能,我們同時也安裝koa-router

npm install --save koa koa-router

• 1

然后安裝一些與typescript相關的功能:

npm i --save-dev typescript ts-node nodemon

• 1

其中,typescript其實我們之前已經全局安裝過(使用-g參數),再次安裝是為了寫入package.json文件中,方便沒有全局安裝typescript的后來人下載我們的工程后能正常使用.

ts-node可以使我們直接運行ts文件,而不用將ts編譯為js文件后再執行,使用它,我們就能快速的進行ts的調試.

nodemon可以監控文件的修改,當文件某文件一旦被修改,nodemon就會自動重啟程序,以實現熱重載.

你可能發現了,我們安裝koa和kouter的時候,使用的是—save,而安裝typescript等的時候使用的是--save-dev.

二者有什么區別嗎?

打開package.json我們就能發現不同之處:

你會發現,koa在dependencies之下,而typescript等在devDependencies之下.

dependencies是我們項目需要的第三方包,這些包完全用在項目當中,即使是生產環境,我們也應該安裝使用這些包.

而devDependencies是我們項目開發時使用的包,只是為了我們開發使用的,在生產環境中我們并不需要這些包.

比如typescript是為了編譯ts到js,ts-node是為了方便調試,nodemon是為了開發時熱重載.

另外,你可能也發現了,devDependencies中我還安裝了另外兩個包:@types/koa和@types/koa-router

這是因為koa和koa-router是使用js寫的,ts無法準確的知道其中的類型等,也就無法方便地進行類型檢查和代碼提示,所以導入這兩個包的意義就是補全koa和koa-router中的類型.

同樣,只是在開發中才需要,所以:

npm i --save-dev @types/koa @types/koa-router

• 1

這樣,我們這個小例子所需要的所有包,就全部安裝完畢了.

寫一個hello world

在項目目錄下新建一個src文件夾,然后在src文件夾里建一個server.ts文件,在此文件中寫下如下代碼:

import Koa from 'koa'; // 導入koa import Router from "koa-router"; // 導入koa-routerconst app:Koa = new Koa(); // 新建一個Koa對象 const router:Router = new Router(); // 新建一個koa-router對象router.get('/*', async (ctx) => { // 截獲所有路由,都指向此函數ctx.body = "Hello Koa and TS,I am keysking."; // 向瀏覽器返回數據 })app.use(router.routes()); // 使用路由app.listen(8080); // 監聽8080端口console.log("Server running on http://localhost:8080");

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

然后在工程文件夾下運行tsc命令試一下:

tsc

• 1

然后你就會發現工程文件夾下出現了一個叫做dist的文件夾,里面有server.js和server.js.map文件.

map文件我們不管,server.js文件就是我們想要的由ts編譯出的js文件,我們執行一下試試:

看起來是在執行了,我們訪問一下http://localhost:8080試試:

不錯,獲得了我們想要的數據,這說明我們的代碼生效了.

熱重載

此時我們的代碼已經可以用了,但是每次我們修改了代碼都需要執行一次tsc然后node dist/server.js才能看到修改后的效果,這樣很不方便.所以我們使用nodemon對代碼進行監聽,當代碼發生變化的時候,就自動重啟應用.

我們在package.json的scripts中加入下面這一句:

"watch-server": "nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' ./src/server.ts"

• 1

其中的參數:

—watch 'src/**/*': 監聽src目錄下的文件

-e ts,tsx: 監聽ts和tsx文件

—exrc 'ts-node' ./src/server.ts: 執行方式是使用ts-node運行./src/server.t文件

我們之前說過ts-node文件,使用它,我們可以直接運行ts文件,而省去編譯成js文件的過程.

然后我們在命令行運行這個語句:

npm run watch-server

• 1

可以看到,程序跑起來了,此時我們訪問http://localhost:8080,依舊可以獲得我們想要返回的hello信息.

那我們修改一下程序試試,把Hello改成Hi.

可以看到,當我們按下?+s對文件進行保存的時候,nodemon將程序重啟了.

此時我們再訪問http://localhost:8080,就看到了Hi的信息,這一切都是自動的,也就是說,我們之后只需要修改代碼,然后保存后直接到瀏覽器查看結果就可以了,完全不需要手動重啟程序.

調試TS

有時候,我們需要調試ts代碼,這時候vscode就大顯神通了.

我們點左邊的蟲子按鈕進入Debug界面,然后點上面的齒輪,打開配置文件:launch.json

剛開始是沒有這個文件的,但是我們點擊后,vscode會自動幫我們創建這個文件,就放在工程目錄的.vscode文件夾下.

打開后里面默認有一些配置,我們把configurations中的數據刪除,填入我們的數據,最終launch.json文件是這樣的:

{"version": "0.2.0", "configurations": [ { "name": "調試工程", "type": "node", "request": "launch", "args": ["${workspaceRoot}/src/server.ts"], // 當前文件 "runtimeArgs": ["--nolazy", "-r", "ts-node/register"], // --nolazy: 告訴v8引擎提前編譯代碼，以便斷點正常工作 -r ts-node/register: 這可以確保在執行代碼之前加載ts-node "sourceMaps": true, "cwd": "${workspaceRoot}", // 將工作目錄設置為項目根目錄 "protocol": "inspector", // 將節點調試協議設置為V8 Inspector模式 } ] }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

然后,我們按下快捷鍵F5或者右邊的小綠三角,就能開始調試了.

我們在想斷點的代碼前點擊,添加斷點:

然后開始調試,打開瀏覽器訪問一下試試

果真斷了下來.

好了,那么整個可以調試,熱重載的typescript+koa工程我們就創建好了~

轉載于:https://www.cnblogs.com/ivday/p/11611609.html

總結

以上是生活随笔為你收集整理的创建可调试,热加载的TypeScript+Koa工程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。