Step 1 創(chuàng)建基礎(chǔ)和安裝依賴
mkdir <project-name>
cd <project-name>
git init // 初始化 git 配置文件
mkdir src
// 安裝依賴
npm init // 初始化 package.json
npm i koa koa-router
npm i --save-dev typescript ts-node nodemon
npm i --save-dev @types/koa @types/koa-router
Step 2 修改編譯配置
添加 tsconfig.json 配置框产，為了使用原生的 Async/Await，我們將編譯的目標(biāo)版本設(shè)置為 es2017:
{
"compilerOptions": {
"module": "commonjs",
"target": "es2017",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist", // TS文件編譯后會(huì)放入到此文件夾內(nèi)
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
"include": [
"src/**/*"
]
}
Step 3 創(chuàng)建 koa 應(yīng)用
我們?cè)?src目錄下創(chuàng)建文件 server.ts
import * as Koa from 'koa';
import * as Router from 'koa-router';
const app = new Koa();
const router = new Router();
router.get('/*', async (ctx) => {
ctx.body = 'Hello World!';
});
app.use(router.routes());
app.listen(3000);
console.log('Server running on port 3000');
Step 4 啟動(dòng)項(xiàng)目
我們添加一些腳本到 package.json 中错英，腳本如下
"scripts": {
"start": "tsc && node dist/server.js"
}
然后我們使用以下命令，啟動(dòng)項(xiàng)目
npm start
tsc 命令會(huì)根據(jù) tsconfig.json中配置隆豹，對(duì)我們 ts 文件進(jìn)行編譯椭岩，并將生成的文件放入 dist目錄下。然后我們使用 node server.js命令璃赡，啟動(dòng)服務(wù)判哥。
啟動(dòng)后，我們可以通過 http://localhost:3000 訪問頁面碉考。
如何實(shí)現(xiàn)熱更新
這時(shí)塌计，有一個(gè)問題 —— 當(dāng)我們文件發(fā)生改變時(shí)，我們需要終止命令侯谁，然后重啟命令锌仅。這樣，開發(fā)起來太繁瑣了墙贱。能不能當(dāng)文件發(fā)生改變時(shí)技扼，自動(dòng)重新編譯和啟動(dòng)項(xiàng)目。于是嫩痰，我們想到了使用 nodemon來監(jiān)控文件的改變剿吻， 使用ts-node（類似，執(zhí)行了 tsc && node dist/server.js）啟動(dòng)項(xiàng)目串纺。
我們將啟動(dòng)腳本改成如下:
"scripts": {
"start": "tsc && node dist/server.js",
"watch-server": "nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' ./src/server.ts"
}
然后執(zhí)行 npm run watch-server啟動(dòng)項(xiàng)目丽旅，嘗試修改 server.ts文件椰棘，我們可以發(fā)現(xiàn)文件可以自動(dòng)編譯了。
如何使用 chrome 的 debug 模式
開發(fā)時(shí)榄笙，我們有時(shí)希望可以進(jìn)行斷點(diǎn)調(diào)試邪狞。我們想到了使用node的--inspect參數(shù)啟動(dòng)node項(xiàng)目，然后通過chrome 進(jìn)行調(diào)試茅撞。
我們修改一下啟動(dòng)命令：
"watch-server": "nodemon --inspect --watch 'src/**/*' -e ts,tsx --exec 'node -r ts-node/register' ./src/server.ts",
啟動(dòng)項(xiàng)目后帆卓，我們可以通過chrome控制臺(tái)進(jìn)入調(diào)試窗口進(jìn)行調(diào)試
