koa TS ESLint搭建伺服器重構版過程詳解

2022-10-26 14:03:37

初始化專案目錄

yarn init -y

安裝專案執行所需要的軟體包

生產依賴

yarn add koa koa-router cross-env module-alias dotenv

koa：搭建 Koa 服務的核心軟體包。

koa-router：Koa 路由軟體包。

koa-bodyparser：解析 POST 請求引數的軟體包。

cross-env：為專案新增不同的執行環境。

module-alias：可以像在 vue 和 React 中一樣使用路徑別名。

dotenv：載入專案根目錄下的.env中的設定。

koa-cors：跨域資源處理。

copyfiles：拷貝一些無法打包的資源。因為tsc只能編譯打包TypeScript程式碼，其餘檔案無法一同構建到dist資料夾。

開發依賴

ts-node-dev：和 nodemon功能類似，只不過該軟體包支援執行ts檔案。想要監聽檔案變化需要加上--respawn引數。

typescript：TypeScript 環境支援。

npm-run-all：支援同時執行多個npm指令。

@types/node：node編碼輔助。

執行npx tsc --init生成tsconfig.json：我使用的設定如下，大家可以根據自己的需求設定。

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

修改package.json

"scripts": {
"dev": "cross-env NODE_ENV=development tsnd --respawn src/main.ts", // 開發環境執行的指令碼命令，設定環境變數並監聽入口檔案的變化
"build": "run-s clearBuild compile copyPublic", // 將TypeScript專案打包成JavaScript專案
"clearBuild": "rimraf dist/*", // 在構建的時候清空dist目錄
"compile": "tsc", // 根據tsconfig.json的設定編譯TypeScript
"copyPublic": "copyfiles -u 1 src/public/* dist", // 有一些資源是需要我們在dist和src之間來回拷貝的，可以藉助該命令實現拷貝
// 其餘部分可以按照自己專案最終的部署方式自定義
"serve": "cross-env NODE_ENV=production node dist/main.js",
"start": "pm2 start ecosystem.config.js",
"stop": "pm2 stop ecosystem.config.js",
"restart": "pm2 restart ecosystem.config.js",
"delete": "pm2 delete ecosystem.config.js"
},

然後在專案上線後，就可以直接通過node、pm2等命令直接執行dist資料夾下打包好的js檔案即可。

從.env中載入環境變數

因為我們已經通過指令碼命令為不同的指令設定的環境變數，同時又引入了dotenv來載入.env中的環境變數。

這時我們就可以通過不同的來載入不同的.env 檔案來獲取裡面設定的不同引數，在這裡我參照Create React App 官方的.env檔案的載入優先順序。

npm run dev：env.development.local >.env.local> .env.development> .env

npm run server：env.production.local >.env.local> .env.production> .env

const pathResolve = (str: string)
:
string => path.resolve(process.cwd(), str);
const processENV = process.env.NODE_ENV
const isDev = processENV === "development"
try {
    const filename = isDev ? "./.env" : "./.env"
    dotenv.config({path: pathResolve(filename)});
} catch (err) {
    console.log(`${pathResolve(filename)} 不存在`);
}
try {
    const filename = isDev ? "./.env.development" : "./.env.production"
    dotenv.config({path: pathResolve(filename)});
} catch (err) {
    console.log(`${pathResolve(filename)} 不存在`);
}
try {
    const filename = isDev ? "./.env.local" : "./.env.local"
    dotenv.config({path: pathResolve(filename)});
} catch (err) {
    console.log(`${pathResolve(filename)} 不存在`);
}
try {
    const filename = isDev ? "./.env.development.local" : "./.env.production.local"
    dotenv.config({path: pathResolve(filename)});
} catch (err) {
    console.log(`${pathResolve(filename)} 不存在`);
}

我這裡的話，只用到了兩個環境，development和production，如果還要有測試等環境時，按需設定和載入即可。

設定路徑別名

使用module-alias我們就可以輕鬆的設定使用路徑別名，從此和const userData = require('../../file/user.json')這種路徑說拜拜。

我們只需要使用const userData = require("@/file/user.json")這種引入方式引入資料，看起來結構更清晰。

用法

將自定義的路徑別名新增在package.json中：

"_moduleAliases": {
"@": "./src",
"@app": "./src/app"
}

同時也要在tsconfig.json中新增路徑別名，否則編輯器會報錯，同時也會編譯不過去。

然後在應用程式的主檔案中新增如下程式碼：

import "module-alias/register";

一切準備就後，就可以使用一些我們自己客製化的路徑別名來引入相應的檔案了模組了。

更高階的用法參照官方檔案來學習：github.com/ilearnio/mo…

目錄規範

編碼風格規範

Eslint

yarn add eslint -D
# 初始化Eslint的組態檔，會在專案根目錄下生成Eslint的組態檔
npx eslint --init

在生成好的Eslint中加入parserOptions.project設定項：

接著我們執行npx eslint src/** --fixEslint 就會幫助我們自動格式化程式碼。

在package.json，新增Eslint的執行命令：

"script": {
//......
"lint:fix": "eslint --fix --ext .js,.ts,.tsx ."
}

同時設定Eslint的忽略檔案.eslintignore

dist
node_modules
.idea
.DS_Store

ok，現在我們在格式化的時候執行npm run lint:fix即可。

以上就是koa TS ESLint搭建伺服器重構版過程詳解的詳細內容，更多關於koa TS ESLint 搭建伺服器的資料請關注it145.com其它相關文章！