前言

大家好，我是小滿，正所謂：工欲善其事，必先利其器！

寫一個(gè)開源的項(xiàng)目也不例外，就拿在國(guó)內(nèi)很火的 vue3 框架 和 vite 工具來講，其中的實(shí)現(xiàn)與架構(gòu)設(shè)計(jì)無不是一個(gè)復(fù)雜而龐大的工程，而支撐這些工程能順利運(yùn)行的無不是一個(gè)又一個(gè)的輪子，正好最近有在閱讀 vue3 和 vite3 的源碼，發(fā)現(xiàn)一些較實(shí)用的輪子，在這里分享給大家。

如果你想對(duì)前端工程化有所涉獵的話，我相信下面的工具總有一款是你想要的！

1. picocolors

picocolors 是一個(gè)可以在終端修改輸出字符樣式的 npm 包，說直白點(diǎn)就是給字符添加顏色；

 

可能有的同學(xué)想到了，這不是跟 chalk 一樣的嗎？

沒錯(cuò)，他們的作用其實(shí)就是一樣的！

為什么選擇 picocolors：

• 無依賴包；
• 比 chalk 體積小14倍，速度快2倍；
• 支持 CJS 和 ESM 項(xiàng)目；

所以大家明白選什么了吧！

當(dāng)然因?yàn)?picocolors 包比較小，所以功能邊界沒有 chalk 的全面，但是用在一些自研等絕大部分的需求中是完全可以滿足的。

注意：

因?yàn)闅v史等原因 vue3 目前還在使用 chalk； vite 已全面用 picocolors 替代作為終端樣式輸出；不過 chalk 為了優(yōu)化，在最近的最新版本 v5 中已剔除依賴包；

2. prompts vs enquirer vs inquirer

乍一看，可能有的同學(xué)會(huì)有點(diǎn)懵，其實(shí)一句話交代就是：其實(shí)他們?nèi)际怯脕韺?shí)現(xiàn)命令行交互式界面的工具；

之所以放在一起是因?yàn)?vue3 和 vite 所使用的交互式工具不盡相同；

 

工具名	何處使用	大小	周下載量	github 地址
prompts	vite	187 kB	18,185,030	prompts
enquirer	vue3	197 kB	13,292,137	enquirer
inquirer	其它	87.7 kB	24,793,335	inquirer

npm 近兩年下載熱度趨勢(shì)：

 

簡(jiǎn)單總結(jié)：

• 其實(shí) vite 起初也是使用的 enquirer，只是后面為了滿足用戶跨平臺(tái)使用時(shí)出現(xiàn)的 bug，才替換成了 prompts，當(dāng)然也并不是說 enquirer 不好，只是場(chǎng)景不同，所以選擇會(huì)有所不同罷了；
• 其實(shí)如果你想在自己的項(xiàng)目中使用交互式界面工具，我這邊還是比較推薦 inquirer 的，畢竟社區(qū)受歡迎程度和功能都是完全滿足你的需求的。

3. cac

cac 是一個(gè)用于構(gòu)建 CLI 應(yīng)用程序的 JAVAScript 庫(kù)；

通俗點(diǎn)講，就是給你的 cli 工具增加自定義一些命令，例如 vite create，后面的 create 命令就是通過 cac 來增加的；

因?yàn)樵搸?kù)較適用于一些自定義的工具庫(kù)中，所以只在 vite 中使用， vue3 并不需要該工具；

為什么不用 commander or yargs？

主要是因?yàn)?vite 的工具是針對(duì)一些自定義的命令等場(chǎng)景不是特別復(fù)雜的情況；

我們看看 cac 的優(yōu)勢(shì)：

• 超輕量級(jí)：沒有依賴，體積數(shù)倍小于 commander 和 yargs；
• 易于學(xué)習(xí)：只需要學(xué)習(xí)4 API cli.option、cli.version 、cli.help cli.parse 即可搞定大部分需求；
• 功能強(qiáng)大：?jiǎn)⒂媚J(rèn)命令，可以像使用 git 的命令一樣方便去使用它，且有參數(shù)和選項(xiàng)的校驗(yàn)、自動(dòng)生成 help 等完善功能；

當(dāng)然，如果你想寫一個(gè)功能較多的 cli 工具，也是可以選擇 commander 和 yargs 的；

不過一些中小型的 cli 工具我還是比較推薦 cac 的；

4. npm-run-all

npm-run-all 是一個(gè) cli 工具，可以并行、或者按順序執(zhí)行多個(gè) npm 腳本；npm-run-all 在 vite 工具源碼中有使用；

通俗點(diǎn)講就是為了解決官方的 npm run 命令無法同時(shí)運(yùn)行多個(gè)腳本的問題，它可以把諸如 npm run clean && npm run build:css && npm run build:js && npm run build:html 的一長(zhǎng)串的命令通過 glob 語(yǔ)法簡(jiǎn)化成 npm-run-all clean build:*一行命令。

提供三個(gè)命令：

• npm-run-all：可以帶-s 和-p 參數(shù)的簡(jiǎn)寫，分別對(duì)應(yīng)串行和并行；#依次執(zhí)行這三個(gè)任務(wù)命令 npm-run-all clean lint build #同時(shí)執(zhí)行這兩個(gè)任務(wù)命令 npm-run-all --parallel lint build #先串行執(zhí)行 a 和 b,再并行執(zhí)行 c 和 d npm-run-all -s a b -p c d 復(fù)制代碼
• run-s：為 npm-run-all --serial的縮寫；
• run-p：為 npm-run-all --parallel的縮寫；

上面只是簡(jiǎn)單的介紹了下，想要了解更多實(shí)用功能的，可以去官網(wǎng)查看；

最后：這個(gè)庫(kù)屬實(shí)是好用，良心推薦！

5. semver

semver 是一個(gè)語(yǔ)義化版本號(hào)管理的 npm 庫(kù)；semver 在 vue3 框架源碼和 vite 工具源碼中都有使用；

說直白一點(diǎn)，你在開發(fā)一個(gè)開源庫(kù)的時(shí)候，肯定會(huì)遇到要提醒用戶不同版本號(hào)不同的情況，那么如何去判斷用戶版本過低，semver 就可以很好的幫助你解決這個(gè)問題；

semver 內(nèi)置了許多方法，比如判斷一個(gè)版本是否合法，判斷版本號(hào)命名是否正確，兩個(gè)版本誰(shuí)大誰(shuí)小之類等等方法；

如下列一些官網(wǎng)的例子：

const semver = require('semver')

semver.valid('1.2.3') // '1.2.3'
semver.valid('a.b.c') // null
semver.clean('  =v1.2.3   ') // '1.2.3'
semver.satisfies('1.2.3', '1.x || >=2.5.0 || 5.0.0 - 7.2.3') // true
semver.gt('1.2.3', '9.8.7') // false
semver.lt('1.2.3', '9.8.7') // true
semver.minVersion('>=1.0.0') // '1.0.0'
semver.valid(semver.coerce('v2')) // '2.0.0'
semver.valid(semver.coerce('42.6.7.9.3-alpha')) // '42.6.7'

復(fù)制代碼

6. minimist

minimist 是一個(gè)命令行參數(shù)解析工具；minimist 在 vue3 框架源碼和 vite 工具源碼中都有使用；

使用：

const args = require('minimist')(process.argv.slice(2))
復(fù)制代碼

例如：

# 執(zhí)行以下命令
vite create App -x 3 -y 4 -n5 -abc --beep=boop foo bar baz

# 將獲得
{ _: [ 'foo', 'bar', 'baz' ],
  x: 3,
  y: 4,
  n: 5,
  a: true,
  b: true,
  c: true,
  beep: 'boop' }

復(fù)制代碼

特別要說明的是返回值其中首個(gè) key 是_，它的值是個(gè)數(shù)組，包含的是所有沒有關(guān)聯(lián)選項(xiàng)的參數(shù)。

如果你的工具在終端有較多的參數(shù)，那么這個(gè)工具就非常的適合您！

7. magic-string

magic-string 是一個(gè)用于操作字符串和生成源映射的小而快的庫(kù)；

其實(shí)它最主要的功能就是對(duì)一些源代碼和龐大的 AST 字符串做輕量級(jí)字符串的替換；

在 vite 工具源碼和 @vue/compiler-sfc 中大量使用；

使用：

import MagicString from 'magic-string';
const s = new MagicString('problems = 99');

// 替換 problems -> answer
s.overwrite(0, 8, 'answer')
s.toString() // 'answer = 99'

// 生成 sourcemap
var map = s.generateMap({
  source: 'source.js',
  file: 'converted.js.map',
  includeContent: true
})
復(fù)制代碼

8. fs-extra

fs-extra 是一個(gè)強(qiáng)大的文件操作庫(kù)， 是 Nodejs fs 模塊 的增強(qiáng)版；

這個(gè)就不多講了，因?yàn)樗谇уN百煉之下只能形容它是 YYDS，查看 更多官方文檔。

9. chokidar

chokidar 是一款專門用于文件監(jiān)控的庫(kù)；chokidar 只在 vite 工具源碼中有使用；

其實(shí) Node.js 標(biāo)準(zhǔn)庫(kù)中提供 fs.watch 和 fs.watchFile 兩個(gè)方法用于處理文件監(jiān)控，但是為什么我們還需要chokidar 呢？

主要是由于 兼容性不好、無法監(jiān)聽、監(jiān)聽多次 等大量影響性能的問題；

chokidar 用法：

const chokidar = require('chokidar');

const watcher = chokidar.watch('file, dir, glob, or array', {
  ignored: /(^|[/\])../,
  persistent: true
});

watcher
  .on('add', path => console.log(`File ${path} has been added`))
  .on('change', path => console.log(`File ${path} has been changed`))
  .on('unlink', path => console.log(`File ${path} has been removed`))
  .on('addDir', path => console.log(`Directory ${path} has been added`))
  .on('unlinkDir', path => console.log(`Directory ${path} has been removed`))
  .on('error', error => console.log(`Watcher error: ${error}`))
  .on('ready', () => console.log('Initial scan complete. Ready for changes'))
  .on('all', (event, path) => console.log(event,path))
  .on('raw', (event, path, details) => {
    log('Raw event info:', event, path, details);
  });


復(fù)制代碼

10. fast-glob

fast-glob 是一個(gè)快速批量導(dǎo)入、讀取文件的庫(kù)； fast-glob 只在 vite 工具源碼中有使用；

基本語(yǔ)法：

1. * ：匹配除斜桿、影藏文件外的所有文件內(nèi)容；
2. **：匹配零個(gè)或多個(gè)層級(jí)的目錄；
3. ?：匹配除斜桿以外的任何單個(gè)字符；
4. [seq]：匹配 [] 中的任意字符 seq；

如何使用：

const fg = require('fast-glob');

const entries = await fg(['.editorconfig', '**/index.js'], { dot: true });
復(fù)制代碼

在 vite 中使用：

vite 工具中 import.meta.glob 方法（如下）就是基于這個(gè)庫(kù)來實(shí)現(xiàn)，所以如果你在自己的工具庫(kù)中有批量文件等的操作，這個(gè)庫(kù)是以很不錯(cuò)的選擇；

const modules = import.meta.glob('./dir/*.js', { query: { foo: 'bar', bar: true } })
復(fù)制代碼

vite 通過 fast-glob 工具把它生成如下代碼

// vite 生成的代碼
const modules = {
  './dir/foo.js': () =>
    import('./dir/foo.js?foo=bar&bar=true').then((m) => m.setup),
  './dir/bar.js': () =>
    import('./dir/bar.js?foo=bar&bar=true').then((m) => m.setup)
}

復(fù)制代碼

11. debug

debug 是一個(gè)模仿 Node.js 核心調(diào)試技術(shù)的小型 JavaScript 調(diào)試程序，在適用于 Node.js 和 Web 瀏覽器 都可使用；debug 只在 vite 工具源碼中有使用；

說直白點(diǎn)就是你可以使用 debug 來對(duì)你的程序進(jìn)行 毫秒級(jí)別時(shí)間差的統(tǒng)計(jì) 對(duì)你程序代碼進(jìn)行優(yōu)化；

 

使用：

var debug = require('debug')('http')
  , http = require('http')
  , name = 'My App';

// fake app

debug('booting %o', name);

http.createServer(function(req, res){
  debug(req.method + ' ' + req.url);
  res.end('hellon');
}).listen(3000, function(){
  debug('listening');
});

// fake worker of some kind

require('./worker');
復(fù)制代碼

如果你對(duì)你的代碼或者自研的工具等有較高性能要求，強(qiáng)烈建議可以使用 debug 來進(jìn)行調(diào)式。

12. dotenv

dotenv 是一個(gè)零依賴模塊，可將 .env 文件 中的環(huán)境變量加載到 process.env 中；dotenv 只在 vite 工具源碼中有使用；

如何使用：

1. 創(chuàng)建 .env 文件
2. S3_BUCKET="YOURS3BUCKET" SECRET_KEY="YOURSECRETKEYGOESHERE" 復(fù)制代碼
3. 使用
4. import * as dotenv from 'dotenv' dotenv.config() console.log(process.env) 復(fù)制代碼

13. esbuild

esbuild 是一個(gè)基于 Go 語(yǔ)言開發(fā)的 JavaScript 打包工具，被 Vite 用于開發(fā)環(huán)境的依賴解析；

相比傳統(tǒng)的打包工具，主打性能優(yōu)勢(shì)，在構(gòu)建速度上可以快 10~100 倍；

 

到現(xiàn)在知道為啥 vite 為啥快了吧，esbuild 就是第一功臣。

優(yōu)勢(shì)：

• 沒有緩存機(jī)制也有極快的打包速度
• 支持es6和cjs模塊
• 支持es6 modules的tree-shaking
• 支持ts和jsx
• sourcemap
• 壓縮工具
• 自定義的插件開發(fā)

使用：

esbuild 在 API 層面上非常簡(jiǎn)潔, 主要的 API 只有兩個(gè): Transform 和 Build, 這兩個(gè) API 可以通過 CLI, JavaScript, Go 的方式調(diào)用；

1. transform：調(diào)用這個(gè)API能將 ts，jsx 等文件轉(zhuǎn)換為js文件；

// cli
exbuild ./test.ts --loader=ts // 輸出 const str = 'Hello World';

// js api調(diào)用
const esbuild = require('esbuild');
const fs = require('fs');
const path = require('path');
const filePath = path.resolve(__dirname, 'test.ts');
const code = esbuild.transformSync(fs.readFilesync(filePath), {
    loader: 'ts',
})
console.log(code);
// 輸出
// {
//  code: 'const str = 'Hello World'',
//  map: '',
//  warnings: []
// }

2. build：整合了transform后的代碼，可以將一個(gè)或者多個(gè)文件轉(zhuǎn)換并保存為文件；

// cli
esbuild test.ts --outfile=./dist/test.js // { errors: [], warnings: [] }

// js api調(diào)用
const esbuild = require('esbuild');
const path = require('path');

const result = esbuild.buildSync({
  entryPoints: [path.resolve(__dirname, 'test.ts')],
  outdir: path.resolve(__dirname, 'dist'),
});

console.log(result); // { errors: [], warnings: [] }

14. rollup

rollup 是一個(gè) JavaScript 模塊打包器，可以將小塊代碼編譯成大塊復(fù)雜的代碼，我們熟悉的 vue、react、vuex、vue-router 等都是用 rollup 進(jìn)行打包的。

在 vite 中的生產(chǎn)環(huán)境（Production）就是基于 rollup 打包來構(gòu)建主要代碼的。

使用：

1. 創(chuàng)建 rollup.config.js 文件
2. 配置文件

export default {
  input: 'src/index.js',
  output: {
    name: 'amapUpper',
    file: 'dist/amapUpper.js',
    format: 'umd'
  },
  plugins: []
};

3. 運(yùn)行

{
  "scripts": {
    "dev": "rollup -i src/index.js -o dist/bundle.js -f es"
  },
}

4. 執(zhí)行 npm run dev

15. ws

ws 是一個(gè)簡(jiǎn)單易用、速度極快且經(jīng)過全面測(cè)試的 WebSocket 客戶端和服務(wù)器實(shí)現(xiàn)；完全可以是 Socket.io 的替代方案；ws 只在 vite 工具源碼中有使用。

說直白一點(diǎn)就是通過 ws，咱們可以實(shí)現(xiàn)服務(wù)端和客戶端的長(zhǎng)連接，且通過 ws 對(duì)象，就可以獲取到客戶端發(fā)送過來的信息和主動(dòng)推送信息給客戶端。

使用：

1. server.js

    const WebSocket = require('ws')
    const WebSocketServer = WebSocket.Server;
    
    // 創(chuàng)建 websocket 服務(wù)器 監(jiān)聽在 3000 端口 
    const wss = new WebSocketServer({port: 3000}) 
    
    // 服務(wù)器被客戶端連接 
    wss.on('connection', (ws) => { 
        // 通過 ws 對(duì)象，就可以獲取到客戶端發(fā)送過來的信息和主動(dòng)推送信息給客戶端 
        var i=0 
        var int = setInterval(function f() { 
            ws.send(i++) // 每隔 1 秒給連接方報(bào)一次數(shù) 
        }, 1000) 
    })

2. client.js

const WebSocket = require('ws')
const ws = new WebSocket('ws://localhost:3000')

// 接受
ws.on('message', (message) => {
  console.log(message)

    // 當(dāng)數(shù)字達(dá)到 10 時(shí)，斷開連接
    if (message == 10) {
      ws.send('close');
      ws.close()
  }
})

16. connect

connect 是一個(gè)最早期的 HTTP 服務(wù)器框架，亦可稱為中間件插件；express 就是基于此框架做的擴(kuò)展；

注意：從 vite2 開始官方已從依賴 koa 轉(zhuǎn)成 connect 了；

至于為什么使用 connect 而不是 koa，咱們看官方的回答：

 

大概意思就是：由于大部分邏輯應(yīng)該通過插件鉤子而不是中間件來完成，因此對(duì)中間件的需求大大減少；所以使用 connect優(yōu)先級(jí)會(huì)高于 Koa。

17. esno

esno 是一個(gè)基于 esbuild 的 TS/ESNext 的 Node.js 運(yùn)行時(shí)；

說直白點(diǎn)就是可以類似 ts-node 一樣直接運(yùn)行 TS 文件，那為甚么還用 esno 呢？

因?yàn)?esno 是基于 esbuild 運(yùn)行的，esbuild 有多快，上面我們有講到了吧，這里就不復(fù)述了。

使用：

{
  "scripts": {
    "start": "esno index.ts"
  },
  "dependencies": {
    "esno": "*"
  }
}
復(fù)制代碼

npm run start
復(fù)制代碼

18. tsup

tsup 是一個(gè)輕小且無需配置的，由 esbuild 支持的打包工具；

它可以直接把 .ts.tsx 轉(zhuǎn)成不同格式 esm、cjs、iife 的文件，快速打包你的工具庫(kù)；

使用：

1. 安裝 tsup

pnpm i tsup -D

2. 在根目錄下的 package.json 中配置

{
  "scripts": {
    "dev": "pnpm run build -- --watch --ignore-watch examples",
    "build": "tsup src/index.ts --dts --format cjs,esm"
  },
}

19. vitepress

vitepress 是在 vuepress 的基礎(chǔ)上實(shí)現(xiàn)的靜態(tài)網(wǎng)站生成器，區(qū)別在于 vitepress 是建立在 vite 之上做的開發(fā)；

優(yōu)勢(shì)：

• 基于 vite 而不是 webpack，所有更快的啟動(dòng)時(shí)間，熱重載等；
• 使用 vue3 來減少 js 的有效負(fù)載；

所以如果你想寫一個(gè)在線文檔倉(cāng)庫(kù)，那么 vitepress 就是一個(gè)很好的選擇。

20. vitest

vitest 是一個(gè)由 vite 提供支持的快速單元測(cè)試框架。

優(yōu)勢(shì)：

• 由 Vite ??提供支持的極速單元測(cè)試框架。
• 與 Vite 的配置通用，watch 模式下極快的反應(yīng)（相當(dāng)于測(cè)試中 HMR）。
• 可以對(duì) Vue/React 組件進(jìn)行測(cè)試。
• 開箱即用 Typescript/JSX/ESM（這一點(diǎn)我想配過 jest 的人應(yīng)該懂是什么意思）
• 與 Jest 幾乎相同的 API，同時(shí)也有 Jest 的快照功能（這個(gè)非常好用！）
• 模擬 DOM
• 生成測(cè)試覆蓋率
• ESM優(yōu)先，頂級(jí)等待
• 開箱即用的 TypeScript / JSX 支持
• 套件和測(cè)試的過濾、超時(shí)、并發(fā)
• 等等

所以你還有什么理由不使用 vitest 呢？

其它

其實(shí)細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)，目前 vue3 和 vite3 都是一個(gè) monorepo 倉(cāng)庫(kù)，且都是使用 pnpm workspace 來進(jìn)行倉(cāng)庫(kù)管理的；

所以了解 monorepo 和 pnpm workspace 對(duì)源碼的閱讀也是有很大的幫助的；

關(guān)于這塊更多詳細(xì)可以查看《如何入門 vite 源碼》進(jìn)行了解。

當(dāng)然，上面的分享的工具庫(kù)只是在源碼中使用場(chǎng)景較多的庫(kù)，還有一些庫(kù)由于場(chǎng)景較少 所以這里沒有做詳細(xì)的解釋說明，如果您想了解源碼中的哪個(gè)工具庫(kù)，歡迎補(bǔ)充，取舍后我會(huì)做及時(shí)的更新；