使用?Koa?+?TS?+?ESLlint?搭建node服務(wù)器的過程詳解
初始化項目
環(huán)境準(zhǔn)備
與之前使用JavaScript 開發(fā)后臺不同，區(qū)別如下：
- 自動編譯運行的插件由
nodemon替換為ts-node-dev。 - 在
TypeScript環(huán)境下，需要使用到ES6模塊化規(guī)范。而非CommonJS規(guī)則。 - 使用
TypeScript語法進行開發(fā)，再開發(fā)結(jié)束后，需要進行編譯打包為JavaScript去運行。
安裝環(huán)境
yarn global add ts-node-dev typescript
ts-node-dev：與nodemon功能類似，在修改代碼之后，保存即可生效，無需手動重啟。
# 例如 ts-node-dev src/app.ts # 如果想要監(jiān)聽文件的改變需要加上 --respawn 參數(shù) ts-node-dev --respaswn src/app.ts # 使用簡短的別名 tsnd --respawn src/app.ts
初始化 tsconfig.json
# 生成tsconfig.json tsc --init
修改tsconfig.json如下：
{
"compilerOptions": {
"target": "esnext", // 目標(biāo)語言版本
"module": "commonjs", // 指定生成代碼的模板標(biāo)準(zhǔn)
"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 服務(wù)器
# 依賴安裝 yarn add koa yarn add typescript -D # 依賴注解 yarn add @types/koa -D
再app.ts中實例化一個服務(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ù)啟動成功，running http://127.0.0.1:3000')
})再package.json中添加調(diào)試腳本：
"scripts": {
"dev": "ts-node-dev --respawn app.ts"
}啟動服務(wù)：
現(xiàn)在，我們使用Koa和TypeScript搭建了一個簡單的服務(wù)器，我們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是一個零依賴的模塊，它能將環(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是一個批量執(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)我們在開發(fā)環(huán)境的時候，只需要執(zhí)行yarn dev即可成功啟動服務(wù)。
當(dāng)我們執(zhí)行編譯打包的時候，根據(jù)tsconfig.json中的配置輸出到指定的目錄。
在項目部署后，我們只需要運行dist/main.js文件即可啟動服務(wù)。
代碼規(guī)范
eslint
官網(wǎng): eslint.bootcss.com
eslint能夠幫助我們規(guī)范編碼，比如字符串使用哪種引號，代碼結(jié)尾是否要有分號等等。
安裝依賴包
yarn add eslint -D
使用如下命令初始化
eslint配置，會在項目更目錄生成.eslintrc.js配置文件。eslint --init
接著我們在命令行執(zhí)行：npx eslint src/** --fix，執(zhí)行eslint提供的代碼的自動修復(fù)。
修改package.json，添加運行腳本。
"scripts": {
"lint": "eslint src/** --fix", // 使用eslint規(guī)則格式化代碼
}現(xiàn)在我們可以通過命令來處理代碼風(fēng)格問題，但是我們更加希望在保存的時候自動處理代碼分格，這時候就需要使用到vscode編輯器的插件ESLint，通過此插件和vscode編輯器配置便可以實現(xiàn)保存的時候自動格式化代碼。
// vscode 配置自動格式化
"editor.codeActionsOnSave": {
"source.fixAll": true
}現(xiàn)在我們通過如上的配置，在保存的時候就會自動處理代碼風(fēng)格問題。
prettier
前面所提到的eslint主要做兩件事情，一是修復(fù)代碼質(zhì)量，二是修改代碼分格。
如果你不喜歡eslint自帶的格式化方式，就可以使用prettier來格式化代碼分格。
官網(wǎng): prettier.io/
yarn add prettier -D 復(fù)制代碼
在項目更目錄下配置.prettierrc
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}在項目更目錄運行如下命令，格式化項目所有文件。
npx prettier --write .
但是當(dāng)我們執(zhí)行完后，會發(fā)現(xiàn)eslint又報錯了。這是因為eslint和prettier的沖突所導(dǎo)致的。這時候我們需要關(guān)閉prettier與eslint格式所產(chǎn)生的沖突。
yarn add eslint-config-prettier -D
然后在.eslintrc.js加入perttier擴展，配置后沖突的問題就解決了，代碼分格就由prettier來處理。
extends: ['standard', 'prettier']
現(xiàn)在我們希望在保存的時候按照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 // 駝峰命名
}
}最后，實現(xiàn)了一個小案例：gitee.com/coderlzw/ko…
到此這篇關(guān)于使用 Koa + TS + ESLlint 搭建node服務(wù)器的文章就介紹到這了,更多相關(guān)node服務(wù)器搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
禁止IP訪問網(wǎng)站的多種方法分享(linux,php,nginx,apache)
禁止IP訪問網(wǎng)站的各種方法有許多，不同服務(wù)器環(huán)境的方法會所有不同，下面我總結(jié)我們常用的禁止IP訪問網(wǎng)站的實現(xiàn)配置方法，希望對大家會有所幫助2014-07-07
TCP socket SYN隊列和Accept隊列區(qū)別原理解析
這篇文章主要介紹了TCP socket SYN隊列和Accept隊列區(qū)別原理解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-12-12
服務(wù)器Apache與Tomcat和Nginx的理解和對比分析詳解
今天小編就為大家分享一篇關(guān)于服務(wù)器Apache與Tomcat和Nginx的理解和對比分析詳解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-04-04
下面小編就為大家分享一篇使用sinopia 搭建私有npm服務(wù)器的教程，具有很好的參考價值，希望對大家有所幫助2017-11-11
集群運維自動化工具ansible之使用playbook安裝zabbix客戶端
Zabbix客戶端的安裝配置：Zabbix是一個基于WEB界面的提供分布式系統(tǒng)監(jiān)視以及網(wǎng)絡(luò)監(jiān)視功能的企業(yè)級的開源解決方案。zabbix能監(jiān)視各種網(wǎng)絡(luò)參數(shù)，保證服務(wù)器系統(tǒng)的安全運營;本文講述的是使用playbook安裝zabbix客戶端。2014-07-07
配置服務(wù)器一共有兩種：1.配置新的服務(wù)器2.刪除原有服務(wù)器，再次安裝（原來注冊的人員依然能用）。這想這里指的安裝并不是教你如何用張Domino服務(wù)器安裝在機器上，主要是為了教你們?nèi)绾闻渲?服務(wù)器2011-10-10
網(wǎng)站解決和優(yōu)化Server is too busy的一些方法
有時候我們在訪問網(wǎng)站的時候提示Server is too busy，一般情況都是因為服務(wù)器iis或web服務(wù)器資源不足引起的，一般情況下都有限制2014-04-04
搭建RocketMQ在本地IDEA開發(fā)調(diào)試環(huán)境教程
這篇文章主要為大家介紹了搭建RocketMQ在本地IDEA開發(fā)調(diào)試環(huán)境的步驟教程詳解有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步2022-02-02
在很多項目的業(yè)務(wù)初期階段，高速迭代上線是首要考慮的事情，對后期的容量預(yù)估、可擴展性和系統(tǒng)健壯性、高可用一般沒有那么重視。但隨著業(yè)務(wù)的發(fā)展，用戶量、請求量的暴增發(fā)現(xiàn)原來的單體系統(tǒng)已經(jīng)遠遠不滿足需求了，特別是隨著互聯(lián)網(wǎng)整體的高速發(fā)展，對系統(tǒng)的要求越來越高2022-01-01
親自教你在netty中使用TCP協(xié)議請求DNS服務(wù)器的詳細過程
DNS的全稱domain name system，既然是一個系統(tǒng)就有客戶端和服務(wù)器之分，這篇文章主要介紹了在netty中使用TCP協(xié)議請求DNS服務(wù)器的全過程,需要的朋友可以參考下2022-07-07