使用 Koa + TS + ESLlint 搭建node伺服器的過程詳解

2022-05-28 22:01:47

初始化專案

環境準備

與之前使用JavaScript 開發後臺不同，區別如下：

自動編譯執行的外掛由nodemon替換為ts-node-dev。
在TypeScript環境下，需要使用到ES6模組化規範。而非CommonJS規則。
使用TypeScript語法進行開發，再開發結束後，需要進行編譯打包為JavaScript去執行。

安裝環境

yarn global add ts-node-dev typescript

ts-node-dev：與nodemon功能類似，在修改程式碼之後，儲存即可生效，無需手動重啟。

# 例如
ts-node-dev src/app.ts

# 如果想要監聽檔案的改變需要加上 --respawn 引數
ts-node-dev --respaswn src/app.ts

# 使用簡短的別名
tsnd --respawn src/app.ts

初始化 tsconfig.json

# 生成tsconfig.json
tsc --init

修改tsconfig.json如下：

{
	"compilerOptions": {
		"target": "esnext", // 目標語言版本
		"module": "commonjs", // 指定生成程式碼的模板標準
		"sourceMap": true,
		"outDir": "./dist",
		"rootDir": "./src", // 指定輸出目錄, 預設是dist資料夾
		"strict": true,
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"skipLibCheck": true,
		"forceConsistentCasingInFileNames": true
	},
	// 需要編譯的的檔案和目錄
	"include": ["src"],
	"exclude": ["node_modules", "dist", "public"]
}

簡單搭建 Koa 伺服器

# 依賴安裝
yarn add koa
yarn add typescript -D
# 依賴註解
yarn add @types/koa -D

再app.ts中範例化一個伺服器。

import Koa, { DefaultContext, DefaultState, Context } from 'Koa'
const app: Koa<DefaultState, DefaultContext> = new Koa()
app.use(async (ctx: Context) => {
	ctx.body = 'coderlzw'
})
app.listen(3000, () => {
	console.log('服務啟動成功，running http://127.0.0.1:3000')
})

再package.json中新增偵錯指令碼：

"scripts": {
  "dev": "ts-node-dev --respawn app.ts"
}

啟動服務：

現在，我們使用Koa和TypeScript搭建了一個簡單的伺服器，我們http://127.0.0.1:3000便可以再瀏覽器中看到”coderlzw“

完整專案搭建

依賴安裝

# 依賴安裝
yarn add koa koa-router koa-cors koa-bodyparser dotenv
yarn add ts-node-dev npm-run-all typescript -D
# 依賴註解
yarn add @types/koa @types/koa-bodyparser @types/koa-router  @types/koa-cors -D

dotenv是一個零依賴的模組，它能將環境變數中的變數從.env檔案載入到process.env中。

在根目錄下建立.env檔案
```
HOST=localhost
PORT=3000
```

在*.js/*.ts中使用

import dotenv from 'dotenv'
dotenv.config()
const { PORT, HOST } = process.env

npm-run-all是一個批次執行npm指令碼的工具。

構建目錄結構

service
├─ package.json
├─