使用?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訪問(wèn)網(wǎng)站的多種方法分享(linux,php,nginx,apache)
禁止IP訪問(wèn)網(wǎng)站的各種方法有許多,不同服務(wù)器環(huán)境的方法會(huì)所有不同,下面我總結(jié)我們常用的禁止IP訪問(wèn)網(wǎng)站的實(shí)現(xiàn)配置方法,希望對(duì)大家會(huì)有所幫助2014-07-07TCP 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問(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