NPM plugins on Wayne's blog | 偉恩的部落格 | 技術博客

【Node.js】用 Typescript 與 Express 建立一個 server

Tue, 21 Feb 2023 00:00:00 +0000

最近前端離不開 typescript 後，我將原本用 javascript 撰寫的 mock server 改用 typescript 來撰寫；本篇就來記錄一下該如何使用 typescript 建立 node.js 的 Express！

使用 typescript 的好處

typescript 是為了彌補 javascript 不足的地方而誕生的語言，最主要的差別就在於宣告變數或是執行函數時需要指定 type ，不過這篇的重點在於在 node.js 中使用 typescript 建立 Express，所以就不描述太多 typescript 的特性了。

提供許多 OO pattern 的方法，如介面、繼承與抽象類別
強型別，能夠在編譯過程中先行找到一些錯誤
能夠編譯成不同版本的 JS
有 Declaration files 能夠使用 JS Library，因此不太需要擔心套件相容問題，像是 express 有 @type/express

建立 typescript 環境

進入初始化專案或現有專案的目錄

1
2
3
4


cd ~/project/node-express-project

# 初始化專案
# npm init

安裝 typescript 與 express

1
2


npm install --save-dev typescript @types/express @types/node
npm install --save express

設定 typescript

安裝 typescript 時，也會同時安裝將 typescript 編譯成 javascript 的編譯器 - tsc。

初始化 tsc

1

tsc --init

tsc --init 後會產生 tsconfig.json，當 typescript 透過 tsc 編譯成 javascript 時，就會遵循該檔案的設定進行編譯。

可能遇到的錯誤

tsc command not found

這個 error message ，請先在 global 安裝 typescript。

1

npm install -g typescript

若仍出現 “tsc command not found”，請在終端機輸入：

1

export PATH=”$PATH:/Users/{user name}/.npm-global/lib/node_modules/typescript/bin/”

再輸入 tsc -v ，確認 tsc 的版本即可。

tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "compilerOptions": {
 "target": "es5", // 選擇要編譯成哪種版本的 javascript
 "module": "commonjs",
 "strict": true, // 嚴格模式，啟用後需要指定函數參數的 type
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "outDir": "dist" // 將編譯過後的 js 檔放到 dist 資料夾中
 }
}

官網有 tsconfig.json 所有屬性的說明，請參考官網。

node.js 的設定

安裝完 typescript 環境後，接著我們來設定 node.js 的部分。

1. 新增入口檔案

1
2
3


mkdir src

touch src/app.ts # 入口檔案

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import express from 'express';
​
const app = express();
const port = 3000;
app.get('/', (req, res) => {
 res.send('The server is working!');
});
app.listen(port, () => {
 if (port === 3000) {
 console.log('true')
 }
 console.log(`server is listening on ${port} !!!`);
});

2. 安裝 nodemon 與 ts-node

nodemon：用於在每次儲存檔案後自動重啟 node，看到即時的修正。
ts-node：可以當作 node.js + typescript，用於直接在 node.js 執行 typescript 檔案。

在專案資料夾內安裝：

1

npm install --save-dev nodemon ts-node

【推薦】也可以直接安裝於全域環境：

1

npm install -g nodemon ts-node

3. 調整 package.json 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts",
 "build": "tsc --project ./",
 "test": "echo \"Error: no test specified\" && exit 1"
}

4. 執行 npm start

1

npm run start

start 後，nodemon 會監聽檔案是否有儲存的動作，並用 ts-node 來重啟。

npm run build 後則會出現一個 dist 資料夾來存放編譯過後的 js 檔。

BONUS：使用自定義的 tsconfig.json

補充一下，若當前專案包含前後端，而前端也使用 typescript 撰寫時，已經有一隻前端部分的 tsconfig.json，此時若需拆分 Express 的 tsconfig.json，可以透過 nodemon 的參數 --config {express tsconfig.json 檔案位置} 來調整。

先複製一份 tsconfig.json 到 Express src 資料夾內

1
2


# 先複製一份 tsconfig.json
copy tsconfig.json src/tsconfig.json

調整 start 的 scripts

package.json

1
2
3
4
5


"scripts": {
 "start": "nodemon src/app.ts --config src/tsconfig.json",
 "build": "tsc --project ./ --config src/tsconfig.json",
 "test": "echo \"Error: no test specified\" && exit 1"
}

使用 http

這邊講解用 http module 寫 node.js，如需直接使用 express 可以直接跳到使用 Express。

建立完 typescript 的環境後，引入 node.js 的核心套件之一：http module。 http module 能讓你建立一個 http server，當你的 code 在執行的時候，可以隨時監聽網路上發送到你 url 的所有 request，並將你寫的程式邏輯 response 回去。

載入 http module 其實跟 javascript 的寫法差不多，只是在 request 和 response 加上對應的型別： IncomingMessage、ServerResponse。

PS：在 node 無法直接使用 import，得透過 Babel 轉譯，可以在 tsconfig.json 中設定 module。

src/tsconfig.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


{
 "compilerOptions": {
 "target": "esnext",
 "module": "CommonJS", // 重點是這行
 "useDefineForClassFields": true,
 "strict": true,
 "jsx": "preserve",
 "outDir": "./dist",
 "importHelpers": true,
 "moduleResolution": "node",
 "experimentalDecorators": true,
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "sourceMap": true,
 "isolatedModules": false,
 "resolveJsonModule": true,
 "baseUrl": ".",
 "types": ["node"],
 "paths": {
 "@/*": ["src/*"]
 },
 "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
 "noFallthroughCasesInSwitch": true,
 "forceConsistentCasingInFileNames": true,
 "typeRoots": ["node_modules/@types", "src/types", "src"],
 "suppressImplicitAnyIndexErrors": true
 },
 "include": ["**/*.ts", "**/*.d.ts"]
}

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

如此一來每當有任何 client 對 http://localhost:5000 這個 url 發送 request 時，我們的 server 都會回應 “Hello world!” 給該 client。

取得 request 中的資料

取得 request body

大部分的時候，如果我們需要傳資料到 server，會發送 POST request ，並且將資料存在 body 當中，要在 node.js 取得 request 中的 body data 方法如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let body = [];
request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 })

如果直接將 chunk console.log 出來會發現是一段看不懂的資料：<Buffer 7b 0d 0a 20 20 20 20 22 74 65 73 74 22 3a 20 22 35 22 0d 0a 7d>，這是因為 http request 在發送給 server 的時候是按照順序一個 byte、一個 byte 以資料流的方式發送的，因此需要用 Buffer.toString() 轉換回原本的資料。

當我使用 POST method 發送 request 時，我的 server 端就會印出 request 中 body 的資料。

取得 request header

直接用 request.headers 取得 request 中的基本資料：

1
2
3
4
5
6
7


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 })

取得 request authorization

authorization 是我們習慣放置 token 的欄位，雖然在 postman 中是獨立的一欄，但事實上是存在 request 的 headers 裡的。

1
2
3
4
5
6
7
8


request
 .on('error', (err) => {
 console.error(err);
 })
 .on('end', () => {
 console.log(request.headers);
 console.log(request.headers.authorization);
 })

完整程式碼

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


import { createServer, IncomingMessage, ServerResponse } from 'http';

const port = 5000;

const server = createServer((request: IncomingMessage, response: ServerResponse) => {
 const { headers, method, url } = request;
 let body:any = [];
 request
 .on('error', (err) => {
 console.error(err);
 })
 .on('data', (chunk) => {
 body.push(chunk);
 })
 .on('end', () => {
 body = Buffer.concat(body).toString();
 console.log(body);
 console.log(request.headers);
 console.log(request.headers.authorization);
 })
 response.on('error', (err) => {
 console.error(err);
 });
 response.writeHead(200, {"Content-Type": "text/plain"});
 response.end('Hello world!');
});

server.listen(port);
console.log(`server is running on http://localhost:${port}`)

使用 Express

接著使用 Express 來改寫一下。

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


import express, { Express, Request, Response } from 'express';

const port = 5000;

const app: Express = express();

app.get('/', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('Homepage');
})

app.get('/articles', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('All articles are here!');
})

app.get('/about-me', (request: Request, response: Response) => {
 response.type('text/plain');
 response.send('My name is Jimmy.');
})

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

加入 Route 與 Controller

當專案越長越大後，將所有 routes 和邏輯都寫在 app.ts 是個很難維護的做法，因此大多數的專案都會將 routes 和 controllers 獨立出來，把商業邏輯寫在 controllers 中。

Controller：請求經過 router 分配過後，會交由 controller 負責處理商業邏輯，並回傳對應的 response。
Route：我們要將使用者的請求，依照其進入的 Url 分配給不同的 Controller。

Controller

建立 controllers。

src/controllers/api-controllers.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


import { Request, Response, NextFunction } from 'express';

export class ApiControllers {
 getHomePage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('Homepage');
 }

 getAboutPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('My name is Jimmy.');
 }
}

Route

建立 routes。

src/routes/api-routes.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import express, { Router, Request, Response, NextFunction } from 'express';
import { ApiControllers } from '../controllers/api-controllers';

const apiControllers = new ApiControllers;

export class ApiRouter {
 router: Router;
 constructor() {
 this.router = express.Router();
 this.initializeRoutes();
 }

 initializeRoutes() {
 this.router.get('/', apiControllers.getHomePage);
 this.router.get('/articles', apiControllers.getArticlesPage);
 this.router.get('/about-me', apiControllers.getAboutPage)
 }
}

調整 src/app.ts

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


import express, { Express, Request, Response, NextFunction } from 'express';
import { ApiRouter } from './routes/api-routes';

const port = 5000;

const app: Express = express();
const apiRouter = new ApiRouter;

app.use((request: Request, response: Response, next: NextFunction) => {
 response.setHeader("Access-Control-Allow-Origin", "*");
 response.setHeader(
 "Access-Control-Allow-Headers",
 "Origin, X-Requested-With, Content-Type, Accept, Authorization"
 );
 response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");

 next();
});

app.use('', apiRouter.router)

app.use((request: Request, response: Response) => {
 response.type('text/plain');
 response.status(404)
 response.send('Page is not found.');
})

app.listen(port, () => {
 console.log(`server is running on http://localhost:${port}`)}
);

檔案結構：

將 routes 拆分成多個檔案

先建立一個 route 的 abstract class

src/routes/route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;

 public getRouter() {
 return this.router;
 }
}

export default Route;

新增 AuthRoute 與 AuthController

src/controllers/AuthController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class AuthController {
 echo(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('echo');
 }
}

export default AuthController;

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

新增 ArticleRoute 與 ArticleController

src/controllers/ArticalController.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


import { Request, Response } from "express";

class ArticleController {
 getArticlesPage(request: Request, response: Response, next: NextFunction) {
 response.type('text/plain');
 response.send('All articles are here!');
 }
}

export default ArticleController;

src/routes/article.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

建立 router 並加載各個檔案的 route

移除原先的 src/routes/api-routes.ts，統一改成使用 src/routes/router.ts。

src/routes/router.ts

1
2
3
4
5
6
7
8


import Route from "./route";
import AuthRoute from "./auth.route";
import ArticleRoute from "./article.route";

export const router: Array<Route> = [
 new AuthRoute(),
 new ArticleRoute()
]

改寫 src/app.ts

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getRouter());
}

module.exports = app;

前綴 Prefix

同一個 route 檔案常常會有相同的 prefix url，例如說 auth route 可能會有：

POST auth/login
POST auth/logout
POST auth/forgetPassword
…

我們在 Route class 中加入一個新的資料成員 prefix，用來設定每個 route 的前綴網址：

src/routes/route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19




import { Router } from "express";

abstract class Route {
 protected router = Router();
 protected abstract setRoutes(): void;
 protected prefix: string = '/';

 public getRouter() {
 return this.router;
 }

 public getPrefix() {
 return this.prefix;
 }
}

export default Route;

在各個 Route 的建構子中修改它：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import AuthController from "../controllers/AuthController"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

src/routes/article.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import ArticalController from "../controllers/ArticalController"
import Route from "./route";

class ArticleRoute extends Route{
 private articalController = new ArticalController();

 constructor() {
 super();
 this.prefix = '/articles';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/articles', this.articalController.getArticlesPage);
 }
}

export default ArticleRoute;

最後，在 app.ts 中，載入 router 時加入 prefix 的設定：

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import express from 'express';
import { router } from "./routes/router";

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

如此一來，原本是 /login 的 url，在加上 prefix 之後，就會變成 /auth/login，而其他在 AuthRoute 定義的 url 也都會變成 /auth/*、在 ArticleRoute 定義的 url 也都會變成 /articles/*。

Middleware

在 Express 中，有三種可以嵌套 middleware 的方式：

應用到單一 url
應用到單一 route 檔案
全域使用，每個請求都會經過這個 middleware

我們先寫一個簡單的 middleware，他只看請求的 header 裡面有沒有 Authorization，若沒有的話會回傳 status code 401：

src/middleware/AuthMiddleware.ts

1
2
3
4
5
6
7
8
9


import { Request, Response, NextFunction } from "express";

export function AuthMiddleware(req: Request, res: Response, next: NextFunction) {
 if (!req.header('Authorization')) {
 return res.status(401).send('unauthorized');
 }

 next();
}

套用在單一 url

若你想套用在單一 url，只需要放在 router.METHOD 的第二個參數即可：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', AuthMiddleware, this.authController.echo);
 }
}

export default AuthRoute;

套用在單一 route 檔案

套用在單一 route 檔案，則在該 route class 的建構子加入 (必須在 setRoutes() 之前)：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


import AuthController from "../controllers/AuthController"
import AuthMiddleware from "../middleware/AuthMiddleware"
import Route from "./route";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.router.use(AuthMiddleware); // 必須在 setRoutes() 之前
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', this.authController.echo);
 }
}

export default AuthRoute;

全域使用

全域使用的話，就在 app.ts 裡面加上：

src/app.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import express from 'express';
import { router } from "./routes/router";
import AuthMiddleware from "../middleware/AuthMiddleware"

const app: express.Application = express();

app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(AuthMiddleware);

// load router
for (const route of router) {
 app.use(route.getPrefix(), route.getRouter());
}

module.exports = app;

Validator

若要驗證 Request body 或 query string 的內容，建議可以使用 express-validator 套件，裡面有各式各樣的驗證用 middleware 可供使用。

1

npm install express-validator @types/express-validator

假設我們的登入表單需要有 username 和 password 兩個欄位，且最少要有四個字。

我們能夠將這個驗證寫成 request 檔案：

src/requests/AuthRequest.ts

1
2
3
4
5
6
7
8


import { check } from "express-validator";
import { showApiError } from "../middleware/AuthMiddleware";

export const loginRequest = [
 check('username').exists().isLength({min: 4}),
 check('password').exists().isLength({min: 4}),
 showApiError
];

改寫 AuthMiddleware ：

src/middleware/AuthMiddleware.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { Request, Response, NextFunction } from "express";
import { validationResult } from "express-validator";

export function showApiError(req: Request, res: Response, next: NextFunction) {
 const errors = validationResult(req);
 if (!errors.isEmpty()) {
 return res.status(400).json({ errors: errors.array() });
 }

 next();
}

showApiError 是為了在有 input 錯誤發生時，能夠回傳對應的錯誤訊息而使用的 middleware，如果沒有它的話，validator 不會回傳錯誤訊息。

接著我們在 auth route class 裡面載入這個 request：

src/routes/auth.route.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import AuthController from "../controllers/AuthController";
import Route from "./route";
import { loginRequest } from "../requests/AuthRequest";

class AuthRoute extends Route{
 private authController = new AuthController();

 constructor() {
 super();
 this.prefix = '/auth';
 this.setRoutes();
 }

 protected setRoutes() {
 this.router.get('/login', loginRequest, this.authController.echo);
 }
}

export default AuthRoute;

如此一來 POST /login 的請求就會驗證 request body，當我的 username 輸入太短時，會得到以下錯誤：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "errors": [
 {
 "value": "123",
 "msg": "Invalid value",
 "param": "username",
 "location": "body"
 }
 ]
}

因為 request 其實就是 middleware 的陣列，因此若要嵌套其他 middleware 時，使用 Array merge 即可。

使用 Node.js 串接 MongoDB (含CRUD)

Mon, 06 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

資料庫的連結對於網頁是不可或缺的，無論是 MongoDB 或是 Django，這種 NoSQL 的資料庫構建套件都十分的受程式設計師的歡迎，由於其不用再去學 SQL 格外的構築語法，NoSQL 就成為了廣為人知的開源資料庫，最近專案正好使用到 MongoDB，本篇來介紹一下 MongoDB、MongoDB 的安裝方式，以及使用 Node.js 串接 MongoDB 的 CRUD。

MongoDB 資料庫簡介

MongoDB

MongoDB 是什麼？

MongoDB 是一種文件導向資料庫管理系統，由 C++ 撰寫而成，是一個以分散式檔案儲存為基礎的資料庫，旨在 Web 應用提供可擴充的高性能資料儲存解決方案。

它是 10gen 開發的 NoSQL (Not only SQL - 不只有 SQL)。
不是關聯式資料庫，沒有 Schema。
它是用來處理巨量資料的資料庫，這個資料庫是以文件導向儲存(Document Oriented Storage)的資料庫，以 key:value 表示，儲存格式與 JSON 完全一樣。
簡潔的文件模型。
容易水平擴展。
三層式的結構：

資料庫(Database)
集合(Collection)
文件(Document)

MongoDB 的層級架構

MongoDB 世界的層級觀念，分別由大而小：

Database (資料庫)： 資料庫，儲存所有「表」跟資料的地方，在一個 MongoDB 伺服器中通常會有一至多個 Database，通常將不同的應用放在不同 database 中。
Collection (集合)：就是資料表，概念好比關聯式資料庫的 Table。通常一個 databse 中會有數個 collection。
Document (文件)：就是一筆資料，概念就如同關聯式資料庫的 Row。通常一個 collection 中會有數筆 document。也因此我們稱 MongoDB 是 document database。

MongoDB 資料 v.s. 關聯式資料庫

關聯式資料庫(RDBMS)	MongoDB
Database	Database
Table	Collection
Tuple/Row	Document
Column	Field
Table Join	Embedded Documents
Primary Key	Primary Key (如果沒有設定，mongodb會自動給予預設主鍵值 _id 欄位)

BSON？

BSON 就是 JSON 格式的 key-value 組合，採用 JSON 的二進位表示。

MongoDB 在儲存資料時，都必須採用 BSON 格式做處理。

使用 BSON 的優點包含：

在空間儲存上較有效率
有更多 type（資料格式）可以使用：如 ObjectId、Regular Expression、Timestamp 等，都是 BSON 支援的格式

我們以網站結構範例來示範：

會員資料

1
2
3
4
5
6
7
8
9


{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
...

因為 MongoDB 的 schemeless 特性，當我們突然想為其中一個 user 紀錄手機，只需要在那個 user 的 document 中加入「手機」這個新欄位就行，其他 user 完全不受影響。

會員資料

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 "email": "jddj4541@gmail.com",
 "password": "54875487"
},
{
 "email": "jddj4541@gmail.com",
 "password": "54875487",
 "phone": "0912345678"
},
...

實際上 BSON 支援的 type 有很多，這邊我們再舉一個包含多種 type 的 document 當作範例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


{
 "_id": ObjectId("5099803df3f4948bd2f98391"), // _id 屬性是 ObjectId，常作為主鍵
 "name": { "first": "Alan", "last": "Turing" }, // name 屬性是 object
 "email": "jddj4541@gmail.com",
 "password": "54875487",
 "phone": "0912345678",
 "birth": new Date('Jun 23, 1912'), // bitrh 屬性是日期
 "death": new Date('Jun 07, 1954'),
 "contribs": [ "Turing machine", "Turing test", "Turingery" ],
 "views": NumberLong(1250000)
}

在 Windows 上安裝 MongoDB

在安裝前，我們先來確認 Windows 版本。

在終端機輸入，並執行：

1
2
3
4


wmic os get osarchitecture

> OSArchitecture
> 64-bit # 顯示出所用的 OS 是哪一種結構。

接著，我們去 MongoDB Downlad Center 下載所需套件：

下載後，可以參考 Install on Windows 我們就依此文件，做以下的操作：

安裝流程

Step 1.

Step 2.

Step 3. 可以選 Custom 安裝，這裡就可以設定安裝的路徑。

Step 4. 系統預設是安裝在 C:\Program Files\MongoDB\Server\6.0\ 那我們這裡就依照官方的，不改。

Step 5.

Step6. 完成

Bonus(一)：下載 mongosh.exe

前往安裝目錄下 /bin 目錄中，會發現沒有 mongo.exe 檔案，原因在於：MongoDB 6.0 以後做出了重大改變，已經不再預設為你安裝 shell 工具，因此需要安裝一個額外的 shell：Install mongosh – MongoDB Shell，這個工具被稱為 mongosh。

前往頁面下載 mongosh.exe，下載後將解壓縮出來的 bin 資料夾內的檔案，複製到安裝目錄下 /bin 目錄中。

直接點擊 mongosh.exe 即可進入 MongoDB shell 界面。

Bonus(二)： “mongo” 不是內部或外部命令

要執行 MongoDB Shell，還需要回到 /bin 目錄底下，無法在任意地方執行 MongoDB Shell，原因：環境變數未設定。

設定步驟：

“開始"選單點選右鍵 -> 系統 -> 進階系統設定。
點選"進階” -> 環境變數。

系統變數的 Path，點擊"編輯"。
將 C:\Program Files\MongoDB\Server\6.0\bin 加入原本字串後方！

(新版的 Windows，C:\... 前面可以不用加分號 ;C:\...)

確定後即可在任意地方，啟動你的 MongoDB、MongoDB Shell。

Bonus(三)：移除 MongoDB 服務

有安裝服務，就也有移除服務，如果你決定要移除 MongoDB 服務，可以在終端機執行：

1
2
3


"C:\Program Files\MongoDB\Server\6.0\bin\mongod.exe" --remove
# or
# mongod --remove

執行啟動 MongoDB

MongoDB 預設資料庫存放位置是 ${安裝目錄}\data\db，所以我們可以建立這樣的資料庫路徑：

在 C:\ 以 Command pormpt 執行：

1

mkdir \MongoDB\data\mydb

接著執行：

1

cd "C:\Program Files\MongoDB\Server\6.0\bin"

目前，我們位在 C:\Program Files\MongoDB\Server\6.0\bin >

輸入：

1

mongod --dbpath c:\MongoDB\data\db

啟動同時，指定資料庫存放位置！

接著，出現像這樣的畫面，表示 MongoDB 已經正常啟動了！

你就可以開始使用了！

可以參考一些文件 Getting Started 來做測試。

Note：關於資料庫存放位置，其實可以自己設定好一個資料夾位置，指定過去就好囉！不限於一定得在 \data\db 之下！

使用 MongoDB Shell

連線資料庫

資料庫啟動以後，我們開啟另一個終端機執行：

1
2


mongosh
# .exe 可以不用

啟動 MongoDB Shell 環境，當我們看到如圖畫面，代表連線 MongoDB 成功：

查看與使用資料庫

我們可以做一些簡單的查詢，比方 show dbs 可以看到底下有哪些資料庫。

要使用資料庫 TestDB，可以用 use TestDB

如圖：

關閉資料庫

離開 MongoDB Shell，使用 exit
關閉 MongoDB 服務、關閉資料庫、中斷連線，在 admin 資料庫下，使用 db.shutdownServer()

觀看指令資料庫裡面的集合

1

show collections

新增一筆資料 `inserOne`

1
2
3


db.rooms.insertOne(
 { name: "單人房", price: 1000, rating: 4.5 }
)

新增多筆資料 `insertMany`

1
2
3
4
5
6


db.rooms.insertMany(
 [
 { name: "豪華單人房", price: 1500, rating: 4.3 },
 { name: "雙人房", price: 2000, rating: 4.8 },
 ]
)

尋找集合裡面的資料

1

db.collections.find()

一般搜尋：
- db.<集合名稱>.find()
- 尋找對應屬性：db.collections.find({屬性名稱:屬性值})
- 模糊搜尋：db.rooms.find({"name":/雙/})
- 數值區間：db.collections.find({屬性名稱:{$lte:400}})
- 複合條件：db.collections.find({屬性名稱:{$lte:400},rating:{$gte:4.8}})
常用語法：
- project 保護欄位：db.rooms.find({"name":/雙/},{"_id":0})
- 搜尋陣列裡面的值：db.rooms.find({"payment":{$in:["信用卡"]}}

運算子	說明
$eq	等於
$gt	大於
$lt	小於
$gte	大於等於
$lte	小於等於
$in	存在某個值
$nin	不存在某個值
or	或
and	與

舉個例子：

1
2
3
4
5
6
7
8


db.rooms.find(
 { $and:
 [
 { price: { $lte:1500 } },
 { rating: { $gte:4.5 } }
 ]
 }
)

修改(updateOne)

updateOne

replaceOne() 只能替換整個文件；updateOne() 允許更新欄位。

1
2
3
4
5
6
7
8


db.rooms.updateOne(
 {
 "_id": ObjectId("621edf99a20aa7506a116f9a")
 },
 {
 $set: { name: "修改雙人房" }
 }
)

修改多個值

修改多個值 updateMany(filter 篩選 > $set 更換設定)

1
2
3
4


db.rooms.updateMany(
 { rating: { $gt:4.5 } },
 { $set: { price:300 } }
)

替換整個文檔：`replaceOne`、`replaceMany`

1
2
3
4
5
6
7


db.collection.replaceOne(filter, replacement, options)

-- 舉個例子：
db.rooms.replaceOne(
 { "_id": ObjectId("621edf99a20aa7506a116f9a") },
 { name: "yes~" }
)

刪除多個文件：`deleteMany(filter)`

1
2
3


db.rooms.deleteMany(
 { rating: { $gte:4.3 } }
)

資料集結購

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


[
 {
 "rating": 4.5,
 "price": 1000,
 "name": "標準單人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.3,
 "price": 1500,
 "name": "豪華單人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.8,
 "price": 2000,
 "name": "標準雙人房",
 "payment": ["信用卡","ATM"]
 },
 {
 "rating": 4.7,
 "price": 2500,
 "name": "豪華雙人房",
 "payment": ["ATM"]
 },
 {
 "rating": 4.0,
 "price": 3000,
 "name": "標準四人房",
 "payment": ["現金"]
 },
 {
 "rating": 3.5,
 "price": 10000,
 "name": "總統套房",
 "payment": ["現金"]
 }
]

查詢指令使用，好用的 `help`

配置 MongoDB 服務

如果，我們想要將操作 MongoDB 的記錄，寫進 log 裡。

我們先建立一個放置 log 的資料夾，為了有規律的放置檔案：

C:\MongoDB\data\db 放置 database
C:\MongoDB\data\log 放置 log

所以，建立一個資料夾 log

1
2


# 於 C:\MongoDB\data 下
mkdir log

接著，我們要建立一個 config 檔案，它是 MongoDB 的配置檔，內容可以配置 db 路徑(storage.dbPath)及 log 寫入檔案(systemLog.path)。

C:\MongoDB\data\log\mongod.cfg

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


storage:
 dbPath: C:\MongoDB\data
 journal:
 enabled: true

systemLog:
 destination: file
 logAppend: true
 path: C:\MongoDB\data\log\mongod.log

net:
 port: 27017
 bindIp: 127.0.0.1

接著，我們以系統管理員身份啟動終端機

1
2


# 安裝設定(cfg 檔位置必須為絕對路徑，否則會報錯)
mongod --config "C:\MongoDB\data\log\mongod.cfg" --install

接著，我們就可以直接在任意位置，以簡單的方式，啟用服務，而不用每次啟動，都要指向資料庫位置。

不再用 mongod –dbpath C:\MongoDB\data\db 這一長串東西。

啟用服務：

1

net start MongoDB

停用服務：

1

net stop MongoDB

如圖：

每執行服務，都會寫一次 log 檔，在我們當初配置的資料夾。

以上，我們已經完成了 MongoDB 的安裝與執行，再來說明使用 Node.js 串接 MongoDB 做 CRUD。

Node.js 串接 MongoDB 做 CRUD

這邊先著重 Node.js 概括的學習，閒有餘力，再深入 MongoDB。

關於 MongoDB 比較基礎且重要的，可以先參考：

MongoDB CRUD Operations

它裡面教你如何在 MongoDB 裡新增、讀取、更新、刪除的基本資料操作。

這邊我直接參考 access-mongodb-in-nodejs 完成此篇這一系列的 Node.js 學習。

那我們開始吧！

NPM 安裝 MongoDB driver

我們需要安裝 mongodb-driver，在終端機輸入：

1
2
3


npm install mongodb -g
cd myapp
npm install mongodb --save

我們打開 package.json 看，安裝了 mongodb: "5.0.0" (注意，這裡安裝的是 driver，不是 MongoDB 喔！)

啟動 MongoDB Server

接著，我們要啟動我們的 MongoDB Server，可在終端機輸入：

1
2
3


# 也可以直接在 myapp 裡建一個測試的數據資料庫存放位置
mkdir testdb
mongod --dbpath c:\myapp\testdb

或是，如果已經設定好 config 的 MongoDB service，那就直接使用：

1

net start mongodb

註：這邊可能要用系統管理員身份執行終端機才可以正確執行！

Node.js 連接 MongoDB

mockserver.js

1
2
3
4
5
6
7
8
9


let MongoClient = require('mongodb').MongoClient;

// Connect to the db
MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 if(err) throw err;
 // Write databse Insert/Update/Query code here..
 console.log('mongodb is running!');
 db.close(); // 關閉連線
});

這個例子裡，我們載入 MongoDB module，並且使用 MongoClient 物件。

接著，使用 MongoClient.connect() 方法，以取得 MongoDB 資料庫的引用。

其中，URL 的部份，"mongodb://localhost:27017/mymondb"，指向你之前指定的 MongoDB 資料夾位置 C:\myapp\testdb。

connect() 方法，會回應一個 database 參考，如果所描述的 database (這裡的例子叫做 mymondb) 存在，就連線；無就自動新增。

我們來看看，以上例子，如果有成功連線時的執行結果：

當我們建立了 Node.js 與 MongoDB 連線後，可以使用 connect() 裡的回呼函式其 DB 參數，開始做一些新增Insert(Create)、更新Update、查詢Query(Retrieve/Read)、刪除Delete 資料的動作。

新增(Insert/Create)資料

現在，我們來為我們的資料庫新增一些資料。

moncreate.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {

 if(err) throw err;
 //Write databse Insert/Update/Query code here..

 db.collection('Persons',function(err, collection) {
 collection.insert({ id:1, firstName:'Steve', lastName:'Jobs' });
 collection.insert({ id:2, firstName:'Bill', lastName:'Gates' });
 collection.insert({ id:3, firstName:'James', lastName:'Bond' });

 collection.count(function(err, count) {
 if(err) throw err;
 console.log('Total Rows:' + count);
 });
 });
 db.close(); // 關閉連線
});

在這個例子中，我們用 db.collection 方法去新增並且獲取 collections 的一些資訊，如總筆數。

別忘了，在介紹 MongoDB 與關聯式資料庫的關係時，我們知道 collection 其實就是 table。

而這個例子裡，我們在 mymondb 資料庫建立了一個 Persons - collection(資料表)，並且，為這 Persons 資料表新增了 3 筆資料，我們在這裡叫 documents (列)。

結果如圖：

我們也可以使用 Mongo Shell，查詢：

更新(Update)資料

做完了新增，如果我們想要更新其中 id == 1 的資料。

monupdate.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 db.collection('Persons',function(err, collection) {
 // collection.update
 // 第一個參數是要更新的條件
 // 第二個參數 $set:更新的欄位及內容
 // 第三個參數 writeConcern
 // 第四個參數執行 update 後的 callback 函式
 collection.update(
 { id: 1 },
 { $set: { firstName: 'James', lastName: 'Gosling'} },
 { w: 1 },
 function(err, result) {
 if(err) throw err;
 console.log('Document Updated Successfully');
 }
 );
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，並且在 Mongo Shell 可以看到更新前與更新後的資料，如圖：

關於第三個參數 - writeConcern

這個網站有詳細說明，可以去參考看看，我們這裡使用，常用的 {w:1} 即可，不用也沒差！

刪除(Delete)資料

現在，我們想要刪除 id == 2 的 Document(Row)。

mondelete.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb",function(err, db) {
 db.collection('Persons', function(err, collection) {
 collection.remove(
 { id: 2 },
 { w: 1 },
 function(err, result) {
 if(err) throw err;
 console.log('Document Removed Successfully!');
 }
 );
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，並且在 Mongo Shell 可以看到刪除前與刪除後的資料，如圖：

查詢(Query)資料

維持 Persons 新增後的狀態！即原本的3筆！現在，我們想要找 firstName == “Bill”。

monquery.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let MongoClient = require('mongodb').MongoClient;

MongoClient.connect("mongodb://localhost:27017/mymondb", function(err, db) {
 db.collection("Persons", function(err, collection) {
 collection.find({ firstName: "Bill" }).toArray(function(err, items) {
 if(err) throw err;
 console.log(items);
 console.log("We found " + items.length + " results!");
 });
 });
 db.close(); // 關閉連線
});

我們在終端機執行 node，可以看到被擷取出來的結果，如圖：

!!重要!!
關於更多 Collection 的操作，可以參考：Collection Methods，特別在使用查詢 find，有不同於以往 SQL 的使用語法。

3 種使用 Regex 正則表達式對資料夾中的文字檔進行搜尋與取代的方法

Fri, 03 Feb 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站
 參考網站

在整理開發環境的時候，經常會有批次調整檔案內容的需求，我今天特別整理了 3 種不同的解決方案，這些方法都可以看情況使用！

Linux / WSL

在 Linux 環境下使用 find 與 sed 幾乎是標準方案，這套組合拳確實快速又強大！👍

1

find src -name '*.ts' -type f -exec sed -i 's/pattern\([s]\)/replacement\1/g' '{}' \;

透過 sed 來取代內容的話，在 Regex 語法上稍微有點不同，左邊的小括弧要加上反斜線跳脫 ( $ 或 $ )，而 backreference 也要用反斜線來表達 ( \1、\2、… )

Windows (PowerShell)

在 Windows 上面使用 PowerShell 來寫腳本，可讀性會比較好！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


Get-ChildItem -Path 'src' -Include '*.ts' -Recurse -Exclude reparsepoint | ForEach-Object {
 $current_file = "$($_.FullName)"
 $replace_file = "$($_.FullName).new"

 # 這裡 Get-Content 前後的小括弧很重要，一定要加上才能得到 String 的結果，指定 utf8 編碼也十分重要！
 (Get-Content -LiteralPath $current_file -Encoding utf8) -replace 'pattern([s])', 'replacement$1' |
 Out-File -Encoding utf8 -LiteralPath $replace_file

 Move-Item -LiteralPath $replace_file -Destination $current_file -Force
}

Node.js

如果我們要在前端專案中整合字串取代的工作，在 package.json 的 scripts 直接取代檔案，同時又要兼顧跨平台的話，採用既有的 npm 套件就會來的方便許多。這裡我找了個 replace-in-file 套件還不錯！👍

先安裝到專案中：

1

npm install -D replace-in-file

取代內容可以這樣寫，也可以使用超好用的 Glob 語法(e.g. src/**/*.ts)：

1

npx replace-in-file "/pattern([s])/g" "replacement$1" src/**/*.ts --isRegex --encoding=utf-8

前端效能調校：使用 Partytown 將笨重的 JavaScript 放到 Web Workers 執行

Mon, 30 Jan 2023 00:00:00 +0000

參考網站
 參考網站
 參考網站
 參考網站

前端效能調校的技法多如牛毛，但最明顯的效能殺手不外乎是 JavaScript 佔用 Main Thread 而導致頁面無法回應的狀況了。最近研究 Partytown 這個函式庫，他用了一個非常巧妙的技巧，把部分 JS 自動切換到 Web Workers 背景執行。這篇文章我就來分享如何將 Partytown 安裝到任意網站中。

如何安裝 Partytown 到任意網站

透過 Partytown CLI 下載 Partytown 函式庫

以下命令會在當前目錄建立一個 ~partytown 資料夾(建議統一用這個名稱)：

1

npx "@builder.io/partytown" copylib ~partytown

將 ~partytown 資料夾上傳到網站根目錄

如果是 ASP.NET Core 的話，可以上傳到 wwwroot 目錄下，或是在 ASP.NET Core 專案根目錄輸入以下命令：

1

npx "@builder.io/partytown" copylib "wwwroot\~partytown"

如果是 Node.js 的話，可以上傳到 public 目錄下，或是在 ASP.NET Core 專案根目錄輸入以下命令：

1

npx "@builder.io/partytown" copylib "public/~partytown"

你也可以設定好 package.json 加入到建置流程中：

1

npm install "@builder.io/partytown"

package.json

1
2
3
4
5
6


{
 "scripts": {
 "build": "npm run partytown && ng build",
 "partytown": "partytown copylib public/~partytown"
 }
}

總之，上傳到網站根目錄就對了！(詳見 Copy Library Files 有更完整的說明)

調整網頁中的 <script> 標籤語法

請將以下：

1

<script>...</script>

全部修改為：

1

<script type="text/partytown">...</script>

就大功告成！

使用的注意事項

雖然 Partytown 函式庫的初衷非常理想，就是管理第三方 JS 函式庫(third-party scripts)，徹底降低 JS 佔用 Main Thread 的狀況。但實際上還是有不少 JS 檔案在透過 Partytown 載入到 Web Workers 執行後就掛掉了，所以實際上 Partytown 並不適用於所有 JS 執行，因此不太建議把網站上所有 JS 都改用 Partytown 來載入。

除此之外，目前 Partytown 因為有用到 Atomics API 的關係，它的相容性確實有些限制，有些太舊的手機版本是沒有支援的！詳見 JavaScript built-in: Atomics | Can I use 說明。

最後要提醒大家的地方，就是使用 Partytown 的 Trade-Offs (權衡)。因為這個世界沒有銀子彈，有一好就沒兩好，使用 Partytown 不見得適用所有的網頁開發情境。以下是 Partytown 官方認為不適用的地方：

大量的 DOM 操作會被節流(Throttled DOM Operations)

由於在 Web Workers 無法直接存取 DOM，所以 Partytown 會透過 onmessage 事件傳給 Main Thread 來處理，所以 DOM 處理的速度反而會變慢！

只要是 UI 特別吃重的 JS 函式庫，處理大量 DOM 操作，都不太適合用 Partytown 來管理

如果執行實際效果不理想，其實就這個 JS 不要用 Partytown 即可！

若第三方函式庫在載入時沒有設定 CORS Headers 的話，透過 Partytown 是無法載入的

必須透過 Proxying Requests 從**相同來源(Same-origin)**載入！

事件處理只要用到 event.preventDefault() 就會失效

透過 Web Workers 執行 event callback 會導致 event.preventDefault() 的行為失效！

若透過 Partytown 管理的 JS 動態建立 iframe 的話，document.cookie、localStorage 與 sessionStorage 都會讀不到！

基本上程式不會報錯，但就是沒效果，所以使用上要注意！

透過 setInterval() 不斷的對 document 進行 DOM 操作

這也會失去使用 Partytown 的價值，因為頻繁的 DOM 操作反而會讓 Web Workers 過於忙碌！

目前確定很適合用 Partytown 來管理的第三方函式庫，從官網是有整理出來的，大家可以多多利用，照著官網設定即可：

【VueUse】一款基於 Vue Composition API 的函式工具集

Fri, 30 Dec 2022 00:00:00 +0000

參考網站
 參考網站

VueUse 是什麼？

VueUse 作者為 Anthony Fu，是一款基於 Vue 組合式 API (Composition API) 的函數工具集，其中 VueUse 主要特色可以分為以下幾點：

Vue 2 和 Vue 3 都支援
採取 Tree Shaking 結構，只會打包引入的程式碼
支持各種套件
可配置事件過濾器和目標

以上是官方網站關於它的定義。

首先，它基於 Vue Composition API (組合式API)，只有在支持組合式 API 的環境下，才可以正常使用它。

什麼是組合式 API？

然後，它是一款函數工具集(可類比為 lodash.js / ramda.js)

簡單來說，這是一個能讓你更早下班的工具庫。

VueUse 開源嗎？現狀如何？

當然開源！ github/vueuse

社區活躍度：社區非常活躍，截止 2021 年 11 月，一直有 mr 被合入主線。

被引用情況：截止 2021 年 11 月 13 日，npm 上可查詢到依賴它的庫就有 172 個，其中包括著名UI庫：Element-Plus

Vue 的著名開源作者 Evan You 也是此庫的金牌贊助商。

安裝 VueUse

NPM 或 YARN：

1
2
3


npm i @vueuse/core
# or
yarn add @vueuse/core

CDN 引入：

這邊注意 shared 一定要在前面

1
2


<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>

注：VueUse 借助 vue-demi 的強大功能，可以在一個包中同時適用於 Vue 2、3！

Vue 3 Demo

Vue 2 Demo (Vue CLI)

使用 Vue CLI

另外，要注意庫的版本：

從 v6.0 版本起，vue3 需要 vue >= v3.2，vue2 需要依賴 @vue/composition-api：@vue/composition >= v1.1。

VueUse 能做什麼？

能做的那可太多了，但總體上分為以下幾個類別提供工具函數：

Animation 動畫
Browser 瀏覽器
Component 組件
Formatters 格式化
Sensors 傳感器
State 狀態機
Utility 實用方法
Watch 監聽
Misc 各式各樣的雜項

這麼列了一遍，估計你還是很懵，但因為方法實在太多，也不可能一個個都列出來。

那我就舉幾個有代表性的例子，帶你快速理解這些方法大概是做什麼的，有什麼特點。

例子(一)：useMouse

1
2
3
4
5
6
7
8
9


<template>
 <div id="app">
 <h3>Mouse: {{x}} x {{y}}</h3>
 </div>
</template>
<script setup lang="ts">
 import { useMouse } from '@vueuse/core'
 const { x, y } = useMouse()
</script>

效果：

Wooooow~~~ 這可太簡單易用了！

經過源碼閱讀，我們可以發現，這短短的一個方法，至少做了以下這些事：

創建了 x 和 y 這兩個響應式對象(Ref)
給 window 添加了鼠標事件監聽，將鼠標的坐標實時賦給 x、y (並且還做了移動端兼容)

如果這些邏輯放到頁面裡，至少需要 6 行代碼，這些代碼後期都會增加維護人員理解頁面的成本，而現在，你只需要一行代碼。

除此之外，該方法還有組件式用法，適合更熱愛標籤的盆友

1
2
3
4


<UseMouse v-slot="{ x, y }">
 x: {{ x }}
 y: {{ y }}
</UseMouse>

例子(二)：useInterval

顧名思義，這個方法是對延时重複調用能力的封裝。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<script setup lang="ts">
import { useInterval } from '.'
const { counter, pause, resume } = useInterval(200, { controls: true })

// counter 一個 Ref 對象，它是響應式的，counter.value 等於已經計算的次數
// pause() 暫停
// resume() 恢復
</script>

<template>
 <div id="APP">
 <p>Interval fired: {{ counter }}</p>
 </div>
</template>

效果：

是不是很好用？相比手寫 setInterval 更為便捷。

如果徒手實現這樣一整套方法，多少行暫且不說，我們需要在業務中寫下大量的邏輯代碼。

而眾所周知：

寫的代碼越多，出 Bug 的可能性越大，維護和理解的難度就越高。從這個角度看，這個庫確實是一個合格的函數工具集。

例子(三)：useClipboard

以複製文字為例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


<script setup>
 import { useClipboard } from '@vueuse/core'; // 只需要引入所使用到的 API
 import { ref } from 'vue'
 const input = ref('我是 Winnie')
 const {
 text, // 複製的值
 isSupported, // 瀏覽器有無支援
 copy, // 方法
 copied
 } = useClipboard()
</script>

<template>
<div v-if="isSupported">
 <h3>useClipboard</h3>
 <p>複製內容：{{ input }}</p>
 <input v-model="input" />
 <a @click="copy(input)">{{ copied ? "已複製" : "複製" }}</a>
</div>
<p v-else>Your browser does not support Clipboard API</p>
</template>

效果：

例子(四)：useVModel

這是一個給經常封裝組件的小伙伴們的大好利器。

先創建一個組件：Test.vue

Test.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


<template>
 <div>
 name:
 <input v-model="_name"/>
 age:
 <input v-model="_age"/>
 sex:
 <input v-model="_sex"/>
 </div>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core'
const props = defineProps({
 name: String,
 age: String,
 sex: String
})
const emit = defineEmits(['update:name', 'update:age', 'update:sex'])

const _name = useVModel(props, 'name', emit)
const _age = useVModel(props, 'age', emit)
const _sex = useVModel(props, 'sex', emit)
</script>

接著，在 index.vue 中使用它

index.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<template>
 <div>
 <Test
 v-model:name="formData.name"
 v-model:age="formData.age"
 v-model:sex="formData.sex"
 ></Test>
 {{ formData }}
 </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue-demi';
import Test from './Test.vue'
const formData = reactive({
 name: 'lily',
 age: '8',
 sex: 'boy'
})
</script>

效果：

對於有組件封裝需求的朋友，這個方法強烈推薦！

不用再為了單向數據流的組件封裝，而在組件內寫冗餘的代碼了。

直接將 useVModel 返回的數據作為響應式對象用即可。

最後

例子太多，就不再一一介紹了，但大家應該已經有了一個初步的概念，知道了此庫的作用，一言以蔽之：助力摸鱼，提前下班。

它沒辦法做到你之前做不到的事情。

它只能做到讓你更輕鬆的完成工作！願你今天也能按時下班。

localStorage 容量太小？試試 localforage、idb-keyval

Tue, 15 Nov 2022 00:00:00 +0000

參考網站

localStorage 是前端本地儲存的一種，其容量一般在 5M-10M 左右，用來快取一些簡單的資料基本夠用，畢竟定位也不是大資料量的儲存。

在某些場景下 localStorage 的容量就會有點捉襟見肘，其實瀏覽器是有提供大資料量的本地儲存的如 IndexedDB 儲存資料大小一般在 250M 以上。

彌補了 localStorage 容量的缺陷，但是使用要比 localStorage 複雜一些 mdn IndexedDB

不過已經有大佬造了輪子封裝了一些呼叫過程使其使用相對簡單，下面我們一起來看一下～

localforage

localforage，擁有類似 localStorage API，它能儲存多種型別的資料如 Array、ArrayBuffer、Blob、Number、Object、String，而不僅僅是字串。

這意味著我們可以直接存物件、陣列型別的資料避免了 JSON.stringify 轉換資料的一些問題。

儲存其他資料型別時需要轉換成上邊對應的型別，比如 vue3 中使用 reactive 定義的資料需要使用 toRaw 轉換成原始資料進行儲存， ref 則直接儲存 xxx.value 資料即可。

安裝

下載最新版本或使用 npm、bower 進行安裝，引入下載的 localforage 即可使用。

通過 npm 安裝：

1

npm install localforage

通過 bower 安裝：

1

bower install localforage

使用

提供了與 localStorage 相同的api，不同的是它是非同步的呼叫返回一個 Promise 物件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


localforage.getItem('somekey')
 .then(function(value) {
 // 當離線倉庫中的值被載入時，此處程式碼執行
 console.log(value);
 })
 .catch(function(err) {
 // 當出錯時，此處程式碼執行
 console.log(err);
 });

// callback 版本
localforage.getItem('somekey', function(err, value) {
 // 當離線倉庫中的值被載入時，此處程式碼執行
 console.log(value);
});

提供的方法

getItem：根據資料的 key 獲取資料不存在則返回 null。
setItem：根據資料的 key 設定資料(儲存 undefined 時 getItem 獲取會返回 null)。
removeItem：根據 key 刪除資料。
length：獲取 key 的數量。
key：根據 key 的索引獲取其名。
keys：獲取資料倉庫中所有的 key。
iterate：迭代資料倉庫中的所有 value/key 鍵值對。

配置

完整配置可檢視文件

這裡說個我覺得很有用的：

1

localforage.config({ name: 'My-localStorage' });

設定倉庫的名字，不同的名字代表不同的倉庫，當一個應用需要多個本地倉庫隔離資料的時候就很有用。

1
2
3
4
5
6


const store = localforage.createInstance({ name: "nameHere" });
const otherStore = localforage.createInstance({ name: "otherName" });

// 設定某個資料倉庫 key 的值不會影響到另一個數據倉庫
store.setItem("key", "value");
otherStore.setItem("key", "value2");

同時也支援刪除倉庫：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


// 呼叫時，若不傳參，將刪除當前例項的 “資料倉庫”。
localforage.dropInstance()
 .then(function() {
 console.log('Dropped the store of the current instance');
 });

// 呼叫時，若引數為一個指定了 name 和 storeName 屬性的物件，會刪除指定的 “資料倉庫”。
localforage.dropInstance({ name: "otherName", storeName: "otherStore" })
 .then(function() {
 console.log('Dropped otherStore');
 });

// 呼叫時，若引數為一個僅指定了 name 屬性的物件，將刪除指定的 “資料庫” (及其所有資料倉庫)。
localforage.dropInstance({ name: "otherName" })
 .then(function() {
 console.log('Dropped otherName database');
 });

idb-keyval

idb-keyval 是用 IndexedDB 實現的一個超級簡單的基於 promise 的鍵值儲存。

安裝

1

npm install idb-keyval

使用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// 全部引入
import idbKeyval from 'idb-keyval';

idbKeyval.set('hello', 'world')
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

// 按需引入會 treeshake
import { get, set } from 'idb-keyval';

set('hello', 'world')
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

get('hello')
 .then((val) => console.log(val));

瀏覽器直接引入：

1

<script src="https://cdn.jsdelivr.net/npm/idb-keyval@6/dist/umd.js"></script>

提供的方法

由於其沒有中文的官網，會把例子及自己的理解附上：

set

set：設定資料

key 可以是 Number、String、Date(IDB 也允許這些值的陣列，但 IE 不支援)。 value 可以是 Number、Array、Object、Date、Blobs 等，儘管老 Edge 不支援 null。

1
2
3
4
5


import { set } from 'idb-keyval';

set('hello', 'world')
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

setMany

setMany：設定多個數據

一次設定多個值，比一個一個的設定更快

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


import { set, setMany } from 'idb-keyval';

// 不應該:
Promise.all([set(123, 456), set('hello', 'world')])
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

// 這樣做更快:
setMany([
 [123, 456],
 ['hello', 'world'],
])
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

get

get：獲取資料

如果沒有 key，那麼 value 將返回 undefined。

1
2
3
4
5


import { get } from 'idb-keyval';

// logs: "world"
get('hello')
 .then((val) => console.log(val));

getMany

getMany：獲取多個數據

一次獲取多個數據，比一個一個的獲取資料更快

1
2
3
4
5
6
7
8
9


import { get, getMany } from 'idb-keyval';

// 不應該:
Promise.all([get(123), get('hello')])
 .then(([firstVal, secondVal]) => console.log(firstVal, secondVal));

// 這樣做更快:
getMany([123, 'hello'])
 .then(([firstVal, secondVal]) => console.log(firstVal, secondVal));

del

del：刪除資料

根據 key 刪除資料

1
2
3


import { del } from 'idb-keyval';

del('hello');

delMany

delMany：刪除多個數據

一次刪除多個鍵，比一個一個的刪除更快

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import { del, delMany } from 'idb-keyval';

// 不應該:
Promise
 .all([del(123), del('hello')])
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

// 這樣做更快:
delMany([123, 'hello'])
 .then(() => console.log('It worked!'))
 .catch((err) => console.log('It failed!', err));

update

update：排隊更新資料，防止由於非同步導致資料更新問題

因為 get 與 set 都是非同步的使用他們來更新資料可能會存在問題如：

1
2
3
4
5
6



// Don't do this:
import { get, set } from 'idb-keyval';
get('counter').then((val) => set('counter', (val || 0) + 1); );
get('counter').then((val) => set('counter', (val || 0) + 1); );
// 上述程式碼我們期望的是 2 但實際結果是 1，我們可以在第一個 callback 執行第二次操作。

更好的方法是使用 update 來更新資料：

1
2
3
4
5
6


// Instead:
import { update } from 'idb-keyval';

update('counter', (val) => (val || 0) + 1);
update('counter', (val) => (val || 0) + 1);
// 將自動排隊更新，所以第一次更新將計數器設定為 1，第二次更新將其設定為 2。

clear

clear：清除所有資料

1
2
3


import { clear } from 'idb-keyval';

clear();

entries

entries：返回 [key, value] 形式的資料

1
2
3
4


import { entries } from 'idb-keyval';

// logs: [[123, 456], ['hello', 'world']]
entries().then((entries) => console.log(entries));

keys

keys：獲取所有資料的 key

1
2
3
4


import { keys } from 'idb-keyval';

// logs: [123, 'hello']
keys().then((keys) => console.log(keys));

values

values：獲取所有資料的 value

1
2
3
4


import { values } from 'idb-keyval';

// logs: [456, 'world']
values().then((values) => console.log(values));

createStore

createStore：自定義倉庫

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// 自定義資料庫名稱及表名稱
// 建立一個數據庫:

// 資料庫名稱為 tang_shi，表名為 table1
const tang_shi_table1 = idbKeyval.createStore('tang_shi', 'table1');

// 向對應倉庫新增資料
idbKeyval.set('add', 'table1 的資料', tang_shi_table1);

// 預設建立的倉庫名稱為 keyval-store，表名為 keyval
idbKeyval.set('add', '預設的資料');

使用 createStore 建立的資料庫一個庫只會建立一個表：

1
2
3
4
5
6
7


// 同一個庫有不可以有兩個表，custom-store-2 不會建立成功:
const customStore = createStore('custom-db-name', 'custom-store-name');
const customStore2 = createStore('custom-db-name', 'custom-store-2');

// 不同的庫有相同的表名，這是可以的:
const customStore3 = createStore('db3', 'keyval');
const customStore4 = createStore('db4', 'keyval');

總結

本文介紹了兩個 IndexedDB 的庫，用來解決 localStorage 儲存容量太小的問題。

localforage 與 idb-keyval 之間我更喜歡 localforage 因為其與 localStorage 相似的 api 幾乎沒有上手成本。

如果需要更加靈活的庫可以看一下 dexie.js、PouchDB、idb、JsStore 或者 lovefield 之類的庫。

試用 RunKit

Mon, 14 Nov 2022 00:00:00 +0000

參考網站

試用RunKit

先來說說 RunKit 是什麼。

首先，Runkit 可以讓你在瀏覽器中運行 Node.js 的代碼。在 Runkit 中，可以很方便的調用眾多的 npm 模塊。這就有點像 Node.js 版的 Jupyter Notebook。同時，Runkit 還可以提供一個免費的 HTTP 服務器而無需任何的服務器安裝和配置。這在開發手機 APP 的服務器端，以及微服務的時候尤其有用。當然，實現無服務器的選擇很多，比如 AWS 的 Lambda + API Gateway，但 RunKit 的最大優勢就是完全免費的，這在開發軟件原型的時候就更為方便了。

下面分別來看看這兩項功能。

打開頁面： https://runkit.com/home

可以通過 Github 授權登錄：

登錄成功後可以看到：

點擊運行按鈕後就可以在頁面中看到執行結果：

在 Runkit 的頁面中可以像正常的 Node.js 環境一樣運行各種 JS 語句。比如，運行如下的簡單代碼獲取 Hive 中文區的最新文章：

1
2
3
4
5
6
7
8
9


const hive = require('@hiveio/hive-js');

// Read posts from Hive
hive.api.getDiscussionsByCreated({ tag: 'hive-105017', limit: 10 }, function(err, discussions) {
 for (let i = 0; i < discussions.length; i++) {
 let post = discussions[i]
 console.log(post.title)
 }
})

可以看到返回的结果：

API Endpoint

再來看看我最喜歡的 Runkit 功能：提供簡單的 API endpoint。

非常簡單的源碼：

1

exports.endpoint = function(request, response) { response.end("API endpoint test"); }

單擊 publish 進行發布：

發布後單擊 endpoint 就會打開對應的 API URL：

比如說，我這裡的就是：

https://api-jdcmj9qsmxmb.runkit.sh/

可以看到，無需配置/運行服務器，就可以有自己的 API 可用，又是 serverless，同時還免費，是不是很爽？

Vben Admin 指南與 Vite 配置

Wed, 12 Oct 2022 00:00:00 +0000

參考網站
 參考網站

這是一篇完整的 2022 年連結優化指南。
因此，如果你想要取得權威網站的反向連結。
你將會在這篇新指南中，享受本文可操作的技巧。
讓我們往深入其中吧。

Vben Admin

點我跳過 Vben Admin，直接前往配置Vite

介紹

Vue-Vben-Admin 是一個基於 Vue3.0、Vite、Ant-Design-Vue、TypeScript 的後台解決方案，目標是為開發中大型項目提供開箱即用的解決方案。包括二次封裝組件、utils、hooks、動態菜單、權限校驗、按鈕級別權限控制等功能。項目會使用前端較新的技術棧，可以作為項目的啟動模版，以幫助你快速搭建企業級中後台產品原型。也可以作為一個示例，用於學習 vue3、vite、ts 等主流技術。該項目會持續跟進最新技術，並將其應用在項目中。

文檔

中文文檔地址為 vben-admin-doc，採用 Vitepress 開發。

本地運行文檔

如需本地運行文檔，請拉取代碼到本地。

1
2
3
4
5
6
7
8


# 拉取代碼
git clone https://github.com/vbenjs/vue-vben-admin-doc

# 安裝依賴
yarn

# 運行項目
yarn dev

需要掌握的基礎知識

本項目需要一定前端基礎知識，請確保掌握Vue 的基礎知識，以便能處理一些常見的問題。建議在開發前先學一下以下內容，提前了解和學習這些知識，會對項目理解非常有幫助：

模版

vue-vben-admin (完整版演示)

vue-vben-admin 完整版本。該版本主要是提供一些Demo示例及插件的使用集成方式，主要用於參考。如果對項目不是很熟悉，不建議在此基礎上進行開發，請使用下方提供的精簡版本。

vue-vben-admin-thin (精簡版演示)

vue-vben-admin 精簡版本。刪除了相關示例、無用文件及功能、依賴。可以根據自身需求安裝對應的依賴。因為使用的是 vite，依賴刪除不會導致相關組件或者 hook 發出警告。只在需要的時候安裝對應的庫即可。

vite 插件推薦

vite-plugin-mock - 用於本地及開發環境數據 mock
vite-plugin-html - 用於 html 模版轉換，可以在html文件內進行書寫模版語法
vite-plugin-style-import - 用於組件庫樣式按需引入
vite-plugin-imagemin - 用於打包壓縮圖片資源
vite-plugin-theme - 用於在線切換主題色/黑暗主題適配等主題相關配置
vite-plugin-compression - 用於打包輸出.gz|.br文件
vite-plugin-svg-icons - 快速生成 svg sprite

瀏覽器支持

本地開發推薦使用Chrome 最新版瀏覽器，不支持Chrome 80以下版本。

生產環境支持現代瀏覽器，不支持IE。

創建VbenLearn項目

使用Vite創建項目

vite官方文檔

1
2
3
4
5
6
7
8


# 官網上的創建項目命令
yarn create @vitejs/app

# 名稱
vben-learn

# vue-ts的模板
√ vue-ts

yarn報錯

文件名、目錄名或卷標語法不正確。報錯，參考鏈接

安裝 vscode 插件

安裝插件

VbenAdmin 官方推荐

Iconify IntelliSense：Iconify 圖標插件
WndiCSS lntelliSense：windicss 提示插件
i18n Ally： i18n 插件
Vetur：vue 開發必備（也可以選擇 Volar）
ESLint：腳本代碼檢查
Prettier - Code formatter：代碼格式化
Stylelint：css 格式化
DotENV： .env 文件高亮

獲取 Vben Admin

從 GitHub 獲取代碼

1

git clone https://github.com/vbenjs/vue-vben-admin.git

從 Gitee 獲取代碼

1

git clone https://gitee.com/annsion/vue-vben-admin.git

注意
Gitee 的代碼可能不是最新的

imagemin 依賴安裝失敗解決方法

由於 imagemin 在國內安裝困難，提供以下幾個解決方案：

使用 yarn 在 package.json 內配置(推薦，項目內已集成，前提是必須使用 yarn)

package.json

1
2
3
4
5


// ...
"resolutions": {
 "bin-wrapper": "npm:bin-wrapper-china"
}
// ...

使用 npm，在電腦 host 文件加上如下配置即可

etc/hosts

1

199.232.4.133 raw.githubusercontent.com

npm script

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


// ...
"scripts": {
 # 安裝依賴
 "bootstrap": "yarn install",
 # 運行項目
 "serve": "npm run dev",
 # 運行項目
 "dev": "vite",
 # 構建項目
 "build": "vite build && esno ./build/script/postBuild.ts",
 # 清空緩存後構建項目
 "build:no-cache": "yarn clean:cache && npm run build",
 # 生成打包分析，在 `Mac OS` 電腦上執行完成後會自動打開界面，在 `Window` 電腦上執行完成後需要打開 `./build/.cache/stats.html` 查看
 "report": "cross-env REPORT=true npm run build",
 # 類型檢查
 "type:check": "vue-tsc --noEmit --skipLibCheck",
 # 預覽打包後的內容（先打包在進行預覽）
 "preview": "npm run build && vite preview",
 # 直接預覽本地 dist 文件目錄
 "preview:dist": "vite preview",
 # 生成 ChangeLog
 "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
 # 刪除緩存
 "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
 # 刪除 node_modules (`window` 系統手動刪除該目錄較慢，可以使用該命令來進行刪除)
 "clean:lib": "rimraf node_modules",
 # 執行 eslint 校驗，並修復部分問題
 "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
 # 執行 prettier 格式化（該命令會對項目所有代碼進行 prettier 格式化，請謹慎執行）
 "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
 # 執行 stylelint 格式化
 "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
 "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
 "lint:pretty": "pretty-quick --staged",
 # 對打包結果進行 gzip 測試
 "test:gzip": "http-server dist --cors --gzip -c-1",
 # 對打包目錄進行 brotli 測試
 "test:br": "http-server dist --cors --brotli -c-1",
 # 重新安裝依賴，見下方說明
 "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
 "install:husky": "is-ci || husky install",
 # 生成圖標集，見下方說明
 "gen:icon": "esno ./build/generate/icon/index.ts",
 "postinstall": "npm run install:husky"
},
// ...

目錄說明

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50


.
├── build # 打包腳本相關
│ ├── config # 配置文件
│ ├── generate # 生成器
│ ├── script # 腳本
│ └── vite # vite配置
├── mock # mock文件夾
├── public # 公共靜態資源目錄
├── src # 主目錄
│ ├── api # 接口文件
│ ├── assets # 資源文件
│ │ ├── icons # icon sprite 圖標文件夾
│ │ ├── images # 項目存放圖片的文件夾
│ │ └── svg # 項目存放svg圖片的文件夾
│ ├── components # 公共組件
│ ├── design # 樣式文件
│ ├── directives # 指令
│ ├── enums # 枚舉/常量
│ ├── hooks # hook
│ │ ├── component # 組件相關hook
│ │ ├── core # 基礎hook
│ │ ├── event # 事件相關hook
│ │ ├── setting # 配置相關hook
│ │ └── web # web相關hook
│ ├── layouts # 佈局文件
│ │ ├── default # 默認佈局
│ │ ├── iframe # iframe佈局
│ │ └── page # 頁面佈局
│ ├── locales # 多語言
│ ├── logics # 邏輯
│ ├── main.ts # 主入口
│ ├── router # 路由配置
│ ├── settings # 項目配置
│ │ ├── componentSetting.ts # 組件配置
│ │ ├── designSetting.ts # 樣式配置
│ │ ├── encryptionSetting.ts # 加密配置
│ │ ├── localeSetting.ts # 多語言配置
│ │ ├── projectSetting.ts # 項目配置
│ │ └── siteSetting.ts # 站點配置
│ ├── store # 數據倉庫
│ ├── utils # 工具類
│ └── views # 頁面
├── test # 測試
│ └── server # 測試用到的服務
│ ├── api # 測試服務器
│ ├── upload # 測試上傳服務器
│ └── websocket # 測試ws服務器
├── types # 類型文件
├── vite.config.ts # vite配置文件
└── windi.config.ts # windcss配置文件

Vite配置多環境

說明：

就好像之前在Vue-Cli中的env一樣。

Vite官網說明

VbenAdmin官方說明

項目的環境變量配置位於項目根目錄下的 .env、.env.development、.env.production

1
2
3
4


.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略

創建默認配置文件

根目錄下創建：`.env`文件

1
2
3
4
5
6
7
8


# 運行的端口
VITE_PORT = 3100

# 應用名稱
VITE_GLOB_APP_TITLE = Vben Admin

# 應用短名稱
VITE_GLOB_APP_SHORT_NAME = vue_vben_admin

創建生產配置文件

根目錄下創建：`.env.production`文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


# 是否使用mock
VITE_USE_MOCK = true

# 公共路徑
VITE_PUBLIC_PATH = /

# 是否刪除所有日誌打印
VITE_DROP_CONSOLE = true

# 是否啟用gzip或brotli壓縮。
# 可選：gzip | brotli | none
# 如果你需要多個表格，你可以使用`,`來分隔。
VITE_BUILD_COMPRESS = 'none'

# 應用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上傳地址，可選
# 可以通過nginx轉發或直接寫入實際地址。
VITE_GLOB_UPLOAD_URL=/upload

# 接口前綴
VITE_GLOB_API_URL_PREFIX=

# 是否啟用圖像壓縮
VITE_USE_IMAGEMIN= true

#使用PWA
VITE_USE_PWA = false

# 是否與舊版瀏覽器兼容
VITE_LEGACY = false

創建開發配置文件

根目錄下創建：`.env.development`文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


VITE_PORT = 3100

# 是否使用mock
VITE_USE_MOCK = true

# 公共路徑
VITE_PUBLIC_PATH = /

# 跨域代理，你可以配置多個代理。
VITE_PROXY=[["/api","http://localhost:3000"],["/upload","http://localhost:3001/upload"]]
# VITE_PROXY=[["/api","https://vvbin.cn/test"]]

# 是否刪除所有日誌打印
VITE_DROP_CONSOLE = false

# 應用基本接口地址
VITE_GLOB_API_URL=/api

# 文件上傳地址，可選
VITE_GLOB_UPLOAD_URL=/upload

# 接口前綴
VITE_GLOB_API_URL_PREFIX=

測試配置

src\App.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


<template>
 <div>{{ vitePort }}</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
 name: "App",
 setup() {
 const vitePort = ref(import.meta.env.VITE_PORT);
 return {
 vitePort,
 };
 },
});
</script>

生產環境動態配置，可參考 Vben Admin 官方說明

配置TS

說明

我們使用Vite創建的項目時使用的是vue-ts模板，所以在創建項目的時候package.json就自帶了typescript。該依賴會編譯我們的ts文件。那麼是依賴我們就可以配置它。配置內容還是照搬Vben的，加上註釋和規則來源。

創建配置文件

根目錄下創建：tsconfig.json文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83


{
 "compilerOptions": {
 // ↓ 指定ECMAScript目標版本，esnext為最新版本
 "target": "esnext",

 // ↓ 指定生成哪個模塊系統代碼，esnext為最新版本
 "module": "esnext",

 // ↓ 決定如何處理模塊。
 "moduleResolution": "node",

 // ↓ 啟用所有嚴格類型檢查選項。
 "strict": true,

 // ↓ 禁止對同一個文件的不一致的引用。
 "forceConsistentCasingInFileNames": true,

 // ↓ 允許從沒有設置默認導出的模塊中默認導入。這並不影響代碼的輸出，僅為了類型檢查。
 "allowSyntheticDefaultImports": true,

 // ↓ 禁用函數參數雙向協變檢查。
 "strictFunctionTypes": false,

 // ↓ 在 .tsx文件裡支持JSX
 "jsx": "preserve",

 // ↓ 解析非相對模塊名的基準目錄。查看 模塊解析文檔了解詳情。
 "baseUrl": ".",

 // ↓ 允許編譯javascript文件。
 "allowJs": true,

 // ↓ 生成相應的 .map文件。
 "sourceMap": true,
 "esModuleInterop": true,
 "resolveJsonModule": true,

 // ↓ 若有未使用的局部變量則拋錯。
 "noUnusedLocals": true,

 // ↓ 若有未使用的參數則拋錯。
 "noUnusedParameters": true,

 // ↓ 啟用實驗性的ES裝飾器。
 "experimentalDecorators": true,

 // ↓ 編譯過程中需要引入的庫文件的列表。
 "lib": ["dom", "esnext"],

 // ↓ 要包含的類型聲明文件名列表。
 "types": ["vite/client"],

 // ↓ 要包含的類型聲明文件路徑列表。
 "typeRoots": ["./node_modules/@types/", "./types"],
 "incremental": true,

 // ↓ 在表達式和聲明上有隱含的 any類型時報錯。
 "noImplicitAny": false,

 // ↓ 忽略所有的聲明文件（ *.d.ts）的類型檢查。
 "skipLibCheck": true,

 // ↓ 模塊名到基於 baseUrl的路徑映射的列表。查看 模塊解析文檔了解詳情。
 "paths": {
 "/@/*": ["src/*"],
 "/#/*": ["types/*"]
 }
 },

 // ↓ 指定一個匹配列表（屬於自動指定該路徑下的所有ts相關文件）
 "include": [
 "src/**/*.ts",
 "src/**/*.d.ts",
 "src/**/*.tsx",
 "src/**/*.vue",
 "types/**/*.d.ts",
 "types/**/*.ts",
 "mock/**/*.ts"
 ],

 // ↓ 指定一個排除列表（include的反向操作）
 "exclude": ["node_modules", "dist", "**/*.js"]
}

這裡配置完ESLint之後會報錯，說找不到vite/client。不用管它，當你執行完後面的ESLint-TS的時候就不會報錯了。

安裝 ESLint

說明

ESLint簡單的來說就是去判斷你的JS代碼寫的格式對不對的一個依賴。沒有它你的代碼也能運行，有了它你的代碼可以寫的更漂亮。 ESLint還支持插件，第三方框架會基於ESLint寫出自己的代碼檢查插件。比如Vue3對應eslint-plugin-vue。

安裝 ESLint

1

yarn add eslint --dev

配置ESLint：根目錄下創建：`.eslintrc.js`文件。

這裡可以使用eslint的init。但是我不清楚Vben的初始化操作是怎麼選的，所以直接拷貝Vben的配置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


module.exports = {
 // ↓ 默認情況下，ESLint 會在所有父級目錄裡尋找配置文件，一直到根目錄。如果你想要你所有項目都遵循一個特定的約定時，這將會很有用，但有時候會導致意想不到的結果。為了將 ESLint 限製到一個特定的項目，在你項目根目錄下的 package.json 文件或者 .eslintrc.* 文件裡的 eslintConfig 字段下設置 "root": true。 ESLint 一旦發現配置文件中有 "root": true，它就會停止在父級目錄中尋找。
 // ↓ 此項是用來告訴eslint找當前配置文件不能往父級查找
 root: true,

 // ↓ 指定你想啟用的環境
 env: {
 browser: true,
 node: true,
 es6: true,
 },

 // ↓ 設置解析器
 parser: "",

 // ↓ 解析器選項
 parserOptions: {},

 // ↓ 擴展項
 extends: [],

 // ↓ 自定義規則配置
 rules: {}
}

配置ESLint忽略文件：根目錄下創建：`.eslintignore`文件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

安裝 eslint-plugin-vue

說明

ESLint是檢查JS代碼的依賴，那麼它怎麼去檢查Vue語法的文件呢？要完成這件事，我們就需要安裝vue官方開發的ESLint插件eslint-plugin-vue。這樣ESLint就知道該怎麼檢查vue的文件了。

怎麼理解eslint-plugin-vue和vue-eslint-parser的關係呢?

ESLint 會對我們的代碼進行校驗，而 parser 的作用是將我們寫的代碼轉換為 ESTree，ESLint 會對 ESTree 進行校驗。

vue-eslint-parser文檔上說是vue的模板解析器。 vue-eslint-parser的文檔中強調<template>標籤中的內容進行檢查。

那麼我的理解是vue-eslint-parser將vue文件轉換成ESTree。然後使用eslint-plugin-vue來檢查這個ESTree。查出的結果交給ESLint。

vue-eslint-parser的官方說明：

This parser allows us to lint the <template> of .vue files. We can make mistakes easily on <template> if we use complex directives and expressions in the template. This parser and the rules of eslint-plugin-vue would catch some of the mistakes.
這個解析器允許我們對.vue文件的<template>進行檢查。如果我們在模板中使用了複雜的指令和表達式，我們很容易在<template>上出錯。這個解析器和eslint-plugin-vue的規則可以發現一些錯誤。

總之eslint-plugin-vue和vue-eslint-parser需要一起使用，而且官網也有標示怎麼操作。

安裝兩個 npm 插件

1

yarn add eslint-plugin-vue vue-eslint-parser --dev

將插件配置進ESLint

配置ESLint：根目錄下修改：`.eslintrc.js`文件

.eslintrc.js

1
2
3
4
5
6
7
8
9


module.exports = {
 // ...
 parser: 'vue-eslint-parser',
 // ...
 extends: [
 'plugin:vue/vue3-recommended',
 ],
 // ...
}

安裝 @typescript-eslint

說明

這裡同理需要安裝 @typescript-eslint/eslint-plugin 和 @typescript-eslint/parser。

安裝TS的Lint

1

yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser --dev

將插件配置進ESLint

配置ESLint：根目錄下修改：`.eslintrc.js`文件

.eslintrc.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


module.exports = {
 // ...
 parserOptions: {
 parser: "@typescript-eslint/parser",
 ecmaVersion: 2020,
 sourceType: "module",
 jsxPragma: "React",
 ecmaFeatures: {
 jsx: true,
 tsx: true,
 },
 },
 extends: ["plugin:vue/vue3-recommended", "plugin:@typescript-eslint/recommended"],
 // ...
}

安裝 eslint-plugin-prettier

說明

prettier用來格式化代碼的。一般IDE都有prettier的插件，在保存的時候格式化代碼。那麼我們eslint-plugin-prettier就是通過JS來判斷代碼格式是否正確。一般這很必要，因為不同的程序員有不同的IDE，不同的IDE有不同的prettier插件。但對於項目來說只有一個eslint-plugin-prettier。

而eslint-plugin-prettier插件依賴於prettier依賴。那麼eslint-config-prettier插件又是幹嘛的？

prettier和ESLint之間有些規則不一樣，因此是用於解決衝突得。eslint-config-prettier將prettier一些規則默認關閉了。

安裝

1

yarn add prettier eslint-plugin-prettier eslint-config-prettier --dev

配置prettier

prettier的配置項

根目錄下創建：`prettier.config.js`文件

prettier.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


module.exports = {
 printWidth: 100,
 tabWidth: 2,
 useTabs: false,
 semi: true,
 vueIndentScriptAndStyle: true,
 singleQuote: true,
 quoteProps: 'as-needed',
 bracketSpacing: true,
 trailingComma: 'es5',
 jsxBracketSameLine: false,
 jsxSingleQuote: false,
 arrowParens: 'always',
 insertPragma: false,
 requirePragma: false,
 proseWrap: 'never',
 htmlWhitespaceSensitivity: 'strict',
 endOfLine: 'lf',
 rangeStart: 0
}

配置prettier忽略文件

根目錄下創建：`.prettierignore`文件

.prettierignore

1
2
3
4
5
6
7
8
9


/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

配置進ESLint

配置ESLint：修改根目錄下：`.eslintrc.js`文件

.eslintrc.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


module.exports = {
 // ...
 extends: [
 "plugin:vue/vue3-recommended",
 "plugin:@typescript-eslint/recommended",
 "prettier",
 "plugin:prettier/recommended",
 ],
 // ...
}

自定義ESLint檢查規則

說明

ESLint是用來檢查代碼的。又安裝了那麼多的插件。但是官方默認的方案有時不一樣符合我們的要求。我們需要自定義自己的規則。

修改規則主要是修改根目錄下.eslintrc.js文件的rules字段。

修改規則

配置ESLint：根目錄下：`.eslintrc.js`文件

.eslintrc.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100


module.exports = {
 // ...
 rules: {
 // ↓ 禁止使用@ts-ignore來消除ESLint檢查
 '@typescript-eslint/ban-ts-ignore': 'off',

 // ↓ 在函數和類方法上需要顯式的返回類型
 '@typescript-eslint/explicit-function-return-type': 'off',

 // ↓ 禁止使用any類型
 '@typescript-eslint/no-explicit-any': 'off',

 // ↓ 除導入語句外，禁止使用require語句
 '@typescript-eslint/no-var-requires': 'off',

 // ↓ 禁止使用空函數
 '@typescript-eslint/no-empty-function': 'off',

 // ↓ 對自定義事件名稱強制使用特定的大小寫
 'vue/custom-event-name-casing': 'off',

 // ↓ 禁止定義前使用
 'no-use-before-define': 'off',

 // ↓ 在定義變量之前不允許使用變量
 '@typescript-eslint/no-use-before-define': 'off',

 // ↓ 禁止使用@ts-註解
 '@typescript-eslint/ban-ts-comment': 'off',

 // ↓ 禁止使用特定類型
 '@typescript-eslint/ban-types': 'off',

 // ↓ 禁止使用!後綴運算符進行非null斷言
 '@typescript-eslint/no-non-null-assertion': 'off',

 // ↓ 在導出的函數和類的公共類方法上需要顯式的返回值和參數類型
 '@typescript-eslint/explicit-module-boundary-types': 'off',

 // ↓ 禁止使用未使用的變量
 '@typescript-eslint/no-unused-vars': [
 'error',
 {
 argsIgnorePattern: '^h$',
 varsIgnorePattern: '^h$',
 },
 ],

 // ↓ 禁止使用未使用的變量
 'no-unused-vars': [
 'error',
 {
 argsIgnorePattern: '^h$',
 varsIgnorePattern: '^h$',
 },
 ],

 // ↓ 在函數括號前需要或不允許有空格
 'space-before-function-paren': 'off',

 // ↓ 強制屬性順序
 'vue/attributes-order': 'off',

 // ↓ 強制每個組件應位於其自己的文件中
 'vue/one-component-per-file': 'off',

 // ↓ 在標籤的右括號之前要求或不允許換行
 'vue/html-closing-bracket-newline': 'off',

 // ↓ 強制每行的最大屬性數
 'vue/max-attributes-per-line': 'off',

 // ↓ 在多行元素的內容之前和之後需要換行
 'vue/multiline-html-element-content-newline': 'off',

 // ↓ 在單行元素的內容之前和之後需要換行
 'vue/singleline-html-element-content-newline': 'off',

 // ↓ 在模板中的自定義組件上實施屬性命名樣式
 'vue/attribute-hyphenation': 'off',

 // ↓ 需要道具的默認值
 'vue/require-default-prop': 'off',

 // ↓ 實施自我封閉的風格
 // 'vue/html-self-closing': 'off',
 'vue/html-self-closing': [
 'error',
 {
 html: {
 void: 'always',
 normal: 'never',
 component: 'always',
 },
 svg: 'always',
 math: 'always'
 }
 ]
 }
}

vben項目配置git忽略文件

說明

這個應該是項目一上來就要處理的，但是我手撕Vben的時候，按照配置文件的順序下來，到現在才處理了。

創建Git忽略文件

根目錄下創建：`.gitignore`文件

.gitignore

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


node_modules
.DS_Store
dist
dist-ssr
*.local

# other
.npmrc
.cache
test/upload-server/static

.local
# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

安裝style-lint

說明

這次需要安裝四個插件stylelint、stylelint-config-standard、stylelint-config-prettier、stylelint-order。

stylelint是對我們編寫的樣式進行檢查的插件。
stylelint-config-standard是stylelint擴展的檢查標準庫。
stylelint-config-prettier是用來解決衝突的（估計又和ESLint衝突了，參考之前的prettier）。
stylelint-order是檢查我們樣式編寫順序的。

參考連結

stylelint官網
stylelint的npm首頁
stylelint-config-standard的npm首頁：擴展，標準庫
stylelint-config-prettier的npm首頁：擴展，解決衝突的
stylelint-order的npm首頁：插件，樣式排序
stylelinit的配置說明
stylelint的配置規則

安裝

1

yarn add stylelint stylelint-config-standard stylelint-config-prettier stylelint-order --dev

配置stylelint

根目錄下創建：`stylelint.config.js`文件

stylelint.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


module.exports = {
 // ↓ 這個好像是沒有用的，但是VbenAdmin是這麼寫的
 root: true,

 // ↓ 插件
 plugins: ['stylelint-order'],

 // ↓ 擴展
 extends: ['stylelint-config-standard', 'stylelint-config-prettier'],

 // ↓ 自定義規則
 rules: {},

 // ↓ 忽略檢查的文件
 ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts']
}

配置自定義樣式規則

根目錄下修改：`stylelint.config.js`文件

stylelint.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207


module.exports = {
 // ...
 rules: {
 // ↓ 禁止使用未知的偽類選擇器。
 'selector-pseudo-class-no-unknown': [
 true,
 {
 ignorePseudoClasses: ['global']
 }
 ],

 // ↓ 禁止使用未知規則。
 'at-rule-no-unknown': [
 true,
 {
 ignoreAtRules: ['function', 'if', 'each', 'include', 'mixin']
 }
 ],

 // ↓ 禁止空來源。
 'no-empty-source': null,

 // ↓ 禁止使用無效的命名網格區域。
 'named-grid-areas-no-invalid': null,

 // ↓ 要求或不允許使用Unicode字節順序標記。
 'unicode-bom': 'never',

 // ↓ 禁止較低特異性的選擇器在覆蓋較高特異性的選擇器之後出現。
 'no-descending-specificity': null,

 // ↓ 禁止在字體系列名稱列表中缺少通用系列。
 'font-family-no-missing-generic-family-keyword': null,

 // ↓ 在聲明的冒號後面需要一個空格或禁止空格。
 'declaration-colon-space-after': 'always-single-line',

 // ↓ 在聲明的冒號之前需要一個空格或禁止使用空格。
 'declaration-colon-space-before': 'never',

 // ↓ 在聲明塊內要求或不允許尾隨分號。
 'declaration-block-trailing-semicolon': 'always',

 // ↓ 在規則之前要求或禁止使用空行。
 'rule-empty-line-before': [
 'always',
 {
 ignore: ['after-comment', 'first-nested'],
 }
 ],

 // ↓ 禁止使用未知單位。
 'unit-no-unknown': [true, { ignoreUnits: ['rpx'] }],
 // Specify the alphabetical order of the attributes in the declaration block

 // ↓ 樣式順序
 'order/properties-order': [
 'position',
 'top',
 'right',
 'bottom',
 'left',
 'z-index',
 'display',
 'float',
 'width',
 'height',
 'max-width',
 'max-height',
 'min-width',
 'min-height',
 'padding',
 'padding-top',
 'padding-right',
 'padding-bottom',
 'padding-left',
 'margin',
 'margin-top',
 'margin-right',
 'margin-bottom',
 'margin-left',
 'margin-collapse',
 'margin-top-collapse',
 'margin-right-collapse',
 'margin-bottom-collapse',
 'margin-left-collapse',
 'overflow',
 'overflow-x',
 'overflow-y',
 'clip',
 'clear',
 'font',
 'font-family',
 'font-size',
 'font-smoothing',
 'osx-font-smoothing',
 'font-style',
 'font-weight',
 'hyphens',
 'src',
 'line-height',
 'letter-spacing',
 'word-spacing',
 'color',
 'text-align',
 'text-decoration',
 'text-indent',
 'text-overflow',
 'text-rendering',
 'text-size-adjust',
 'text-shadow',
 'text-transform',
 'word-break',
 'word-wrap',
 'white-space',
 'vertical-align',
 'list-style',
 'list-style-type',
 'list-style-position',
 'list-style-image',
 'pointer-events',
 'cursor',
 'background',
 'background-attachment',
 'background-color',
 'background-image',
 'background-position',
 'background-repeat',
 'background-size',
 'border',
 'border-collapse',
 'border-top',
 'border-right',
 'border-bottom',
 'border-left',
 'border-color',
 'border-image',
 'border-top-color',
 'border-right-color',
 'border-bottom-color',
 'border-left-color',
 'border-spacing',
 'border-style',
 'border-top-style',
 'border-right-style',
 'border-bottom-style',
 'border-left-style',
 'border-width',
 'border-top-width',
 'border-right-width',
 'border-bottom-width',
 'border-left-width',
 'border-radius',
 'border-top-right-radius',
 'border-bottom-right-radius',
 'border-bottom-left-radius',
 'border-top-left-radius',
 'border-radius-topright',
 'border-radius-bottomright',
 'border-radius-bottomleft',
 'border-radius-topleft',
 'content',
 'quotes',
 'outline',
 'outline-offset',
 'opacity',
 'filter',
 'visibility',
 'size',
 'zoom',
 'transform',
 'box-align',
 'box-flex',
 'box-orient',
 'box-pack',
 'box-shadow',
 'box-sizing',
 'table-layout',
 'animation',
 'animation-delay',
 'animation-duration',
 'animation-iteration-count',
 'animation-name',
 'animation-play-state',
 'animation-timing-function',
 'animation-fill-mode',
 'transition',
 'transition-delay',
 'transition-duration',
 'transition-property',
 'transition-timing-function',
 'background-clip',
 'backface-visibility',
 'resize',
 'appearance',
 'user-select',
 'interpolation-mode',
 'direction',
 'marks',
 'page',
 'set-link-source',
 'unicode-bidi',
 'speak'
 ]
 }
 // ...
}

配置stylelint忽略文件

根目錄下創建：`.stylelintignore`文件

.stylelintignore

1
2


/dist/*
/public/*

配置Yarn自動清除功能

說明

實現每一次install之後、add之後、yarn autoclean --force之後。從程序包依賴項中清除並刪除不必要的文件。

參考鏈接：yarn autoclean-官方說明

初始化

1

yarn autoclean --init

執行完命令之後，Yarn就會自動在根目錄下創建一個.yarnclean文件，這樣就可以了。

安裝PostCSS

說明

我們需要安裝兩個庫postcss、autoprefixer。要現實的效果就是我們編寫一般的樣式，渲染頁面的dom節點有面向各種瀏覽器廠商的樣式。

網上說postcss類似一個平台，上面有很多插件，autoprefixer就其中一個。

我以我的看法來解釋一下：postcss就像一個管子，autoprefixer是裡面的過濾器。你寫的css從管子中流過，經過他們的處理就出現了不同的結果。

參考連結：

安裝

1

yarn add postcss autoprefixer --dev

配置postcss

根目錄下：`postcss.config.js`

postcss.config.js

1
2
3
4
5


module.exports = {
 plugins: {
 autoprefixer: {}
 }
}

解析VbenAdmin中的`script`

說明

VbenAdmin官方文檔-npm Script

一下腳本直接添加在根目錄下的package.json的scripts對象中即可。也可以直接照搬VbenAdmin的。

以bootstrap為例。如下：

1
2
3


yarn bootstrap
# or
# npm run bootstrap

bootstrap

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "bootstrap": "yarn install",
 // ...
}

作用：使用yarn安裝所有依賴。

serve

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "serve": "npx --max_old_space_size=4096 vite",
 // ...
}

作用：以開發環境運行項目，並設置node的運行內存為4G。

--max-old-space-size：單位為MB
--max-new-space-size：單位為KB
node命令行文檔
npx的Git首頁，有命令行說明
–max-old-space-size参数说明

dev

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "dev": "npx --max_old_space_size=4096 vite",
 // ...
}

作用：同serve。

build

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "build": "vite build",
 // ...
}

作用：這裡先不管。先使用原來創建項目的"build": "vite build"。後面完成了vite配置之後再處理這個腳本。

build:no-cache

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "build:no-cache": "yarn clean:cache && npm run build",
 // ...
}

作用：清空緩存後構建。

report

作用：生成打包分析，這裡先不管，等後面配置vite再說。

preview

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "preview": "npm run build && vite preview",
 // ...
}

作用：先打包在進行預覽，使用vite訪問dist目錄。

preview:dist

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "preview:dist": "vite preview",
 // ...
}

作用：直接預覽本地 dist 文件目錄。

log

詳情查閱：使用conventional-changelog-cli生成變更記錄

作用：用來生產Git提交記錄的。

clean:cache

作用：刪除緩存，刪除node_modules/.cache/和node_modules/.vite下的文件，由於刪除命令依賴還沒安裝，所以後面再講。

clean:lib

作用：清除依賴，刪除node_modules文件夾，由於刪除命令依賴還沒安裝，所以後面再講。

lint:eslint

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
 // ...
}

作用：執行 eslint 校驗，該命令會對項目的src、mock目錄下的vue、ts、tsx文件進行 eslint 校驗，並修復部分問題。
參考連結：eslint命令行說明

lint:prettier

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
 // ...
}

作用：執行 prettier 格式化代碼。該命令會對項目所有代碼進行 prettier 格式化。謹慎執行。

如果你的vsCode安裝了prettier插件。那麼prettier插件就會讀取根目錄下的prettier.config.js文件。當你保存的時候就會進行格式化文件。
但是過是別人提交上來的文件，你還去點開它的文件一個一個保存麼？所以執行這個命令，可以將src目錄下，所有的文件格式化。

參考連結：prettier命令行說明

lint:stylelint

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
 // ...
}

作用：校驗所有文件的樣式格式，並嘗試修復。

參考連結：stylelint命令行说明

lint:ls-lint

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:ls-lint": "ls-lint",
 // ...
}

作用：校驗所有文件命名是否正確。

lint:lint-staged

需先創建lint-staged的配置文件

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
 // ...
}

作用：對Git暫存的文件進行lint檢查。

lint:pretty

需先創建lint-staged的配置文件

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "lint:pretty": "pretty-quick --staged",
 // ...
}

作用：對Git暫存文件進行pretty的操作。

test:gzip

作用：這個後面再說，http-server的npm首頁。

test:br

作用：這個後面再說，http-server的npm首頁。

reinstall

作用：重新安裝依賴，該命令會先刪除 node_modules、yarn.lock、package.lock.json後在進行依賴重新安裝，速度會明顯變慢。

由於刪除命令依賴還沒安裝，所以後面再講。

install:husky

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "install:husky": "is-ci || husky install",
 // ...
}

作用：這個是用來初始化husky的。啟用Git掛鉤。

說明：如果不是CI服務器，就啟動Git鉤子。

gen:icon

作用：生成圖標的，後面再說。

postinstall

需先配置 husky

代碼：

package.json

1
2
3
4
5


"scripts": {
 // ...
 "postinstall": "npm run install:husky",
 // ...
}

作用：執行install:husky命令。這個命令會自動啟動Git鉤子，該操作參考：手動初始化husky和Yarn2下怎麼自動啟動Git鉤子函數。

彙總

package.json除腳本、運行依賴、開發依賴外的字段參考官方文檔。

yarn -v的腳本是後面要說的腳本。

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29


{
 // ...
 "scripts": {
 "bootstrap": "yarn install",
 "serve": "npx --max_old_space_size=4096 vite",
 "dev": "npx --max_old_space_size=4096 vite",
 "build": "vite build",
 "build:no-cache": "yarn clean:cache && npm run build",
 "report": "yarn -v",
 "preview": "npm run build && vite preview",
 "preview:dist": "vite preview",
 "log": "yarn -v",
 "clean:cache": "yarn -v",
 "clean:lib": "yarn -v",
 "lint:eslint": "eslint \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
 "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
 "lint:stylelint": "stylelint --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
 "lint:ls-lint": "ls-lint",
 "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
 "lint:pretty": "pretty-quick --staged",
 "test:gzip": "yarn -v",
 "test:br": "yarn -v",
 "reinstall": "yarn -v",
 "install:husky": "is-ci || husky install",
 "gen:icon": "yarn -v",
 "postinstall": "npm run install:husky"
 },
 // ...
}

安裝rimraf

說明

由於手動刪除文件夾太慢了，需要實現腳本刪除文件。

參考連結

rimraf的npm首頁

rimraf的npm首頁說明：
The UNIX command rm -rf for node.
Install with npm install rimraf, or just drop rimraf.js somewhere.

翻譯：

node版的Unix系統命令rm -rf。
用npm安裝rimraf，或者直接把rimraf.js放在某個地方。
雖然這裡可以通過import使用函數刪除文件，但是我們主要是使用它的命令行蛤。

詳情查看：rimraf的npm首頁-Cil說明。

安裝

1

yarn add rimraf --dev

重寫腳本

就是根目錄下package.json的scripts字段。

clean:cache

package.json

1
2
3
4
5


"scripts": {
 // ...
 "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
 // ...
}

目的：刪除緩存，刪除`node_modules/.cache/`和`node_modules/.vite`下的文件。

clean:lib

package.json

1
2
3
4
5


"scripts": {
 // ...
 "clean:lib": "rimraf node_modules",
 // ...
}

目的：清除依賴，刪除`node_modules`文件夾。

reinstall

package.json

1
2
3
4
5


"scripts": {
 // ...
 "reinstall": "rimraf yarn.lock && rimraf package.lock.json && rimraf node_modules && npm run bootstrap",
 // ...
}

目的：重新安裝依賴，該命令會先刪除 `node_modules`、`yarn.lock`、`package.lock.json`後在進行依賴重新安裝，速度會明顯變慢。

使用husky規范代碼提交

說明

使用Git提交代碼的時候，需要對暫存的代碼進行如下操作：

進行lint操作。
對commit的消息進行格式化檢查。
進行prettier操作。

需要安裝的依賴有：husky、lint-staged、@commitlint/cli、@commitlint/config-conventional、pretty-quick、is-ci。

husky：可以在Git的鉤子函數中執行腳本。
lint-staged：針對暫存文件進行lint操作。
@commitlint/cli：對commit的消息進行格式檢查。
@commitlint/config-conventional：commit的消息檢查格式傳統配置，對應還有很多其他配置，比如angular的提交規範@commitlint/config-angular。
pretty-quick：針對暫存文件進行prettier操作。
is-ci：husky好像不能在ci環境下執行，這個依賴是用來判斷是不是ci環境的。

參考連結

安裝

1

yarn add husky lint-staged @commitlint/cli @commitlint/config-conventional pretty-quick is-ci --dev

配置commitlint

在根目錄下創建commitlint.config.js文件。

commitlint.config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75


module.exports = {
 // ↓ 忽略包含init的提交消息
 ignores: [(commit) => commit.includes('init')],

 // ↓ 按照传统消息格式来验证
 extends: ['@commitlint/config-conventional'],

 // ↓ 这里是自定义解析器，看不太懂，直接搬代码吧
 // ↓ https://commitlint.js.org/#/reference-configuration?id=parser-presets
 parserPreset: {
 parserOpts: {
 headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
 headerCorrespondence: ['type', 'scope', 'subject'],
 referenceActions: [
 'close',
 'closes',
 'closed',
 'fix',
 'fixes',
 'fixed',
 'resolve',
 'resolves',
 'resolved'
 ],
 issuePrefixes: ['#'],
 noteKeywords: ['BREAKING CHANGE', '不兼容变更'],
 fieldPattern: /^-(.*?)-$/,
 revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
 revertCorrespondence: ['header', 'hash'],
 warn() {},
 mergePattern: null,
 mergeCorrespondence: null
 }
 },

 // ↓ 自定义提交消息规则
 rules: {
 // ↓ body以空白行开头
 'body-leading-blank': [2, 'always'],

 // ↓ footer以空白行开头
 'footer-leading-blank': [1, 'always'],

 // ↓ header的最大长度
 'header-max-length': [2, 'always', 108],

 // ↓ subject为空
 'subject-empty': [2, 'never'],

 // ↓ type为空
 'type-empty': [2, 'never'],

 // ↓ type的类型
 'type-enum': [
 2,
 'always',
 [
 'feat',
 'fix',
 'perf',
 'style',
 'docs',
 'test',
 'refactor',
 'build',
 'ci',
 'chore',
 'revert',
 'wip',
 'workflow',
 'types'
 ]
 ]
 }
};

配置husky

啟動Git鉤子

1

npx husky install

這個時候就在根目錄下創建了.husky目錄了。 vben將裡面的一個文件夾刪除了。

修復YarnOnWindowsBug

官方參考連結

在帶有Git Bash（stdin is not a tty）的Windows上使用Yarn時，Git掛鉤可能會失敗。如果您有Windows用戶，則強烈建議添加以下解決方法。

創建.husky/common.sh：

1
2
3
4
5
6
7
8


command_exists () {
 command -v "$1" >/dev/null 2>&1
}

# Workaround for Windows 10, Git Bash and Yarn
if command_exists winpty && test -t 1; then
 exec < /dev/tty
fi

在使用Yarn運行命令的地方將其來源：

1
2
3
4
5


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

yarn ...

這裡是yarn命令的地方要這樣用，其他地方要不要無所謂。第二步可以先不管。

創建lint-staged的配置文件

lint:lint-staged

package.json

1
2
3


"scripts": {
 "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js"
}

作用：對Git暫存的文件進行lint檢查。

lint:pretty

package.json

1
2
3


"scripts": {
 "lint:pretty": "pretty-quick --staged"
}

作用：對Git暫存文件進行pretty的操作。

install:husky

package.json

1
2
3


"scripts": {
 "install:husky": "is-ci || husky install"
}

作用：如果不是CI服務器，就啟動Git鉤子。

postinstall

package.json

1
2
3


"scripts": {
 "postinstall": "npm run install:husky"
}

作用：執行install:husky命令。這個命令會自動啟動Git鉤子，參考文檔。

給husky添加任務

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# 啟動husky
yarn install:husky

# 添加commit消息檢查任務到`.husky/commit-msg`文件中
# 這裡我一直執行不出來，是引號引其的問題，大家可以先創建空的然後把命令複製進去
# npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
npx husky add .husky/commit-msg

# 創建一個任務文件
npx husky add .husky/pre-commit

手動修改.husky/commit-msg文件：
這裡面的$1一定要用雙引號，不然後面執行會報錯。

.husky/commit-msg

1
2
3
4


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit "$1"

手動修改.husky/pre-commit文件：

參考連結：

最後手動執行之前創建的腳本命令。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"

[ -n "$CI" ] && exit 0

# Check the file name
# ! ls-lint cannot be used normally in mac pro of M1 system.
npm run lint:ls-lint

# Format and submit code according to lintstagedrc.js configuration
npm run lint:lint-staged

npm run lint:pretty

測試

失敗測試

最好先重啟你的ide

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


git add .
git commit -m "隨便打一些消息"

> vben3@0.0.0 lint:ls-lint F:\CodeLearn\vben\vben3
> ls-lint

> vben3@0.0.0 lint:lint-staged F:\CodeLearn\vben\vben3
> lint-staged -c ./.husky/lintstagedrc.js

[STARTED] Preparing...
# 一系列檢查...
[SUCCESS] Cleaning up...

> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

�🔍 Finding changed files since git revision 1346762.
�🎯 Found 2 changed files.
✅ Everything is awesome!
⧗ input: 隨便打一些消息
✖ subject may not be empty [subject-empty]
✖ type may not be empty [type-empty]

✖ found 2 problems, 0 warnings
ⓘ Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint

husky - commit-msg hook exited with code 1 (error)

格式

出錯了，我們規範的提交消息試試：

@commitlint/config-conventional的規範+我們自定義的規則。

type: some message

類型英文	類型中文
build	建立
chore	雜事
ci	ci
docs	文檔
feat	壯舉
fix	修復
perf	敷衍
refactor	重構
revert	恢復
style	樣式
test	測試

成功測試

提交成功，當然你不用擔心這樣手敲太麻煩了，後面還有插件可以自動幫你敲這些格式。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


git commit -m "feat: 我們成功的規範了Git提交!"

> vben3@0.0.0 lint:pretty F:\CodeLearn\vben\vben3
> pretty-quick --staged

 �🔍 Finding changed files since git revision 1346762.
 �🎯 Found 2 changed files.
✅ Everything is awesome!
[master 6c61fc5] feat: 我們成功的規範了Git提交!
 7 files changed, 104 insertions(+), 4 deletions(-)
 create mode 100644 .husky/.gitignore
 create mode 100644 .husky/commit-msg
 create mode 100644 .husky/common.sh
 create mode 100644 .husky/lintstagedrc.js
 create mode 100644 .husky/pre-commit

# 推送出去
git push -u origin master

使用conventional-changelog-cli生成變更記錄

說明

在VbenAdmin項目的腳本命令和根目錄中還有CHANGELOG.md這麼個文件，這是記錄我們項目變更記錄的MD。明顯不是手寫出來的，那麼怎麼生成？

參考連結：

安裝

1

yarn add global conventional-changelog-cli --dev

配置腳本

package.json文件中的scripts字段。

package.json

1
2
3
4
5


"scripts": {
 // ...
 "log": "conventional-changelog -p angular -i CHANGELOG.md -s",
 // ...
}

測試

1

yarn log

可以看見生成了CHANGELOG.md文件

1
2
3
4
5
6



# 0.0.0 (2022-10-13)

### Features

- 我们成功的规范了 Git 提交! ([6c61fc5](https://gitee.com/kuxiaoxin/vben3/commits/6c61fc5c0bc9d0ed551117eb00349ce82e35deea))

命令列參數

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73


> conventional-changelog --help

Generate a changelog from git metadata

 Usage
 conventional-changelog

 Example
 conventional-changelog -i CHANGELOG.md --same-file

 Options
 -i, --infile Read the CHANGELOG from this file
 # 從這個文件中讀取CHANGELOG。

 -o, --outfile Write the CHANGELOG to this file
 If unspecified, it prints to stdout
 # 將CHANGELOG寫入這個文件。
 # 如果沒有指定，則打印到stdout。

 -s, --same-file Outputting to the infile so you don\'t need to specify the same file as outfile
 # 輸出到infile，所以你不需要指定與outfile相同的文件。

 -p, --preset Name of the preset you want to use. Must be one of the following:
 angular, atom, codemirror, ember, eslint, express, jquery, jscs or jshint
 # 您要使用的預設名稱。必須是下列之一。
 # angular, atom, codemirror,
 # ember, eslint, express,
 # jquery, jscs, jshint。

 -k, --pkg A filepath of where your package.json is located
 Default is the closest package.json from cwd
 # 您的 package.json 所在的文件路徑。
 # 默認為cwd中最接近的package.json。

 -a, --append Should the newer release be appended to the older release
 Default: \false
 # 是否應將較新的版本附加到較舊的版本上？
 # 默認：不追加

 -r, --release-count How many releases to be generated from the latest
 If 0, the whole changelog will be regenerated and the outfile will be overwritten
 Default: 1
 # 將從最新的版本中生成多少個版本。
 # 如果為0，整個變更日誌將被重新生成，並且輸出文件將被覆蓋。
 # 默認值: 1

 --skip-unstable If given, unstable tags will be skipped, e.g., x.x.x-alpha.1, x.x.x-rc.2
 # 如果給定，將跳過不穩定的標籤，例如，x.x.x-alpha.1, x.x.x-rc.2。

 -u, --output-unreleased Output unreleased changelog
 # 輸出未發布的變更日誌。

 -v, --verbose Verbose output. Use this \for debugging
 Default: \false
 # Verbose 輸出。用來調試
 # 默認：不輸出

 -n, --config A filepath of your config script
 Example of a config script: https://github.com/conventional-changelog/conventional-changelog/blob/master/packages/conventional-changelog-cli/test/fixtures/config.js
 # 配置腳本的文件路徑。
 # 配置腳本的例子：
 # https://github.com/conventional-changelog
 # /conventional-changelog/blob/master/packages
 # /conventional-changelog-cli/test/fixtures/config.js

 -c, --context A filepath of a json that is used to define template variables
 # 一個用於定義模板變量的json文件路徑。
 -l, --lerna-package Generate a changelog \for a specific lerna package (:pkg-name@1.0.0)
 # 為一個特定的lerna包生成一個變更日誌(:pkg-name@1.0.0)
 -t, --tag-prefix Tag prefix to consider when reading the tags
 # 讀取標籤時要考慮的標籤前綴。
 --commit-path Generate a changelog scoped to a specific directory
 # 生成一個特定目錄下的變更日誌。

配置Vite

說明

本章只是準備，大家可以直接把VbenAdmin的vite.config.ts原代碼複製到我們的項目中。然後把報錯的地方註釋掉。接下來的章節會把這個文件一段一段的解析出來。章節做太長了大家應該也不喜歡看，至少我不喜歡看長文章。

代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105


import type { UserConfig, ConfigEnv } from 'vite';

import { loadEnv } from 'vite';
import { resolve } from 'path';

// import { generateModifyVars } from './build/config/themeConfig';
// import { createProxy } from './build/vite/proxy';
// import { wrapperEnv } from './build/utils';
// import { createVitePlugins } from './build/vite/plugin';
// import { OUTPUT_DIR } from './build/constant';

function pathResolve(dir: string) {
 return resolve(__dirname, '.', dir);
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
 const root = process.cwd()

 const env = loadEnv(mode, root)

 // The boolean type read by loadEnv is a string. This function can be converted to boolean type
 // const viteEnv = wrapperEnv(env);

 // const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;

 // const isBuild = command === 'build';

 return {
 // base: VITE_PUBLIC_PATH,
 root,
 resolve: {
 alias: [
 {
 // /@/xxxx => src/xxx
 find: /^\/@\//,
 replacement: pathResolve('src') + '/'
 },
 {
 // /#/xxxx => types/xxx
 find: /^\/#\//,
 replacement: pathResolve('types') + '/'
 }
 ]
 },
 server: {
 // port: VITE_PORT,
 // Load proxy configuration from .env
 // proxy: createProxy(VITE_PROXY),
 hmr: {
 overlay: true
 }
 },

 build: {
 // minify: 'esbuild',
 // outDir: OUTPUT_DIR,
 // polyfillDynamicImport: VITE_LEGACY,
 terserOptions: {
 compress: {
 keep_infinity: true,
 // Used to delete console in production environment
 // drop_console: VITE_DROP_CONSOLE,
 },
 },
 // Turning off brotliSize display can slightly reduce packaging time
 brotliSize: false,
 chunkSizeWarningLimit: 1200
 },
 define: {
 // setting vue-i18-next
 // Suppress warning
 __VUE_I18N_LEGACY_API__: false,
 __VUE_I18N_FULL_INSTALL__: false,
 __INTLIFY_PROD_DEVTOOLS__: false
 },
 css: {
 preprocessorOptions: {
 less: {
 modifyVars: {
 // Used for global import to avoid the need to import each style file separately
 // reference: Avoid repeated references
 hack: `true; @import (reference) "${resolve('src/design/config.less')}";`
 // ...generateModifyVars(),
 },
 javascriptEnabled: true
 }
 }
 },

 // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
 // plugins: createVitePlugins(viteEnv, isBuild),

 optimizeDeps: {
 // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
 include: [
 '@iconify/iconify',
 'ant-design-vue/es/locale/zh_CN',
 'moment/dist/locale/zh-cn',
 'ant-design-vue/es/locale/en_US',
 'moment/dist/locale/eu',
 ],
 exclude: ['vue-demi']
 }
 }
}

Node的path.resolve方法

說明

psth.resolve([...paths])方法是NodeApi中path模塊的方法。

參考連結

VbenAdmin原代碼

1
2
3
4
5


import { resolve } from 'path'

function pathResolve(dir: string) {
 return resolve(__dirname, '.', dir)
}

代碼在項目中報錯

此時引入項目會報錯：找不到 path。
因為我們沒有安裝node的聲明文件，ts裡面沒有。

1

yarn add @types/node --dev

這個開發依賴在原VbenAdmin項目中沒有，是因為其他依賴中有這個依賴。
但是我們現在還沒有安裝包含@types/node的依賴。
剩下的依賴裡面有很多這樣的依賴，我們也不去猜是哪個依賴了。
反正是一個開發依賴，我們直接自己手動安裝了。

resolve方法

該方法百度上有兩種說法：

從後向前，生成絕對路徑。

若字符以 / 開頭，不會拼接到前面的路徑（因為拼接到此已經是一個絕對路徑）。
若以 ../ 開頭，拼接前面的路徑，且不含最後一節路徑。
若以 ./ 開頭或者沒有符號則拼接前面路徑。
需要注意的是：如果在處理完所有給定的 path 片段之後還未生成絕對路徑，則再加上當前工作目錄。

每一個參數都理解為一個cd命令。最終cd到哪個路徑。返回該絕對路徑。

__dirname

NodeApi的__dirname：當前模塊目錄名。

在線運行

1
2
3
4
5
6


const path = require('path')
console.log(__dirname)
console.log(path.resolve(__dirname, '.', 'src'))

// /tmp/B3YQQ1
// /tmp/B3YQQ1/src

Vite的情景配置

說明

本章收集了一些Vite如何根據不同環境進行不同配置的資料。

參考連結

代碼

總之不管使用什麼方式配置Vite，最後返回的就只是一個對象。對像中包含Vite配置的細節。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


export default ({ command, mode }) => {
 if (command === "serve") {
 return {
 // serve 獨有配置
 }
 } else {
 return {
 // build 獨有配置
 }
 }
}

參數說明

vite目前只有vite、vite build、vite preview這三種命令。以下是這三種命令的command和mode的值。

vite
- command：serve
- mode：development
vite build
- command：build
- mode：production
vite preview
- command：serve
- mode：development

Node的process

說明

返回 Node.js 進程的當前工作目錄。

參考連結

代碼

1

process.cwd()

Vite的loadEnv方法

說明

檢查process.cwd()路徑下.env.development.local、.env.development、.env.local、.env這四個環境文件。
輸出NODE_ENV和VITE_開頭的鍵值對。
VITE_開頭的鍵值對後面的不會覆蓋前面的。
NODE_ENV的值後面的會覆蓋前面的。

參考連結

原始碼

前置代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


// ↓ 加載node的path模塊
var path$1 = require('path');
var fs$2 = require('fs');

// ↓ 傳入的如果是一個包含'default'的key的對象，則輸出對象的'default'的key對應的value。
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e['default'] : e; }

// ↓ 結合上面二者
var path__default = /*#__PURE__*/_interopDefaultLegacy(path$1);
var fs__default = /*#__PURE__*/_interopDefaultLegacy(fs$2);

// ↓ 檢查dir下是否有formats中的路徑，返回有就返迴路徑或者文件
function lookupFile(dir, formats, pathOnly = false) {
 for (const format of formats) {
 // ↓ 輸出dir和formats連接後的路徑
 const fullPath = path__default.join(dir, format);

 // ↓ 同步的檢查該路徑是否存在，並且該路徑對應的是一個文件
 if (fs__default.existsSync(fullPath) && fs__default.statSync(fullPath).isFile()) {

 // ↓ 是否只要輸出路徑，否則輸出文件
 return pathOnly ? fullPath : fs__default.readFileSync(fullPath, 'utf-8');
 }
 }

 // ↓ 上面的路徑都不滿足輸出條件，那麼再檢查一遍檢查傳入的dir的目錄名
 const parentDir = path__default.dirname(dir);
 if (parentDir !== dir) {
 return lookupFile(parentDir, formats, pathOnly);
 }
}

代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64


// 從傳參的root目錄下獲取
// 按順序 .env.${mode}.local、.env.${mode}、.env.local、.env這四個環境文件
// 輸出文件內配置的對象
function loadEnv(mode, root, prefix = 'VITE_') {
 if (mode === 'local') {
 // ↓ 如果第一個參數傳入'local'，就報錯：
 // ↓ "local "不能用作模式名稱，因為它與``.env文件的.local後綴衝突。
 throw new Error(`"local" cannot be used as a mode name because it conflicts with ` +
 `the .local postfix for .env files.`);
 }

 // ↓ 待輸出的環境變量對象
 const env = {};

 // ↓ 要讀取的四個文件名稱的字符串數組
 const envFiles = [
 /** mode local file */ `.env.${mode}.local`,
 /** mode file */ `.env.${mode}`,
 /** local file */ `.env.local`,
 /** default file */ `.env`
 ];

 // ↓ 檢查是否有實際的以VITE_*開頭的環境變量。
 // ↓ 這些通常是Node內聯提供的env對象，並應優先考慮。
 for (const key in process.env) {
 if (key.startsWith(prefix) && env[key] === undefined) {
 env[key] = process.env[key];
 }
 }


 for (const file of envFiles) {
 // ↓ 檢查根目錄下是否有指定配置文件
 const path = lookupFile(root, [file], true);
 if (path) {

 // ↓ 以換行為單位輸出文件中KEY=VAL格式的到結果對像中
 const parsed = main$2.parse(fs__default.readFileSync(path), {
 debug: !!process.env.DEBUG || undefined
 });

 // ↓ 讓環境變量互相使用，這個方法我沒仔細研究。不是很懂
 main$1({
 parsed,

 // ↓ 防止process.env修改
 ignoreProcessEnv: true
 });

 // ↓ 只輸出以prefix開頭的key
 for (const [key, value] of Object.entries(parsed)) {
 // ↓ 只有這個key在前面沒有加載過才賦值
 if (key.startsWith(prefix) && env[key] === undefined) {
 env[key] = value;
 }
 else if (key === 'NODE_ENV') {
 // ↓ 在.env文件中覆蓋NODE_ENV。
 process.env.VITE_USER_NODE_ENV = value;
 }
 }
 }
 }
 return env;
}

Vben中的wrapperEnv方法

說明

1
2


// The boolean type read by loadEnv is a string. This function can be converted to boolean type
const viteEnv = wrapperEnv(env);

翻譯如下：

loadEnv讀取的布爾類型是一個字符串。該函數可以轉換為布爾類型。

創建wrapperEnv方法

從這開始涉及到根目錄下的build文件夾了。創建該文件夾。我們使用build文件夾裝所有關於項目構建類的東西。

創建定義文件

根目錄下的build文件夾創建typeing.d.ts文件。

typeing.d.ts

1
2
3
4
5
6


declare module '*.json' {
 const src: any;
 export default src;
}

declare type Recordable = Record<string, any>;

參考連結

TS通用模塊聲明
TS的高級類型Record
允許導入Json這段代碼，寫在哪都行。 TS都會加載到。

定義Env對像類型

根目錄下的build文件夾創建utils.ts文件。

utils.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


export interface ViteEnv {
 VITE_PORT: number
 VITE_USE_MOCK: boolean
 VITE_USE_PWA: boolean
 VITE_PUBLIC_PATH: string
 VITE_PROXY: [string, string][]
 VITE_GLOB_APP_TITLE: string
 VITE_GLOB_APP_SHORT_NAME: string
 VITE_USE_CDN: boolean
 VITE_DROP_CONSOLE: boolean
 VITE_BUILD_COMPRESS: 'gzip' | 'brotli' | 'none'
 VITE_LEGACY: boolean
 VITE_USE_IMAGEMIN: boolean
}

導出的這個類型對應了我們配置文件中的Key。

格式化Env對象的wrapperEnv方法

在utils.ts文件中添加以下方法：

utils.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


export function wrapperEnv(envConf: Recordable): ViteEnv {
 const ret: any = {};

 for (const envName of Object.keys(envConf)) {
 let realName = envConf[envName].replace(/\\n/g, '\n');
 realName = realName === 'true' ? true : realName === 'false' ? false : realName;

 if (envName === 'VITE_PORT') {
 realName = Number(realName);
 }
 if (envName === 'VITE_PROXY') {
 try {
 realName = JSON.parse(realName);
 } catch (error) {}
 }
 ret[envName] = realName;
 process.env[envName] = realName;
 }
 return ret;
}

代碼說明：

中間的正則替換就是將\\n替換成\n，複製下面這些代碼可以去瀏覽器中體驗一下。
- console.log('asda\\\n\\n\n'.replace(/\n/g, '\n')) => asda\ [回車\n] \n [回車\n]
- console.log('asda\\\n\\n\n'.replace(/\\n/g, '\n')) => asda\ [回車\n] [回車\n] [回車\n]
- console.log('asda\\\n\\n\n'.replace(/\\\n/g, '\n')) => asda [回車\n] \n [回車\n]

vite.config.ts文件復盤

自此vite.config.ts，除return裡面的東西外，其他的都已經解析完了。以現在可以得到這樣一個代碼：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


import { resolve } from 'path';
import { ConfigEnv, loadEnv, UserConfig } from 'vite';
import { wrapperEnv } from './build/util';

function pathResolve(dir: string) {
 return resolve(__dirname, '.', dir);
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
 const root = process.cwd();
 const env = loadEnv(mode, root);
 const viteEnv = wrapperEnv(env);
 const { VITE_PORT, VITE_PUBLIC_PATH, VITE_PROXY, VITE_DROP_CONSOLE, VITE_LEGACY } = viteEnv;
 const isBuild = command === 'build';
 return {};
};

Vite配置-base

說明

Vite配置-base說明

官網原文：

類型： string
默認： /

開發或生產環境服務的公共基礎路徑。合法的值包括以下幾種：

絕對 URL 路徑名，例如 /foo/
完整的 URL，例如 https://foo.com/
空字符串或 ./（用於開發環境）

更多信息詳見公共基礎路徑。

就是你的項目的BaseURL。比如這裡我配置一個yiu
那麼我的項目訪問：http://localhost:3000/yiu/
當你訪問其他路徑就會報錯：http://localhost:3000/any/

1

The server is configured with a public base URL of /yiu/ - did you mean to visit /yiu/any/ instead?

Vite配置-root

說明

Vite配置-root說明

官網原文：

類型： string
默認： process.cwd()

項目根目錄（index.html 文件所在的位置）。可以是一個絕對路徑，或者一個相對於該配置文件本身的路徑。

更多信息詳見項目根目錄。

用來找index.html路徑的配置吧，亂寫啟動項目的時候會報錯。其他的也不用解釋了。

Vite配置-resolve.alias

說明

Vite配置-resolve.alias說明

官網原文：

類型：

1

Record<string, string> | Array<{ find: string | RegExp, replacement: string }>

將會被傳遞到 @rollup/plugin-alias 作為它的 entries。也可以是一個對象，或一個 { find, replacement } 的數組。
當使用文件系統路徑的別名時，請始終使用絕對路徑。相對路徑作別名值將按原樣使用導致不會解析到文件系統路徑中。
更高級的自定義解析方法可以通過插件實現。

`VbenAdmin`的示例：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


resolve: {
 alias: [
 {
 // /@/xxxx => src/xxx
 find: /^\/@\//,
 replacement: pathResolve('src') + '/',
 },
 {
 // /#/xxxx => types/xxx
 find: /^\/#\//,
 replacement: pathResolve('types') + '/',
 },
 ],
},

Vite配置-server.port

說明

Vite配置-server.port說明

官網原文：

類型： number

指定服務器端口。注意：如果端口已經被使用，Vite 會自動嘗試下一個可用的端口，所以這可能不是服務器最終監聽的實際端口。

Vite配置-server.proxy

說明

官網原文：

類型：

1

Record<string, string | ProxyOptions>

為開發服務器配置自定義代理規則。期望接收一個 { key: options } 對象。如果 key 值以 ^ 開頭，將會被解釋為 RegExp。
使用 http-proxy。完整選項詳見此處。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


export default {
 server: {
 proxy: {
 // 字符串簡寫寫法
 '/foo': 'http://localhost:4567/foo',
 // 選項寫法
 '/api': {
 target: 'http://jsonplaceholder.typicode.com',
 changeOrigin: true,
 rewrite: (path) => path.replace(/^\/api/, '')
 },
 // 正則表達式寫法
 '^/fallback/.*': {
 target: 'http://jsonplaceholder.typicode.com',
 changeOrigin: true,
 rewrite: (path) => path.replace(/^\/fallback/, '')
 }
 }
 }
}

VbenAdmin代碼解析

我們在build文件夾下創建一個vite文件，這麼放置所有和vite配置有關的文件。然後完成本章兩個文件的編寫。

proxy.ts

build\vite\proxy.ts，注意，這裡帶註解的代碼和原代碼不一樣。因為原代碼我感覺有點問題。
Vite官方文檔說代理配置接收的是一個Record<string, string | ProxyOptions>對象。而這個文件的主要方法返回的是ProxyTargetList類型的對象。

按理來說ProxyTargetList應該直接等於Record<string, string | ProxyOptions>。

但是VbenAmin的代碼安裝了一個@types/http-proxy（雖然Vite本身的代理就是用http-proxy實現的）的開發依賴。然後從這個開發依賴裡面導入一個ServerOptions。讓ProxyTargetList等於Record<string, ServerOptions & { rewrite: (path: string) => string }>。

個人感覺可以直接使用vite提供的類型即可，不用安裝@types/http-proxy的聲明文件。

代碼

被代理之後，訪問的路徑是代理至的路徑 + 訪問的路徑去掉根路徑後經過rewrite處理的路徑。

build/vite/proxy.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46


/**
 * .env.development 的 代理配置
 */
import type { ProxyOptions } from 'vite';

// ↓ 第一项被代理的路径，第二项代理至的路径
type ProxyItem = [string, string];


// ↓ 方法接收的参数
type ProxyList = ProxyItem[];


// ↓ Vite代理所接收对象类型
type ProxyTargetList = Record<string, string | ProxyOptions>;


// ↓ https类型的URL的匹配正则
const httpsRE = /^https:\/\//;

/**
 * 生成Vite代理配置的方法
 */
export function createProxy(list: ProxyList = []) {
 const ret: ProxyTargetList = {};
 for (const [prefix, target] of list) {
 const isHttps = httpsRE.test(target);

 // https://github.com/http-party/node-http-proxy#options
 ret[prefix] = {
 // ↓ 代理至的路径
 target: target,

 // ↓ 默认值：false-将主机标头的来源更改为目标URL
 changeOrigin: true,

 // ↓ 如果您想代理websocket
 ws: true,
 rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),

 // https is require secure=false
 ...(isHttps ? { secure: false } : {}),
 };
 }
 return ret;
}

vite.config.ts

直接將上面定義的生成代理配置的方法放到vite.config.ts中使用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// ...
import { createProxy } from './build/vite/proxy';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 server: {
 // ...
 // 從.env加載代理配置
 proxy: createProxy(VITE_PROXY),
 },
 // ...
 };
};

Vite配置-server.hmr

說明

Vite配置-server.hmr說明

官網原文：

類型：

1

boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: boolean }

禁用或配置 HMR 連接（用於 HMR websocket 必須使用不同的 http 服務器地址的情況）。

設置 server.hmr.overlay 為 false 可以禁用服務器錯誤遮罩層。

這個就是配置Vite的熱更新的。文檔中說的服務器錯誤遮罩層，就是你在代碼中編寫編寫錯誤的代碼，編譯不通過的時候，瀏覽器頁面也會同時展示一個灰屏上面顯示你的代碼錯誤。

Vite配置-build.minify

說明

Vite配置-build.minify說明

官網原文：

類型：
1

boolean | 'terser' | 'esbuild'
默認：terser

設置為 false 可以禁用最小化混淆，或是用來指定使用哪種混淆器。默認為 Terser，雖然 Terser 相對較慢，但大多數情況下構建後的文件體積更小。 ESbuild 最小化混淆更快但構建後的文件相對更大。

Vite配置-build.outDir

說明

Vite配置-build.outDir說明

官網原文：

類型：string
默認：dist

指定輸出路徑（相對於項目根目錄)。

創建全局常數

這個輸出路徑我們把它寫成一個全局常量。全局常量保存在：build\constant.ts

build\constant.ts

1
2
3
4
5
6


/**
 * 在生产环境中输入的配置文件名称。
 */
export const GLOB_CONFIG_FILE_NAME = '_app.config.js';

export const OUTPUT_DIR = 'dist';

然後在vite.config.ts中引用：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ...
import { OUTPUT_DIR } from './build/constant';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 build: {
 outDir: OUTPUT_DIR,
 },
 // ...
 };
};

Vite配置-build.polyfillDynamicImport

說明

官網原文：

類型：boolean
默認：true，除非build.target是esnext。

是否自動注入動態導入polyfill。

polyfill會自動注入到每個index.html條目的代理模塊中。如果通過build.rollupOptions.input配置成使用非html的自定義條目，那麼就需要手動導入自定義條目中的polyfill：

1

import 'vite/dynamic-import-polyfill'

注意：polyfill不適用於庫模式。如果你需要支持沒有本地動態導入的瀏覽器，你可能應該避免在你的庫中使用它。

Vite使用ES動態導入作為代碼分割點。生成的代碼還將使用動態導入來加載異步塊。然而，本機ESM動態導入支持是在ESM之後通過腳本標記實現的，並且這兩個特性在瀏覽器支持方面存在差異。 Vite會自動注入一個輕量級的動態導入填充來消除這種差異。

如果你知道你的目標瀏覽器只支持本機動態導入，你可以通過build.polyfillDynamicImport顯式禁用此特性。

總之VbenAdmin中在生產環境將此項禁用了。如果打包後的項目有問題，而本地運行沒問題。那麼嘗試打開它，因為這個配置貌似和瀏覽器有關。

創建全局常數

這個輸出路徑我們把它寫成一個全局常量。全局常量保存在：build\constant.ts

build\constant.ts

1
2
3
4
5
6


/**
 * 在生产环境中输入的配置文件名称。
 */
export const GLOB_CONFIG_FILE_NAME = '_app.config.js';

export const OUTPUT_DIR = 'dist';

然後在vite.config.ts中引用：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ...
import { OUTPUT_DIR } from './build/constant';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 build: {
 outDir: OUTPUT_DIR,
 },
 // ...
 };
};

Vite配置-build.terserOptions

說明

Vite配置-build.terserOptions說明

官網原文：

類型：TerserOptions

傳遞給 Terser 的更多 minify 選項。

其他的配置項自行研究，這裡只註釋一下VbenAdmin配置的代碼。

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 build: {
 // ...
 terserOptions: {
 compress: {
 keep_infinity: true,
 // 用於刪除生產環境中的console
 drop_console: VITE_DROP_CONSOLE,
 },
 },
 },
 // ...
 };
};

compress：（默認{}）-通過false以完全跳過壓縮。傳遞一個對像以指定自定義壓縮選項。
compress.keep_infinity：（默認值：false）-通過true以防止Infinity被壓縮為1/0，這可能會導致Chrome出現性能問題。
compress.drop_console：（默認值：false）-傳遞true以放棄對console.*函數的調用。如果您希望在刪除函數調用後刪除特定的函數調用，例如console.info和/或保留函數自變量的副作用，請pure_funcs改用。

Vite配置-build.brotliSize

說明

Vite配置-build.brotliSize說明

官網原文：

類型：boolean
默認：true

啟用/禁用 brotli 壓縮大小報告。壓縮大型輸出文件可能會很慢，因此禁用該功能可能會提高大型項目的構建性能。

禁用就好。

效果對比

打開壓縮報告：4.90s

關閉壓縮報告：3.50s，少了後面一串壓縮大小，肯定更快啦。

Vite配置-build.chunkSizeWarningLimit

說明

Vite配置-build.chunkSizeWarningLimit說明

官網原文：

類型：number
默認：500

chunk 大小警告的限制（以 kbs 為單位）。

LimitChunkCountPlugin

在編寫代碼時，您可能已經添加了許多代碼拆分點以按需加載內容。編譯後，您可能會注意到一些塊太小了-造成更大的HTTP開銷。 LimitChunkCountPlugin可以通過合併來對您的塊進行後處理。

Vite配置-define

說明

Vite配置-define說明

官網原文：

類型：
1

Record<string, string>

定義全局變量替換方式。每項在開發時會被定義為全局變量，而在構建時則是靜態替換。

從 2.0.0-beta.70 版本開始，字符串值將作為一個直接的表達式，所以如果定義為了一個字符串常量，它需要被顯式地引用（例如：通過 JSON.stringify）。
替換只會在匹配到周圍是單詞邊界（\b）時執行。

使用

看一下vue-i18n的應用。

vue-i18n的全局變量替換

原文：

Bundler 構建功能標誌

esm-bundler builds現在暴露了全局特性標誌，這些標誌可以在編譯時被覆蓋。

__VUE_I18N_FULL_INSTALL__：啟用/禁用，除了vue-i18n APIs，組件和指令都完全支持安裝：true
__VUE_I18N_LEGACY_API__：啟用/禁用vue-i18n傳統風格的API支持，默認為true
__INTLIFY_PROD_DEVTOOLS__：在生產中啟用/禁用intlify-devtools和vue-devtools支持，默認為false

在沒有配置這些標誌的情況下，編譯也能正常工作，但強烈建議正確配置這些標誌，以便在最終的bundle中獲得正確的樹形搖動。

要配置這些標誌：

webpack: 使用 DefinePlugin
Rollup: 使用 @rollup/plugin-replace
Vite：默認配置，但可以使用define選項覆蓋

注意：替換值必須是布爾文，不能是字符串，否則bundler/minifier將無法正確評估條件。

如此，就按照VbenAdmin的原代碼一樣配置吧。不然vue-i18n還會包警告，當然，現在我們還沒有安裝vue-i18n。後面配置國際化的時候再講。

Vite配置-css.preprocessorOptions

說明

Vite配置-css.preprocessorOptions說明

官網原文：

類型：
1

Record<string, object>

指定傳遞給 CSS 預處理器的選項。例如：

vite.config.ts

1
2
3
4
5
6
7
8
9


export default {
 css: {
 preprocessorOptions: {
 scss: {
 additionalData: `$injectedColor: orange;`
 }
 }
 }
}

安裝less

眾所周知Antd框架使用的是less。所以我們這裡研究less的配置。

安裝less：

1

yarn add less --dev

VbenAdmin的全局樣式

在根目錄下的：src\design文件夾中定義了VbenAdmin所有全局樣式和全局less變量。其中分為兩大類：

src\design\index.less：全局樣式，在main.ts中使用。
src\design\config.less：全局變量，在vite.config.ts中使用。

至於該文件夾下的其他文件，都被直接或間接的引入到了index.less、config.less中。

我們這邊直接拷貝文件夾就行了，樣式也沒啥研究的。如果有能力的可以把和index.less相關的文件都刪除了，然後自己寫關於VbenAdmin的樣式。
但是變量不能動，很多都antd的變量，antd 的 less 變量參考連結。
複製完之後，順便將index.less在main.ts中引用一下。

Vite中的Less配置

代碼配置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 css: {
 preprocessorOptions: {
 less: {
 modifyVars: {
 // 用於全局導入，以避免需要單獨導入每個樣式文件。
 // reference: 避免重複引用
 hack: `true; @import (reference) "${resolve('src/design/config.less')}";`,
 // ↓ 這行代碼下一章講
 // ...generateModifyVars(),
 },
 javascriptEnabled: true,
 },
 },
 },
 // ...
 };
};

代碼解析

less對應的對象可以查看lessjs-配置項。

javascriptEnabled: true這行代碼沒得說，畢竟antd的less文件中使用JS寫法，比如：\node_modules\ant-design-vue\lib\style\color\bezierEasing.less
modifyVars是在全局less文件後面添加變量的配置。 modifyVars對應的對象屬性名會加上@追加到less文件後。
hack: true; @import (r...：這一行代碼，在less文件中會被解析成：

1

@hack=true; @import (reference) "${resolve('src/design/config.less')}";

那這個hack變量是幹什麼的？我感覺啥也沒有，單純是為了將後面的@import接上的@import會報錯，只寫。這行代碼可以隨便寫，比如：

1
2
3


// yiu: `red; @import (reference) "${resolve('src/design/config.less')}";`,
// ↓ 解析成,一樣的效果。
@yiu=red; @import (reference) "${resolve('src/design/config.less')}";`,

我個人感覺這個hack和css hack單純名字一樣。至於reference，可以看一下關於Less js的@import實驗這篇博文即可理解。只是我個人疑惑為什麼這個import為什麼不寫在globalVars中。

Vite的顏色

說明

解析build\config\themeConfig.ts文件，直接創建這個文件。然後我們一段一段的分析：

1

yarn add ant-design-vue@next

第一部分3-16行代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


// ↓ 默認顏色
export const primaryColor = '#0960bd';

// ↓ 默認主題
export const themeMode = 'light';

// ↓ 主題類型
export type ThemeMode = 'dark' | 'light';

// ↓ 一個解決臨時檢查的方法類型
type Fn = (...arg: any) => any;

// ↓ Vite生成顏色組的方法參數，顏色這一塊有點深奧了，不做細的研究，感興趣的同學自己看看源碼吧
export interface GenerateColorsParams {
 mixLighten: Fn;
 mixDarken: Fn;
 tinycolor: any;
 color?: string;
}

第二部分18-22行代碼

1
2
3
4
5
6
7


import { generate } from '@ant-design/colors';

export function generateAntColors(color: string, mode: ThemeMode) {
 return generate(color, {
 theme: mode == 'dark' ? 'dark' : 'default',
 });
}

調用的@ant-design/colors的顏色生成方法，將參數簡化了一下。

參考連結：

第三部分24-32行代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


export function getThemeColors(color?: string, theme?: ThemeMode) {
 const tc = color || primaryColor;
 const tm = theme || themeMode;

 // ↓ 傳入的顏色根據主題生成10個顏色系列
 const colors = generateAntColors(tc, tm);

 // ↓ 取10個顏色的第6個作為主顏色
 const primary = colors[5];

 // ↓ 再使用主顏色根據主題生成10個顏色系列
 const modeColors = generateAntColors(primary, tm === 'dark' ? 'light' : 'dark');

 // ↓ 輸出這20個顏色
 return [...colors, ...modeColors];
}

第四部分34-71行代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38


export function generateColors({
 color = primaryColor,
 mixLighten,
 mixDarken,
 tinycolor,
}: GenerateColorsParams) {
 const arr = new Array(19).fill(0);
 const lightens = arr.map((t, i) => {
 return mixLighten(color, i / 5);
 });

 const darkens = arr.map((t, i) => {
 return mixDarken(color, i / 5);
 });

 const alphaColors = arr.map((t, i) => {
 return tinycolor(color)
 .setAlpha(i / 20)
 .toRgbString();
 });

 const tinycolorLightens = arr
 .map((t, i) => {
 return tinycolor(color)
 .lighten(i * 5)
 .toHexString();
 })
 .filter((item) => item !== '#ffffff');

 const tinycolorDarkens = arr
 .map((t, i) => {
 return tinycolor(color)
 .darken(i * 5)
 .toHexString();
 })
 .filter((item) => item !== '#000000');
 return [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens];
}

這裡直接根據顏色生成了98中顏色。我確實不太清楚這個麼多顏色幹什麼的。調用效果參考build\vite\plugin\theme.ts（現在先不管這個文件）：

build/vite/plugin/theme.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


/**
 * Vite plugin for website theme color switching
 * https://github.com/anncwb/vite-plugin-theme
 */
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '../../config/themeConfig';

export function configThemePlugin() {
 const colors = generateColors({
 mixDarken,
 mixLighten,
 tinycolor,
 });

 // ...
}

#0960bd生成的顏色：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37


console.log([...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens]);
// ↓ 輸出
[
 '#0960bd', '#3a80ca', '#6ba0d7',
 '#9dbfe5', '#cedff2', '#ffffff',
 '#13011f10c', '#16113f119', '#19315e127',
 '#1c417e134', '#1f519e141', '#2261be14e',
 '#2571de15b', '#2891fd169', '#2ba21d176',
 '#2eb23d183', '#31c25d190', '#34d27d19d',
 '#37f29c1ab', '#0960bd', '#074d97',
 '#053a71', '#04264c', '#021326',
 '#000000', '#-2-13-26', '#-4-26-4c',
 '#-5-3a-71', '#-7-4d-97', '#-9-60-bd',
 '#-b-73-e3', '#-d-86-109', '#-e-9a-12e',
 '#-10-ad-154', '#-12-c0-17a', '#-14-d3-1a0',
 '#-16-e6-1c6', '#-17-fa-1eb', 'rgba(9, 96, 189, 0)',
 'rgba(9, 96, 189, 0.05)', 'rgba(9, 96, 189, 0.1)', 'rgba(9, 96, 189, 0.15)',
 'rgba(9, 96, 189, 0.2)', 'rgba(9, 96, 189, 0.25)', 'rgba(9, 96, 189, 0.3)',
 'rgba(9, 96, 189, 0.35)', 'rgba(9, 96, 189, 0.4)', 'rgba(9, 96, 189, 0.45)',
 'rgba(9, 96, 189, 0.5)', 'rgba(9, 96, 189, 0.55)', 'rgba(9, 96, 189, 0.6)',
 'rgba(9, 96, 189, 0.65)', 'rgba(9, 96, 189, 0.7)', 'rgba(9, 96, 189, 0.75)',
 'rgba(9, 96, 189, 0.8)', 'rgba(9, 96, 189, 0.85)', 'rgba(9, 96, 189, 0.9)',
 '#0960bd', '#0854a5', '#07478c',
 '#063b74', '#042f5c', '#032243',
 '#02162b', '#010913', '#0960bd',
 '#0a6cd5', '#0b79ee', '#1e86f4',
 '#3793f5', '#4fa0f7', '#67adf8',
 '#80baf9', '#98c7fa', '#b0d4fb',
 '#c9e2fc', '#e1effe', '#f9fcff'
]


console.log(
 [...lightens, ...darkens, ...alphaColors, ...tinycolorDarkens, ...tinycolorLightens].length
 );
// ↓ 輸出
78

第五部分73-104行代碼

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32


/**
 * less global variable
 */
export function generateModifyVars() {
 const palettes = generateAntColors(primaryColor, themeMode);
 const primary = palettes[5];

 const primaryColorObj: Record<string, string> = {};

 for (let index = 0; index < 10; index++) {
 primaryColorObj[`primary-${index + 1}`] = palettes[index];
 }

 return {
 'primary-color': primary,
 ...primaryColorObj,
 'info-color': primary,
 'processing-color': primary,
 'success-color': '#55D187', // Success color
 'error-color': '#ED6F6F', // False color
 'warning-color': '#EFBD47', // Warning color
 'disabled-color': 'rgba(0, 0, 0, 0.25)', // Failure color
 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
 'text-color-secondary': 'rgba(0, 0, 0, 0.45)', // Subtext color
 'font-size-base': '14px', // Main font size
 'box-shadow-base': '0 2px 8px rgba(0, 0, 0, 0.15)', // Floating shadow
 'border-color-base': '#d9d9d9', // Border color,
 'border-radius-base': '2px', // Component/float fillet
 'link-color': primary, // Link color
 };
}

這個方法就是生成antd主題變量對象的。將該對象的結果放到Vite的less配置中：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// ...
import { generateModifyVars } from './build/config/themeConfig';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 css: {
 preprocessorOptions: {
 less: {
 modifyVars: {
 // ...
 ...generateModifyVars(),
 },
 // ...
 },
 },
 },
 // ...
 };
};

Vite配置-plugin

說明

Vite配置-plugin說明

官網原文：

類型：
1

(Plugin | Plugin[])[]

將要用到的插件數組。查看插件 API 獲取 Vite 插件的更多細節。

配置插件

它接收一個插件對象，或者一個插件數組。由於我們需要配置很多插件，而每一個插件的配置也不一樣，所以我們把插件數組封裝到一個方法中去。統一配置VbenAdmin的插件。

創建生成插件數組方法

build/vite/plugin/index.ts

1
2
3
4
5
6
7
8
9


import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 const { VITE_USE_IMAGEMIN, VITE_USE_MOCK, VITE_LEGACY, VITE_BUILD_COMPRESS } = viteEnv;

 const vitePlugins: (Plugin | Plugin[])[] = [];
 return vitePlugins;
}

後續配置vitePlugins這個數組。

配置Vite插件

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// ...
import { createVitePlugins } from './build/vite/plugin';
// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 // 項目使用的vite插件。數量大，單獨提取管理
 plugins: createVitePlugins(viteEnv, isBuild),

 // ...
 };
};

Vite插件-@vitejs-plugin-vue

說明

@vitejs/plugin-vue的npm首頁

要編寫Vue程序，這個不用解釋了吧，在使用Vite創建應用程序的時候，這個依賴就已經默認加上了。

引入組件

vue插件不用配置，可以直接放進去。

build/vite/plugin/index.ts

1
2
3
4
5
6
7
8
9


// ...
import vue from '@vitejs/plugin-vue';
// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 const vitePlugins: (Plugin | Plugin[])[] = [vue()];
 // ...
 return vitePlugins;
}

Vite插件-@vitejs-plugin-vue-jsx

說明

為什麼使用JSX？

其實JSX的效果和我們在vue的template中寫的代碼效果是一樣的。最終都會被渲染成createElement。
區別是template的標籤是不可變的，我們要實現動態標籤，只能使用v-if。而JSX的最大特點就是靈活，我們可以隨意組裝HTML代碼。

假如我們要實現一個組件渲染<hn></hn>標籤，n是我們傳入的參數。如果用template，那麼我們要寫6個v-if。但是如果使用JSX，我們就可以直接將n放到標籤中去。

參考連結

安裝

1

yarn add @vitejs/plugin-vue-jsx --dev

vue-jsx插件不用配置，可以直接放進去。

build/vite/plugin/index.ts

1
2
3
4
5
6
7
8
9


// ...
import vueJsx from '@vitejs/plugin-vue-jsx';
// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 const vitePlugins: (Plugin | Plugin[])[] = [vue(),vueJsx()];
 // ...
 return vitePlugins;
}

Vite插件-@vitejs-plugin-legacy

說明

原文描述：
注：此插件需要vite@^2.0.0-beta.12。
Vite默認的瀏覽器支持基線是原生ESM。本插件為不支持原生ESM的傳統瀏覽器提供支持。

默認情況下，該插件將為最終bundle中的每個chunk生成一個相應的legacy chunk，用@babel/reset-env進行轉換，並以SystemJS模塊的形式發布（仍然支持代碼分割！）。

生成一個包含SystemJS運行時的polyfill chunk，以及由指定的瀏覽器目標和捆綁包中的實際使用情況決定的任何必要的polyfills。

在生成的HTML中註入<script nomodule>標籤，以便在沒有本地ESM支持的瀏覽器中有條件地加載polyfills和legacy bundle。

注入 import.meta.env.LEGACY env 變量，該變量僅在 legacy 生產構建中為真，而在所有其他情況下為假。(需要vite@^2.0.0-beta.69)。

所以這個是一個瀏覽器兼容的插件。我們直接安裝使用，個人感覺學習的話也用不上。

參考連結

@vitejs/plugin-legacy的npm首頁

安裝

1

yarn add @vitejs/plugin-legacy --dev

VbenAdmin配置`build/vite/plugin/index.ts`：

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import legacy from '@vitejs/plugin-legacy';
// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 // @vitejs/plugin-legacy
 VITE_LEGACY && isBuild && vitePlugins.push(legacy());
 // ...
 return vitePlugins;
}

Vite插件-vite-plugin-html

說明

原文描述：

一個為index.html提供minify和基於EJS模板功能的Vite插件。

minify：壓縮index.html代碼。
EJS：給index.html提供訪問變量的能力。

參考連結

vite-plugin-html的npm首頁

安裝

1

yarn add vite-plugin-html --dev

創建配置文件

build/vite/plugin/html.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43


/**
 * Plugin to minimize and use ejs template syntax in index.html.
 * https://github.com/anncwb/vite-plugin-html
 */
import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';

import html from 'vite-plugin-html';

import pkg from '../../../package.json';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';

export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
 const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;

 // ↓ 這里後續章動態配置講解
 // const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;
 // const getAppConfigSrc = () => {
 // return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
 // };

 const htmlPlugin: Plugin[] = html({
 minify: isBuild,
 inject: {
 // Inject data into ejs template
 injectData: {
 title: VITE_GLOB_APP_TITLE,
 },
 // ↓ 這里後續章動態配置講解
 // tags: isBuild
 // ? [
 // {
 // tag: 'script',
 // attrs: {
 // src: getAppConfigSrc(),
 // },
 // },
 // ]
 // : [],
 },
 });
 return htmlPlugin;
}

配置Vite插件

build/vite/plugin/index.ts

1
2
3
4
5
6
7
8
9


// ...
import { configHtmlPlugin } from './html';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 // vite-plugin-html
 vitePlugins.push(configHtmlPlugin(viteEnv, isBuild));
 // ...
}

補充

做完本章操作之後，我突然發現項目不能編譯了。
總是報package.json找不到。我看了一下代碼，主要就是build\vite\plugin\html.ts中的導入無法找到。
我反復對比了一下VbenAdmin的源碼。也沒有發現有什麼不同的地方。
然後我又試了一下，當執行vite命令的時候，build文件夾下始終不能訪問package.json。但是src和vite.config.ts中都可以導入訪問。

那麼這裡有兩種講解方案：

去掉導入

這裡的導入只是我們在使用_app.config.js的時候加上一個版本信息。可以讓我們知道這個項目是多久打包的，打包的時候版本是多少。所以去掉也無妨，_app.config.js還是一樣可以訪問的。

從`vite.config.ts`中傳參下去

我使用了這個方案，因為萬一build文件夾其他地方要用package.json呢。不過用的地方應該也很少吧。

修改vite.config.ts：

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// ...
import pkg from './package.json';

// ...
export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 // The vite plugin used by the project. The quantity is large, so it is separately extracted and managed
 plugins: createVitePlugins(viteEnv, isBuild, pkg),
 // ...
 };
};

修改build/vite/plugin/index.ts：

build/vite/plugin/index.ts

1
2
3
4
5
6
7


// ...
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 vitePlugins.push(configHtmlPlugin(viteEnv, isBuild, pkg));

 return vitePlugins;
}

修改build/vite/plugin/html.ts：

build/vite/plugin/html.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// ...
import html from 'vite-plugin-html';

export function configHtmlPlugin(env: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 const getAppConfigSrc = () => {
 return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
 };
 // ...
 return htmlPlugin;
}

完善build的utils.ts

說明

完善build\utils.ts文件。

第一部分

除了這個process，應該也沒有要解釋的吧。

Node中文文檔-process

build/utils.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


export function isDevFn(mode: string): boolean {
 return mode === 'development';
}

export function isProdFn(mode: string): boolean {
 return mode === 'production';
}

/**
 * Whether to generate package preview
 */
export function isReportMode(): boolean {
 return process.env.REPORT === 'true';
}

安裝dotenv

dotenv依賴的作用：從.evn文件流Buffer中讀取屬性輸出一個對象。

那麼和我們之前的加載環境變量的區別：

Vite的loadEnv()：這個方法Vite的官網上貌似沒有開放，而且獲取的文件是指定的，獲取的對象需要我們自己格式化一下。
Vben的wrapperEnv()：這是一個格式化環境變量的方法。
dotenv：是一個依賴，其功能不僅僅是獲取環境變量，當然我們目前只用它來獲取指定的.env文件。

dotenv的npm首頁

1

yarn add dotenv --dev

第二部分

build/utils.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39


import fs from 'fs';
import path from 'path';
import dotenv from 'dotenv';

/**
 * Get the environment variables starting with the specified prefix
 * @param match prefix
 * @param confFiles ext
 */
export function getEnvConfig(match = 'VITE_GLOB_', confFiles = ['.env', '.env.production']) {
 let envConfig = {};
 // ↓ 循環文件名
 confFiles.forEach((item) => {
 try {
 // ↓ 同步讀取根目錄下指定的文件，將讀取的六傳入dotenv輸出對象
 const env = dotenv.parse(fs.readFileSync(path.resolve(process.cwd(), item)));
 // ↓ 將新獲取的對象追加到結果中，相同的覆蓋
 envConfig = { ...envConfig, ...env };
 } catch (error) {}
 });

 // ↓ 檢查輸出結果
 Object.keys(envConfig).forEach((key) => {
 // ↓ 如果不是以傳入的match變量開的就直接刪除
 const reg = new RegExp(`^(${match})`);
 if (!reg.test(key)) {
 Reflect.deleteProperty(envConfig, key);
 }
 });
 return envConfig;
}

/**
 * Get user root directory
 * @param dir file path
 */
export function getRootPath(...dir: string[]) {
 return path.resolve(process.cwd(), ...dir);
}

Vben的獲取配置文件名的方法

build/getConfigFileName.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/**
 * Get the configuration file variable name
 * @param env
 */
export const getConfigFileName = (env: Record<string, any>) => {
 return (
 `__PRODUCTION__${env.VITE_GLOB_APP_SHORT_NAME || '__APP'}__CONF__`
 // ↓ 換成大寫
 .toUpperCase()
 // ↓ 將空白換成空字符串
 .replace(/\s/g, '')
 );
};

Vben動態配置環境變量

說明

前面章節中，我們在build\vite\plugin中註釋一段index.html中插入的script段。這一段script是用於Vben的動態配置環境變量的。

當你打包完項目之後，你的項目的環境變量就不可以變了。此時如果你想修改一下項目的基礎API路徑，那麼你需要修改.env文件，然後再次打包一遍。這麼做很麻煩。所以VbenAdmin將環境變量抽離出來。

當你的項目打包完成之後，如果你還想修改環境變量，那麼可以直接修改dist包下的_app.config.js文件。

下面看實現。

安裝fs-extra

1

yarn add fs-extra @types/fs-extra --dev

fs-extra的npm首頁：fs-extra添加本機fs模塊中未包含的文件系統方法。

編寫生成配置文件的程序

Node-Api-fs

build/script/buildConf.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61


/**
 * Generate additional configuration files when used for packaging. The file can be configured with some global variables, so that it can be changed directly externally without repackaging
 */
import { GLOB_CONFIG_FILE_NAME, OUTPUT_DIR } from '../constant';
import fs, { writeFileSync } from 'fs-extra';
import chalk from 'chalk';

import { getRootPath, getEnvConfig } from '../utils';
import { getConfigFileName } from '../getConfigFileName';

import pkg from '../../package.json';

function createConfig(
 {
 // ↓ windows對像下的存儲配置的屬性名
 configName,

 // ↓ 存儲配置的對象
 config,

 // ↓ JS文件名
 configFileName = GLOB_CONFIG_FILE_NAME,
 }: { configName: string; config: any; configFileName?: string } = { configName: '', config: {} }
) {
 try {
 // ↓ 變量字符串
 const windowConf = `window.${configName}`;
 // Ensure that the variable will not be modified

 // ↓ 將配置的對像以JSON字符串格式拼接到變量字符串後面，最後用正則將空格去掉
 const configStr = `${windowConf}=${JSON.stringify(config)};
 Object.freeze(${windowConf});
 Object.defineProperty(window, "${configName}", {
 configurable: false,
 writable: false,
 });
 `.replace(/\s/g, '');

 // ↓ 創建dist文件夾
 fs.mkdirp(getRootPath(OUTPUT_DIR));

 // ↓ 將字符串寫入到dist文件下的指定JS文件名的文件中
 writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr);

 console.log(chalk.cyan(`✨ [${pkg.name}]`) + ` - configuration file is build successfully:`);
 console.log(chalk.gray(OUTPUT_DIR + '/' + chalk.green(configFileName)) + '\n');
 } catch (error) {
 console.log(chalk.red('configuration file configuration file failed to package:\n' + error));
 }
}

export function runBuildConfig() {
 // ↓ 獲取我們可以配置的環境變量對象
 const config = getEnvConfig();

 // ↓ 獲取配置文件的JS名
 const configFileName = getConfigFileName(config);

 // ↓ 創建文件
 createConfig({ config, configName: configFileName });
}

安裝yargs

yargs的npm首頁：讀取你執行的命令行命令中的參數選項。

1
2


yarn add yargs --dev
yarn add @types/yargs --dev

編寫腳本觸發文件

chalk的npm首頁：一個彩色console.log的工具，這個依賴被其他依賴作為生產依賴安裝在本項目中了，所以也不去猜是哪個依賴的了，直接使用。

build/script/postBuild.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


// #!/usr/bin/env node

import { argv } from 'yargs';
import { runBuildConfig } from './buildConf';
import chalk from 'chalk';

import pkg from '../../package.json';

// ↓ 定義創建配置文件的方法，最條件判斷
export const runBuild = async () => {
 try {
 // 獲取命令中不以'-'開頭的參數
 const argvList = argv._;

 // Generate configuration file
 // ↓ 如果參數中包含'no-conf'，那麼就不創建配置文件
 if (!argvList.includes('no-conf')) {
 // ↓ 同步創建配置文件
 await runBuildConfig();
 }

 console.log(`✨ ${chalk.cyan(`[${pkg.name}]`)}` + ' - build successfully!');
 } catch (error) {
 console.log(chalk.red('vite build error:\n' + error));
 process.exit(1);
 }
};

// ↓ 執行方法
runBuild();

安裝esno

esno的npm首頁：命令行執行一個TS文件

1

yarn add esno --dev

編寫腳本

在編譯的時候調用TS文件：

package.json

1
2
3
4
5
6
7


{
 "scripts": {
 // ...
 "build": "vite build && esno ./build/script/postBuild.ts",
 "build-noconf": "vite build && esno ./build/script/postBuild.ts no-conf"
 }
}

index.html注入配置文件

build/vite/plugin/html.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44


/**
 * Plugin to minimize and use ejs template syntax in index.html.
 * https://github.com/anncwb/vite-plugin-html
 */
import type { Plugin } from 'vite';
import type { ViteEnv } from '../../utils';

import html from 'vite-plugin-html';

import pkg from '../../../package.json';
import { GLOB_CONFIG_FILE_NAME } from '../../constant';

export function configHtmlPlugin(env: ViteEnv, isBuild: boolean) {
 const { VITE_GLOB_APP_TITLE, VITE_PUBLIC_PATH } = env;

 const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`;

 const getAppConfigSrc = () => {
 return `${path || '/'}${GLOB_CONFIG_FILE_NAME}?v=${pkg.version}-${new Date().getTime()}`;
 };

 const htmlPlugin: Plugin[] = html({
 minify: isBuild,
 inject: {
 // Inject data into ejs template
 injectData: {
 title: VITE_GLOB_APP_TITLE,
 },
 // Embed the generated app.config.js file
 // ↓ 在此處插入
 tags: isBuild
 ? [
 {
 tag: 'script',
 attrs: {
 src: getAppConfigSrc(),
 },
 },
 ]
 : [],
 },
 });
 return htmlPlugin;
}

注意

之後在業務邏輯中獲取環境變量，就需要從這個JS文件中獲取了。從而達到在生產環境改配置的需求。
參考：src\utils\env.ts，但是這個後面再說。

Vite插件-vite-plugin-svg-icon

說明

當你使用該插件的時候，指定好存放svg的文件夾。再按照指定的方式去訪問svg圖片。就可以再不產生http請求的情況下渲染出svg圖片。

使用該插件時，插件會自動將所有svg圖片加載到HTML中。並且每一個svg將會被過濾去無用的信息數據。讓svg達到最小的值。之後使用svg圖片就只需要操作DOM即可，而不需要發送http請求。

安裝

1

yarn add vite-plugin-svg-icons --dev

創建配置

build/vite/plugin/svgSprite.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


/**
 * Vite Plugin for fast creating SVG sprites.
 * https://github.com/anncwb/vite-plugin-svg-icons
 */

import SvgIconsPlugin from 'vite-plugin-svg-icons';
import path from 'path';

export function configSvgIconsPlugin(isBuild: boolean) {
 const svgIconsPlugin = SvgIconsPlugin({
 // ↓ 本地svg圖片地址
 iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
 svgoOptions: isBuild,
 // 圖標ID的樣式
 symbolId: 'icon-[dir]-[name]',
 });
 return svgIconsPlugin;
}

選項svgOptions的boolean類型不太清楚是乾什麼的。但是對像類型是控制svg過濾無用信息的選項。使用true是使用默認選項，false時不知道做什麼的但是也沒什麼影響。

用於配置

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import { configSvgIconsPlugin } from './svgSprite';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 // vite-plugin-svg-icons
 vitePlugins.push(configSvgIconsPlugin(isBuild));
 // ...
 return vitePlugins;
}

main導入

src/main.ts

1
2
3


// ...
import 'vite-plugin-svg-icons/register';
// ...

創建Svg組件

這裡有一個樣式，是全局上下文注入的。這個後面再講，先寫成string。

src/components/Icon/src/SvgIcon.vue

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56


<template>
 <svg class="vben-svg-icon" :class="[$attrs.class]" :style="getStyle" aria-hidden="true">
 <use :xlink:href="symbolId" />
 </svg>
</template>
<script lang="ts">
 import type { CSSProperties } from 'vue';
 import { defineComponent, computed } from 'vue';
 // import { useDesign } from '/@/hooks/web/useDesign';

 export default defineComponent({
 name: 'SvgIcon',
 props: {
 prefix: {
 type: String,
 default: 'icon',
 },
 name: {
 type: String,
 required: true,
 },
 size: {
 type: [Number, String],
 default: 16,
 },
 },
 setup(props) {
 // const { prefixCls } = useDesign('svg-icon');
 const symbolId = computed(() => `#${props.prefix}-${props.name}`);

 const getStyle = computed(
 (): CSSProperties => {
 const { size } = props;
 let s = `${size}`;
 s = `${s.replace('px', '')}px`;
 return {
 width: s,
 height: s,
 };
 }
 );
 // prefixCls,
 return { symbolId, getStyle };
 },
 });
</script>
<style lang="less" scoped>
 // @prefix-cls: ~'@{namespace}-svg-icon';

 // .@{prefix-cls} {
 .vben-svg-icon {
 overflow: hidden;
 vertical-align: -0.15em;
 fill: currentColor;
 }
</style>

Vite插件-vite-plugin-windicss

說明

在Vite上單獨使用Tailwind時，渲染速度很慢。
vite-plugin-windicss比Tailwind快20到100倍。

安裝

1

yarn add vite-plugin-windicss --dev

創建Windicss配置文件

tailwind.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75


import lineClamp from 'windicss/plugin/line-clamp';
import colors from 'windicss/colors';

import { defineConfig } from 'vite-plugin-windicss';
import { primaryColor } from './build/config/themeConfig';

export default defineConfig({
 darkMode: 'class',
 plugins: [lineClamp, createEnterPlugin()],
 theme: {
 extend: {
 colors: {
 ...colors,
 primary: primaryColor,
 },
 screens: {
 sm: '576px',
 md: '768px',
 lg: '992px',
 xl: '1200px',
 '2xl': '1600px',
 },
 },
 },
});

/**
 * Used for animation when the element is displayed
 * @param maxOutput The larger the maxOutput output, the larger the generated css volume
 */
function createEnterPlugin(maxOutput = 10) {
 const createCss = (index: number, d = 'x') => {
 const upd = d.toUpperCase();
 return {
 [`*> .enter-${d}:nth-child(${index})`]: {
 transform: `translate${upd}(50px)`,
 },
 [`*> .-enter-${d}:nth-child(${index})`]: {
 transform: `translate${upd}(-50px)`,
 },
 [`* > .enter-${d}:nth-child(${index}),* > .-enter-${d}:nth-child(${index})`]: {
 'z-index': `${10 - index}`,
 opacity: '0',
 animation: `enter-${d}-animation 0.4s ease-in-out 0.3s`,
 'animation-fill-mode': 'forwards',
 'animation-delay': `${(index * 1) / 10}s`,
 },
 };
 };
 const handler = ({ addBase }) => {
 const addRawCss = {};
 for (let index = 1; index < maxOutput; index++) {
 Object.assign(addRawCss, {
 ...createCss(index, 'x'),
 ...createCss(index, 'y'),
 });
 }
 addBase({
 ...addRawCss,
 [`@keyframes enter-x-animation`]: {
 to: {
 opacity: '1',
 transform: 'translateX(0)',
 },
 },
 [`@keyframes enter-y-animation`]: {
 to: {
 opacity: '1',
 transform: 'translateY(0)',
 },
 },
 });
 };
 return { handler };
}

創建配置文件

build/vite/plugin/windicss.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


import type { Plugin } from 'vite';

import windiCSS from 'vite-plugin-windicss';

export function configWindiCssPlugin(): Plugin[] {
 return windiCSS({
 safelist: 'no-select',
 preflight: {
 enableAll: true,
 },
 });
}

應用配置

build/vite/plugin/index.ts

1
2
3
4
5
6
7
8
9


// ...
import { configWindiCssPlugin } from './windicss';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 // vite-plugin-windicss
 vitePlugins.push(configWindiCssPlugin());
 return vitePlugins;
}

導入樣式

src/main.ts

1
2
3


// ...
import '@virtual/windi.css';
// ...

Vite插件-vite-plugin-mock

說明

vite-plugin-mock的npm首頁

根據我自己的實驗：

localEnabled控制mock開發環境是否啟動。
如果生產環境想要使用mock，只有prodEnabled為true，injectCode注入指定代碼時才會生效。

安裝

1

yarn add mockjs vite-plugin-mock --dev

編寫Mock用例

這裡直接將根目錄下的mock目錄拷貝出來就行。

mock\_util.ts：裡面封裝的是數據請求結構類型。
mock\_createProductionServer.ts：用於配置生產環境動態Mock的js文件，文檔中有說。
其他的：都是Mock用例，每一個js、ts，都要默認導出一個MockMethod類型的數組。每一項MockMethod就是攔截的一個方法。MockMethod的response對應方法的return將會被Mock實例處理。也就是說，你可以在return的對像中使用Mock規則。

不過_createProductionServer.ts中使用了Glob 導入。

配置Mock

build/vite/plugin/mock.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


/**
 * Mock plugin for development and production.
 * https://github.com/anncwb/vite-plugin-mock
 */
import { viteMockServe } from 'vite-plugin-mock';

export function configMockPlugin(isBuild: boolean) {
 return viteMockServe({
 // ↓ 忽略以_開頭的文件
 ignore: /^\_/,

 // ↓ 解析根目錄下的mock文件夾
 mockPath: 'mock',
 localEnabled: !isBuild,
 prodEnabled: isBuild,
 injectCode: `
 import { setupProdMockServer } from '../mock/_createProductionServer';
 setupProdMockServer();
 `,
 });
}

配置進Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import { configMockPlugin } from './mock';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 // vite-plugin-mock
 VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));

 return vitePlugins;
}

Vite插件-vite-plugin-purge-icons

說明

本章的插件是可以讓我們很方便高效的使用Iconify中所有的圖標。

這裡要講的是Iconify各個版本插件的區別：

Vue3版Iconify插件：使用時需要安裝指定庫的圖標，然後靜態引用。每一次引用都會產生一次http請求。
PurgeIcons：將我們所使用的Iconify圖標都已html的dom節點形式保存在html中，這樣我們就可以不發送http請求就可以使用圖標了。
vite-plugin-purge-icons：就是Vite版的PurgeIcons。

vite-plugin-purge-icons的npm首頁

安裝

1
2


yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json --dev

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


// ...
import PurgeIcons from 'vite-plugin-purge-icons';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean) {
 // ...
 // vite-plugin-purge-icons
 vitePlugins.push(PurgeIcons());

 // ...
 return vitePlugins;
}

注意

Icon組件後面再封裝，由於我們main.ts中沒有引入vite-plugin-purge-icons。所以，這裡還不能使用。後面會動態生成圖標。

Vite插件-vite-plugin-style-import

說明

vite-plugin-style-import的npm首頁

該插件可按需導入組件庫樣式，由於 vite 本身已按需導入了組件庫，因此僅樣式不是按需導入的，因此只需按需導入樣式即可。

安裝

1

yarn add vite-plugin-style-import --dev

配置插件

build/vite/plugin/styleImport.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


/**
 * Introduces component library styles on demand.
 * https://github.com/anncwb/vite-plugin-style-import
 */
import styleImport from 'vite-plugin-style-import';

export function configStyleImportPlugin() {
 // if (!isBuild) return [];
 const pwaPlugin = styleImport({
 libs: [
 {
 libraryName: 'ant-design-vue',
 esModule: true,
 resolveStyle: (name) => {
 return `ant-design-vue/es/${name}/style/index`;
 },
 },
 ],
 });
 return pwaPlugin;
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import { configStyleImportPlugin } from './styleImport';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 // vite-plugin-style-import
 vitePlugins.push(configStyleImportPlugin());

 return vitePlugins;
}

Vite插件-rollup-plugin-visualizer

說明

rollup-plugin-visualizer的npm首頁：依賴分析插件。
cross-env的npm首頁：命令行配置環境變量。

安裝

1

yarn add rollup-plugin-visualizer @types/rollup-plugin-visualizer --dev

配置插件

build/vite/plugin/visualizer.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


/**
 * Package file volume analysis
 */
import visualizer from 'rollup-plugin-visualizer';
import { isReportMode } from '../../utils';
import type { Plugin } from 'vite';

export function configVisualizerConfig() {
 if (isReportMode()) {
 return visualizer({
 filename: './node_modules/.cache/visualizer/stats.html',
 open: true,
 // @ts-ignore
 gzipSize: true,
 // @ts-ignore
 brotliSize: true,
 }) as Plugin;
 }
 return [];
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import { configVisualizerConfig } from './visualizer';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 // rollup-plugin-visualizer
 vitePlugins.push(configVisualizerConfig());

 return vitePlugins;
}

安裝cross-env

1

yarn add cross-env --dev

編輯腳本

package.json

1
2
3
4
5
6
7
8
9


{
 // ...
 "scripts": {
 // ...
 "report": "cross-env REPORT=true npm run build"
 // ...
 }
 // ...
}

Vite插件-vite-plugin-theme

說明

vite-plugin-theme的npm首頁：Git站點，npm的失效了。

用於動態更改界面主題色的 vite 插件。

配置插件

build/vite/plugin/theme.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


/**
 * Vite plugin for website theme color switching
 * https://github.com/anncwb/vite-plugin-theme
 */
import { viteThemePlugin, mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme';
import { getThemeColors, generateColors } from '../../config/themeConfig';

export function configThemePlugin() {
 const colors = generateColors({
 mixDarken,
 mixLighten,
 tinycolor,
 });

 const plugin = viteThemePlugin({
 // ↓ 之前生成的很多個顏色
 colorVariables: [...getThemeColors(), ...colors],
 });
 return plugin;
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// ...
import { configThemePlugin } from './theme';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 //vite-plugin-theme
 vitePlugins.push(configThemePlugin());

 return vitePlugins;
}

修改主題方法

之後要修改主題，直接調用一下這個方法即可。

src/logics/theme/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


import { getThemeColors, ThemeMode, generateColors } from '../../../build/config/themeConfig';

import { replaceStyleVariables } from 'vite-plugin-theme/es/client';
import { mixLighten, mixDarken, tinycolor } from 'vite-plugin-theme/es/colorUtils';

export async function changeTheme(color: string, theme?: ThemeMode) {
 const colors = generateColors({
 mixDarken,
 mixLighten,
 tinycolor,
 color,
 });

 return await replaceStyleVariables({
 colorVariables: [...getThemeColors(color, theme), ...colors],
 });
}

Vite插件-vite-plugin-imagemin

說明

vite-plugin-imagemin的npm首頁：一個壓縮圖片資源的 vite 插件。

配置鏡像(用於安裝imagemin的依賴，因為中國可能沒有安裝imagemin。)

若非中國用戶，可跳過配置鏡像

package.json

1
2
3
4


"resolutions": {
 "//": "用於安裝imagemin的依賴關係，因為中國可能沒有安裝imagemin。",
 "bin-wrapper": "npm:bin-wrapper-china"
},

安裝

1

yarn add vite-plugin-imagemin --dev

配置插件

build/vite/plugin/imagemin.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


// Image resource files used to compress the output of the production environment
// https://github.com/anncwb/vite-plugin-imagemin
import viteImagemin from 'vite-plugin-imagemin';

export function configImageminPlugin() {
 const plugin = viteImagemin({
 gifsicle: {
 optimizationLevel: 7,
 interlaced: false,
 },
 optipng: {
 optimizationLevel: 7,
 },
 webp: {
 quality: 75,
 },
 mozjpeg: {
 quality: 8,
 },
 pngquant: {
 quality: [0.8, 0.9],
 speed: 4,
 },
 svgo: {
 plugins: [
 {
 removeViewBox: false,
 },
 {
 removeEmptyAttrs: false,
 },
 ],
 },
 });
 return plugin;
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// ...
import { configImageminPlugin } from './imagemin';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 if (isBuild) {
 //vite-plugin-imagemin
 VITE_USE_IMAGEMIN && vitePlugins.push(configImageminPlugin());
 }

 return vitePlugins;
}

Vite插件-vite-plugin-compression

說明

vite-plugin-compression的npm首頁：vite-plugin-compress的增強版，壓縮用的。

安裝

1

yarn add vite-plugin-compression --dev

配置插件

build/vite/plugin/compress.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


/**
 * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
 * https://github.com/anncwb/vite-plugin-compression
 */
import type { Plugin } from 'vite';

import compressPlugin from 'vite-plugin-compression';

export function configCompressPlugin(compress: 'gzip' | 'brotli' | 'none'): Plugin | Plugin[] {
 const compressList = compress.split(',');

 const plugins: Plugin[] = [];

 if (compressList.includes('gzip')) {
 plugins.push(
 compressPlugin({
 ext: '.gz',
 })
 );
 }
 if (compressList.includes('brotli')) {
 plugins.push(
 compressPlugin({
 ext: '.br',
 algorithm: 'brotliCompress',
 })
 );
 }
 return plugins;
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ...
import { configCompressPlugin } from './compress';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 // The following plugins only work in the production environment
 if (isBuild) {
 // ...
 // rollup-plugin-gzip
 vitePlugins.push(configCompressPlugin(VITE_BUILD_COMPRESS));
 }

 return vitePlugins;
}

Vite插件-vite-plugin-pwa

說明

安裝

1

yarn add vite-plugin-pwa --dev

配置插件

build/vite/plugin/pwa.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36


/**
 * Zero-config PWA for Vite
 * https://github.com/antfu/vite-plugin-pwa
 */
import type { ViteEnv } from '../../utils';

import { VitePWA } from 'vite-plugin-pwa';

export function configPwaConfig(env: ViteEnv) {
 const { VITE_USE_PWA, VITE_GLOB_APP_TITLE, VITE_GLOB_APP_SHORT_NAME } = env;

 if (VITE_USE_PWA) {
 // vite-plugin-pwa
 const pwaPlugin = VitePWA({
 manifest: {
 name: VITE_GLOB_APP_TITLE,
 short_name: VITE_GLOB_APP_SHORT_NAME,
 icons: [
 {
 // ./表示public文件夾
 src: './resource/img/pwa-192x192.png',
 sizes: '192x192',
 type: 'image/png',
 },
 {
 src: './resource/img/pwa-512x512.png',
 sizes: '512x512',
 type: 'image/png',
 },
 ],
 },
 });
 return pwaPlugin;
 }
 return [];
}

配置Vite

build/vite/plugin/index.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// ...
import { configPwaConfig } from './pwa';

export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
 // ...
 // The following plugins only work in the production environment
 if (isBuild) {
 // ...
 // vite-plugin-pwa
 vitePlugins.push(configPwaConfig(viteEnv));
 }

 return vitePlugins;
}

Vite配置-optimizeDeps.include

說明

Vite配置-optimizedeps-include說明

原文：
類型： string[]
默認情況下，不在 node_modules 中的，鏈接的包不會被預構建。使用此選項可強制預構建鏈接的包。

安裝moment

antd中需要使用moment。而moment配置和本章有關，所以就順便安裝一下：

1

yarn add moment

配置Vite

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22


// ...
function pathResolve(dir: string) {
 return resolve(__dirname, '.', dir);
}

export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...
 return {
 // ...
 optimizeDeps: {
 // @iconify/iconify: The dependency is dynamically and virtually loaded by @purge-icons/generated, so it needs to be specified explicitly
 include: [
 '@iconify/iconify',
 'ant-design-vue/es/locale/zh_CN',
 'moment/dist/locale/zh-cn',
 'ant-design-vue/es/locale/en_US',
 'moment/dist/locale/eu',
 ],
 // ...
 },
 };
};

Vite配置-optimizeDeps.exclude

說明

Vite配置-optimizedeps-exclude說明

原文：
類型： string[]
在預構建中強制排除的依賴項。

配置Vite

vite.config.ts

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// ...

export default ({ command, mode }: ConfigEnv): UserConfig => {
 // ...

 return {
 // ...
 optimizeDeps: {
 // ...
 exclude: ['vue-demi'],
 },
 };
};

http-server

說明

項目編譯之後的靜態文件是不能直接本地訪問的。因為本地訪問使用的是file:///協議。而file:///不支持跨域和一些其他特性。比如JavaScript模塊、PWA等等。
那麼此時就需要換一種訪問本地文件的方式了，就是讓本地成為一個服務器。通過http來訪問。

http-server就可以實現以http形式訪問本地文件的目的，但是這個依賴不保證安全，只用於本地測試。
http-server的npm首頁：命令行啟動一個本地服務器。不安全，但是可以用來測試。

安裝

1

yarn add http-server --dev

配置腳本

package.json

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


{
 // ...
 "scripts": {
 // ...
 "test:gzip": "http-server dist --cors --gzip -c-1",
 "test:br": "http-server dist --cors --brotli -c-1",
 // ...
 },
 // ...
}

NPM plugins on Wayne's blog | 偉恩的部落格 | 技術博客

【Node.js】用 Typescript 與 Express 建立一個 server

使用 typescript 的好處

建立 typescript 環境

進入初始化專案或現有專案的目錄

安裝 typescript 與 express

設定 typescript

初始化 tsc

可能遇到的錯誤

tsconfig.json

node.js 的設定

1. 新增入口檔案

src/app.ts

2. 安裝 nodemon 與 ts-node

3. 調整 package.json 的 scripts

package.json

4. 執行 npm start

BONUS： 使用自定義的 tsconfig.json

package.json

使用 http

src/tsconfig.json

src/app.ts

取得 request 中的資料

取得 request body

取得 request header

取得 request authorization

完整程式碼

src/app.ts

使用 Express

src/app.ts

加入 Route 與 Controller

Controller

src/controllers/api-controllers.ts

Route

src/routes/api-routes.ts

調整 src/app.ts

src/app.ts

將 routes 拆分成多個檔案

src/routes/route.ts

src/controllers/AuthController.ts

src/routes/auth.route.ts

src/controllers/ArticalController.ts

src/routes/article.route.ts

src/routes/router.ts

src/app.ts

前綴 Prefix

src/routes/route.ts

src/routes/auth.route.ts

src/routes/article.route.ts

src/app.ts

Middleware

src/middleware/AuthMiddleware.ts

套用在單一 url

src/routes/auth.route.ts

套用在單一 route 檔案

src/routes/auth.route.ts

全域使用

src/app.ts

Validator

src/requests/AuthRequest.ts

src/middleware/AuthMiddleware.ts

src/routes/auth.route.ts

使用 Node.js 串接 MongoDB (含CRUD)

MongoDB 資料庫簡介

MongoDB 是什麼？

MongoDB 的層級架構

MongoDB 資料 v.s. 關聯式資料庫

BSON？

在 Windows 上安裝 MongoDB

安裝流程

Bonus(一)： 下載 mongosh.exe

Bonus(二)： “mongo” 不是內部或外部命令

Bonus(三)： 移除 MongoDB 服務

執行啟動 MongoDB

使用 MongoDB Shell

連線資料庫

查看與使用資料庫

關閉資料庫

觀看指令資料庫裡面的集合

新增一筆資料 inserOne

BONUS：使用自定義的 tsconfig.json

Bonus(一)：下載 mongosh.exe

Bonus(三)：移除 MongoDB 服務

新增一筆資料 `inserOne`

新增多筆資料 `insertMany`

替換整個文檔：`replaceOne`、`replaceMany`

刪除多個文件：`deleteMany(filter)`

查詢指令使用，好用的 `help`