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/** --fix
Eslint 就會(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)文章
網(wǎng)站控制臺(tái)directadmin中文手冊 Linux下虛擬主機(jī)管理
特別注意:本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn),本站所提供的攝影照片,插畫,設(shè)計(jì)作品,如需使用,請與原作者聯(lián)系2009-11-11監(jiān)控服務(wù)調(diào)用微信API如何給自己發(fā)告警信息
本文是腳本之家的小編給大家介紹監(jiān)控服務(wù)調(diào)用微信API如何給自己發(fā)告警信息,當(dāng)監(jiān)控的設(shè)備發(fā)生故障時(shí)可以通過微信告警。感興趣的朋友可以參考下2015-09-09ssh服務(wù)器拒絕了密碼 請?jiān)僭囈淮我呀鉀Q(親測有效)
這篇文章主要介紹了解決ssh服務(wù)器拒絕了密碼 請?jiān)僭囈淮蔚膯栴},本文通過兩種方法給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08如何通過交換機(jī)連接服務(wù)器管理節(jié)點(diǎn)檢查AWS云狀態(tài)
這篇文章主要介紹了如何通過交換機(jī)連接服務(wù)器管理節(jié)點(diǎn)檢查AWS云狀態(tài),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-04-04HTTP常見的狀態(tài)碼HTTP Status Code
這篇文章主要介紹了HTTP常見的狀態(tài)碼HTTP Status Code2017-01-01ROS參數(shù)服務(wù)器中的理論模型與參數(shù)操作(C++)
在C++中實(shí)現(xiàn)參數(shù)服務(wù)器數(shù)據(jù)的增刪改查,均可以通過兩套API實(shí)現(xiàn)分別是ros::NodeHandle和ros::param,這篇文章主要介紹了ROS參數(shù)服務(wù)器--理論模型與參數(shù)操作(C++),需要的朋友可以參考下2023-08-08windows server 2003郵箱服務(wù)器安裝教程
這篇文章主要為大家詳細(xì)介紹了windows server 2003郵箱服務(wù)器的安裝教程,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04