使用?Koa?+?TS?+?ESLlint?搭建node服務(wù)器的過(guò)程詳解
發(fā)布日期：2022-07-15 19:59 | 文章來(lái)源：腳本之家
初始化項(xiàng)目
環(huán)境準(zhǔn)備
與之前使用JavaScript 開(kāi)發(fā)后臺(tái)不同，區(qū)別如下：
- 自動(dòng)編譯運(yùn)行的插件由
nodemon替換為ts-node-dev。 - 在
TypeScript環(huán)境下，需要使用到ES6模塊化規(guī)范。而非CommonJS規(guī)則。 - 使用
TypeScript語(yǔ)法進(jìn)行開(kāi)發(fā)，再開(kāi)發(fā)結(jié)束后，需要進(jìn)行編譯打包為JavaScript去運(yùn)行。
安裝環(huán)境
yarn global add ts-node-dev typescript
ts-node-dev：與nodemon功能類似，在修改代碼之后，保存即可生效，無(wú)需手動(dòng)重啟。
# 例如 ts-node-dev src/app.ts # 如果想要監(jiān)聽(tīng)文件的改變需要加上 --respawn 參數(shù) ts-node-dev --respaswn src/app.ts # 使用簡(jiǎn)短的別名 tsnd --respawn src/app.ts
初始化 tsconfig.json
# 生成tsconfig.json tsc --init
修改tsconfig.json如下：
{
"compilerOptions": {
"target": "esnext", // 目標(biāo)語(yǔ)言版本
"module": "commonjs", // 指定生成代碼的模板標(biāo)準(zhǔn)
"sourceMap": true,
"outDir": "./dist",
"rootDir": "./src", // 指定輸出目錄, 默認(rèn)是dist文件夾
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
// 需要編譯的的文件和目錄
"include": ["src"],
"exclude": ["node_modules", "dist", "public"]
}簡(jiǎn)單搭建 Koa 服務(wù)器
# 依賴安裝 yarn add koa yarn add typescript -D # 依賴注解 yarn add @types/koa -D
再app.ts中實(shí)例化一個(gè)服務(wù)器。
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('服務(wù)啟動(dòng)成功，running http://127.0.0.1:3000')
})再package.json中添加調(diào)試腳本：
"scripts": {
"dev": "ts-node-dev --respawn app.ts"
}啟動(dòng)服務(wù)：
現(xiàn)在，我們使用Koa和TypeScript搭建了一個(gè)簡(jiǎn)單的服務(wù)器，我們http://127.0.0.1:3000便可以再瀏覽器中看到”coderlzw“
完整項(xiàng)目搭建
依賴安裝
# 依賴安裝 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是一個(gè)零依賴的模塊，它能將環(huán)境變量中的變量從.env文件加載到process.env中。
在根目錄下創(chuàng)建
.env文件HOST=localhost PORT=3000
在
*.js/*.ts中使用import dotenv from 'dotenv' dotenv.config() const { PORT, HOST } = process.env
npm-run-all是一個(gè)批量執(zhí)行npm腳本的工具。
構(gòu)建目錄結(jié)構(gòu)
service ├─ package.json ├─版權(quán)聲明：本站文章來(lái)源標(biāo)注為YINGSOO的內(nèi)容版權(quán)均為本站所有，歡迎引用、轉(zhuǎn)載，請(qǐng)保持原文完整并注明來(lái)源及原文鏈接。禁止復(fù)制或仿造本網(wǎng)站，禁止在非www.sddonglingsh.com所屬的服務(wù)器上建立鏡像，否則將依法追究法律責(zé)任。本站部分內(nèi)容來(lái)源于網(wǎng)友推薦、互聯(lián)網(wǎng)收集整理而來(lái)，僅供學(xué)習(xí)參考，不代表本站立場(chǎng)，如有內(nèi)容涉嫌侵權(quán)，請(qǐng)聯(lián)系alex-e#qq.com處理。
相關(guān)文章
關(guān)注官方微信