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
這篇文章主要介紹了外貿(mào)網(wǎng)站屏蔽中國IP訪問的多種方法,本文通過nginx、iptables、javascript三種方法實(shí)現(xiàn),需要的朋友可以參考下2014-12-12
最近一個(gè)客戶服務(wù)器的mysql頻繁提示連接不上，修改了MYSQL的最大連接數(shù)還是這樣，于是開始問萬能的搜索引擎大人！終于在微軟找到了解決方案！2009-11-11
這篇文章主要介紹了acme.sh注冊免費(fèi)的ssl證書,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
當(dāng)在網(wǎng)站使用偽靜態(tài)的時(shí)候.顯示中文出現(xiàn)亂碼.不妨在你的偽靜態(tài)頁面中加上[QSA,NU,PT,L]試試2013-01-01
搭建hMailServer服務(wù)實(shí)現(xiàn)遠(yuǎn)程發(fā)送郵件的圖文教程
hMailServer是一個(gè)郵件服務(wù)器,通過它我們可以搭建自己的郵件服務(wù),本文主要介紹了搭建hMailServer服務(wù)實(shí)現(xiàn)遠(yuǎn)程發(fā)送郵件的圖文教程,具有一定的參考價(jià)值,感興趣的可以了解一下2023-08-08
閑來無事，組了個(gè)raid 0，感覺還不錯(cuò)，速度有明顯提高，加載游戲和啟動(dòng)程序速度有所改善，一般服務(wù)器用的多2013-06-06
這篇文章主要介紹了手把手教你搭建騰訊云服務(wù)器入門，文中通過圖文介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07