使用?Koa?+?TS?+?ESLlint?搭建node服務(wù)器的過(guò)程詳解
初始化項(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功能類(lèi)似,在修改代碼之后,保存即可生效,無(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ù)器
# 依賴(lài)安裝 yarn add koa yarn add typescript -D # 依賴(lài)注解 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)目搭建
依賴(lài)安裝
# 依賴(lài)安裝 yarn add koa koa-router koa-cors koa-bodyparser dotenv yarn add ts-node-dev npm-run-all typescript -D # 依賴(lài)注解 yarn add @types/koa @types/koa-bodyparser @types/koa-router @types/koa-cors -D
dotenv是一個(gè)零依賴(lài)的模塊,它能將環(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 ├─ ??src │ ├─ ??app │ ├─ ??config │ ├─ ??constants │ ├─ ??controller │ ├─ ??main.ts │ ├─ ??middleware │ ├─ ??router │ ├─ ??service │ └─ ??utils ├─ .env ├─ tsconfig.json └─ yarn.lock

修改 package.json
{
"script": {
"dev": "tsnd --respawn src/main.ts",
"build": "npm-run-all resetFolder compile",
"compile": "tsc", // 編譯typescript
"resetFolder": "rimraf dist/*" // 清空dist文件夾
}
}當(dāng)我們?cè)陂_(kāi)發(fā)環(huán)境的時(shí)候,只需要執(zhí)行yarn dev即可成功啟動(dòng)服務(wù)。
當(dāng)我們執(zhí)行編譯打包的時(shí)候,根據(jù)tsconfig.json中的配置輸出到指定的目錄。

在項(xiàng)目部署后,我們只需要運(yùn)行dist/main.js文件即可啟動(dòng)服務(wù)。

代碼規(guī)范
eslint
官網(wǎng): eslint.bootcss.com
eslint能夠幫助我們規(guī)范編碼,比如字符串使用哪種引號(hào),代碼結(jié)尾是否要有分號(hào)等等。
安裝依賴(lài)包
yarn add eslint -D
使用如下命令初始化
eslint配置,會(huì)在項(xiàng)目更目錄生成.eslintrc.js配置文件。eslint --init

接著我們?cè)诿钚袌?zhí)行:npx eslint src/** --fix,執(zhí)行eslint提供的代碼的自動(dòng)修復(fù)。

修改package.json,添加運(yùn)行腳本。
"scripts": {
"lint": "eslint src/** --fix", // 使用eslint規(guī)則格式化代碼
}現(xiàn)在我們可以通過(guò)命令來(lái)處理代碼風(fēng)格問(wèn)題,但是我們更加希望在保存的時(shí)候自動(dòng)處理代碼分格,這時(shí)候就需要使用到vscode編輯器的插件ESLint,通過(guò)此插件和vscode編輯器配置便可以實(shí)現(xiàn)保存的時(shí)候自動(dòng)格式化代碼。
// vscode 配置自動(dòng)格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
}現(xiàn)在我們通過(guò)如上的配置,在保存的時(shí)候就會(huì)自動(dòng)處理代碼風(fēng)格問(wèn)題。
prettier
前面所提到的eslint主要做兩件事情,一是修復(fù)代碼質(zhì)量,二是修改代碼分格。
如果你不喜歡eslint自帶的格式化方式,就可以使用prettier來(lái)格式化代碼分格。
官網(wǎng): prettier.io/
yarn add prettier -D 復(fù)制代碼
在項(xiàng)目更目錄下配置.prettierrc
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}在項(xiàng)目更目錄運(yùn)行如下命令,格式化項(xiàng)目所有文件。
npx prettier --write .
但是當(dāng)我們執(zhí)行完后,會(huì)發(fā)現(xiàn)eslint又報(bào)錯(cuò)了。這是因?yàn)?code>eslint和prettier的沖突所導(dǎo)致的。這時(shí)候我們需要關(guān)閉prettier與eslint格式所產(chǎn)生的沖突。
yarn add eslint-config-prettier -D
然后在.eslintrc.js加入perttier擴(kuò)展,配置后沖突的問(wèn)題就解決了,代碼分格就由prettier來(lái)處理。
extends: ['standard', 'prettier']
現(xiàn)在我們希望在保存的時(shí)候按照prettier的代碼分格格式化代碼。eslint-plugin-prettier
yarn add eslint-plugin-prettier -D
eslintrc.js的最終配置如下:
module.exports = {
env: {
browser: true,
es2021: true
},
extends: ['standard', 'plugin:prettier/recommended'], // 修改此處
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['@typescript-eslint'],
rules: {
camelcase: 0 // 駝峰命名
}
}最后,實(shí)現(xiàn)了一個(gè)小案例:gitee.com/coderlzw/ko…
到此這篇關(guān)于使用 Koa + TS + ESLlint 搭建node服務(wù)器的文章就介紹到這了,更多相關(guān)node服務(wù)器搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
禁止IP訪(fǎng)問(wèn)網(wǎng)站的多種方法分享(linux,php,nginx,apache)
禁止IP訪(fǎng)問(wèn)網(wǎng)站的各種方法有許多,不同服務(wù)器環(huán)境的方法會(huì)所有不同,下面我總結(jié)我們常用的禁止IP訪(fǎng)問(wèn)網(wǎng)站的實(shí)現(xiàn)配置方法,希望對(duì)大家會(huì)有所幫助2014-07-07
TCP socket SYN隊(duì)列和Accept隊(duì)列區(qū)別原理解析
這篇文章主要介紹了TCP socket SYN隊(duì)列和Accept隊(duì)列區(qū)別原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
服務(wù)器Apache與Tomcat和Nginx的理解和對(duì)比分析詳解
今天小編就為大家分享一篇關(guān)于服務(wù)器Apache與Tomcat和Nginx的理解和對(duì)比分析詳解,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-04-04
集群運(yùn)維自動(dòng)化工具ansible之使用playbook安裝zabbix客戶(hù)端
Zabbix客戶(hù)端的安裝配置:Zabbix是一個(gè)基于WEB界面的提供分布式系統(tǒng)監(jiān)視以及網(wǎng)絡(luò)監(jiān)視功能的企業(yè)級(jí)的開(kāi)源解決方案。zabbix能監(jiān)視各種網(wǎng)絡(luò)參數(shù),保證服務(wù)器系統(tǒng)的安全運(yùn)營(yíng);本文講述的是使用playbook安裝zabbix客戶(hù)端。2014-07-07
網(wǎng)站解決和優(yōu)化Server is too busy的一些方法
有時(shí)候我們?cè)谠L(fǎng)問(wèn)網(wǎng)站的時(shí)候提示Server is too busy,一般情況都是因?yàn)榉?wù)器iis或web服務(wù)器資源不足引起的,一般情況下都有限制2014-04-04
搭建RocketMQ在本地IDEA開(kāi)發(fā)調(diào)試環(huán)境教程
這篇文章主要為大家介紹了搭建RocketMQ在本地IDEA開(kāi)發(fā)調(diào)試環(huán)境的步驟教程詳解有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步2022-02-02
親自教你在netty中使用TCP協(xié)議請(qǐng)求DNS服務(wù)器的詳細(xì)過(guò)程
DNS的全稱(chēng)domain name system,既然是一個(gè)系統(tǒng)就有客戶(hù)端和服務(wù)器之分,這篇文章主要介紹了在netty中使用TCP協(xié)議請(qǐng)求DNS服務(wù)器的全過(guò)程,需要的朋友可以參考下2022-07-07

