koa?TS?ESLint搭建服務(wù)器重構(gòu)版過程詳解
初始化項(xiàng)目目錄
yarn init -y
安裝項(xiàng)目運(yùn)行所需要的軟件包
- 生產(chǎn)依賴
yarn add koa koa-router cross-env module-alias dotenv
koa:搭建 Koa 服務(wù)的核心軟件包。
koa-router:Koa 路由軟件包。
koa-bodyparser:解析 POST 請求參數(shù)的軟件包。
cross-env:為項(xiàng)目添加不同的運(yùn)行環(huán)境。
module-alias:可以像在 vue 和 React 中一樣使用路徑別名。
dotenv:加載項(xiàng)目根目錄下的.env中的配置。
koa-cors:跨域資源處理。
copyfiles:拷貝一些無法打包的資源。因?yàn)?code>tsc只能編譯打包TypeScript代碼,其余文件無法一同構(gòu)建到dist文件夾。
- 開發(fā)依賴
ts-node-dev:和 nodemon功能類似,只不過該軟件包支持運(yùn)行ts文件。想要監(jiān)聽文件變化需要加上--respawn參數(shù)。
typescript:TypeScript 環(huán)境支持。
npm-run-all:支持同時(shí)運(yùn)行多個(gè)npm指令。
@types/node:node編碼輔助。
執(zhí)行npx tsc --init生成tsconfig.json:我使用的配置如下,大家可以根據(jù)自己的需求配置。
{
"compilerOptions": {
"target": "esnext", // 目標(biāo)語言版本
"module": "commonjs", // 指定生成代碼的模板標(biāo)準(zhǔn)
"sourceMap": true,
"outDir": "./dist", // 指定輸出目錄, 默認(rèn)是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", // 開發(fā)環(huán)境執(zhí)行的腳本命令,設(shè)置環(huán)境變量并監(jiān)聽入口文件的變化
"build": "run-s clearBuild compile copyPublic", // 將TypeScript項(xiàng)目打包成JavaScript項(xiàng)目
"clearBuild": "rimraf dist/*", // 在構(gòu)建的時(shí)候清空dist目錄
"compile": "tsc", // 根據(jù)tsconfig.json的配置編譯TypeScript
"copyPublic": "copyfiles -u 1 src/public/* dist", // 有一些資源是需要我們在dist和src之間來回拷貝的,可以借助該命令實(shí)現(xiàn)拷貝
// 其余部分可以按照自己項(xiàng)目最終的部署方式自定義
"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"
},

然后在項(xiàng)目上線后,就可以直接通過node、pm2等命令直接運(yùn)行dist文件夾下打包好的js文件即可。

從.env中加載環(huán)境變量
因?yàn)槲覀円呀?jīng)通過腳本命令為不同的指令設(shè)置的環(huán)境變量,同時(shí)又引入了dotenv來加載.env中的環(huán)境變量。
這時(shí)我們就可以通過不同的來加載不同的.env 文件來獲取里面配置的不同參數(shù),在這里我參照Create React App 官方的.env文件的加載優(yōu)先級(jí)。
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)} 不存在`);
}
我這里的話,只用到了兩個(gè)環(huán)境,development和production,如果還要有測試等環(huán)境時(shí),按需配置和加載即可。
配置路徑別名
使用module-alias我們就可以輕松的配置使用路徑別名,從此和const userData = require('../../file/user.json')這種路徑說拜拜。
我們只需要使用const userData = require("@/file/user.json")這種引入方式引入數(shù)據(jù),看起來結(jié)構(gòu)更清晰。
用法
將自定義的路徑別名添加在package.json中:
"_moduleAliases": {
"@": "./src",
"@app": "./src/app"
}
同時(shí)也要在tsconfig.json中添加路徑別名,否則編輯器會(huì)報(bào)錯(cuò),同時(shí)也會(huì)編譯不過去。

然后在應(yīng)用程序的主文件中添加如下代碼:
import "module-alias/register";
一切準(zhǔn)備就后,就可以使用一些我們自己定制的路徑別名來引入相應(yīng)的文件了模塊了。
更高級(jí)的用法參照官方文檔來學(xué)習(xí):github.com/ilearnio/mo…

目錄規(guī)范

編碼風(fēng)格規(guī)范
Eslint
yarn add eslint -D # 初始化Eslint的配置文件,會(huì)在項(xiàng)目根目錄下生成Eslint的配置文件 npx eslint --init

在生成好的Eslint中加入parserOptions.project配置項(xiàng):

接著我們運(yùn)行npx eslint src/** --fixEslint 就會(huì)幫助我們自動(dòng)格式化代碼。

在package.json,添加Eslint的運(yùn)行命令:
"script": {
//......
"lint:fix": "eslint --fix --ext .js,.ts,.tsx ."
}
同時(shí)配置Eslint的忽略文件.eslintignore
dist node_modules .idea .DS_Store
ok,現(xiàn)在我們在格式化的時(shí)候執(zhí)行npm run lint:fix即可。
以上就是koa TS ESLint搭建服務(wù)器重構(gòu)版過程詳解的詳細(xì)內(nèi)容,更多關(guān)于koa TS ESLint 搭建服務(wù)器的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
cwRsync提示password file must be owned by root when running as
今天在配置服務(wù)器的時(shí)候,用了rsync4.10版本,客戶端是2003服務(wù)器端是2008 r2 同步的時(shí)候提示password file must be owned by root when running as root問題,以前用老版本的時(shí)候沒見過,還好看了下面的文章解決了,特分享下2015-08-08
iSCSI服務(wù)器CHAP雙向認(rèn)證配置及創(chuàng)建步驟
這篇文章主要介紹了iSCSI服務(wù)器CHAP雙向認(rèn)證配置,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-04-04
生產(chǎn)服務(wù)器突然本機(jī)無法訪問本機(jī)IP的端口的問題及解決方法
生產(chǎn)服務(wù)器突然無法訪問自己本機(jī)IP地址的端口,通過localhost或者127.0.0.1都可以正常訪問,本文給大家分享生產(chǎn)服務(wù)器突然本機(jī)無法訪問本機(jī)IP的端口的問題及解決方法,感興趣的朋友一起看看吧2023-11-11
搭建hMailServer服務(wù)實(shí)現(xiàn)遠(yuǎn)程發(fā)送郵件的圖文教程
hMailServer是一個(gè)郵件服務(wù)器,通過它我們可以搭建自己的郵件服務(wù),本文主要介紹了搭建hMailServer服務(wù)實(shí)現(xiàn)遠(yuǎn)程發(fā)送郵件的圖文教程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08

