欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

koa?TS?ESLint搭建服務(wù)器重構(gòu)版過程詳解

 更新時(shí)間:2022年10月25日 10:52:38   作者:Bug生產(chǎn)隊(duì)的驢  
這篇文章主要為大家介紹了koa?TS?ESLint搭建服務(wù)器重構(gòu)版過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

初始化項(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/nodenode編碼輔助。

執(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 devenv.development.local >.env.local> .env.development> .env

npm run serverenv.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)境,developmentproduction,如果還要有測試等環(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)文章

最新評論