當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

【Vite】1371- 手把手开发 Vite 插件

發(fā)布時(shí)間：2023/12/29 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了【Vite】1371- 手把手开发 Vite 插件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

大家好，我是易師傅，在現(xiàn)如今?vite?工具快開(kāi)始盛行之下，我們是不是可以去做一件有意義的事呢，比如寫一個(gè)?vite 插件，你覺(jué)得怎么樣？

剛好我們可以趁?vite 插件?生態(tài)還未很成熟階段，做一個(gè)讓自己順心，讓領(lǐng)導(dǎo)賞心，讓社區(qū)開(kāi)心的插件，與之?dāng)y手共進(jìn)。

如果大家對(duì) vite 感興趣可以去看看專欄：?《Vite 從入門到精通》：juejin.cn/column/7074954144817086472[1]

通過(guò)本文你可以學(xué)到

如何創(chuàng)建一個(gè)?vite 插件模板
vite 插件的?各個(gè)鉤子作用
vite 插件的?鉤子執(zhí)行順序
如何寫一個(gè)自己的插件

了解 vite 插件

1. 什么是 vite 插件

vite?其實(shí)就是一個(gè)由原生?ES Module?驅(qū)動(dòng)的新型 Web 開(kāi)發(fā)前端構(gòu)建工具。

vite 插件?就可以很好的擴(kuò)展?vite?自身不能做到的事情，比如?文件圖片的壓縮、?對(duì) commonjs 的支持、?打包進(jìn)度條?等等。

2. 為什么要寫 vite 插件

相信在座的每位同學(xué)，到現(xiàn)在對(duì)?webpack?的相關(guān)配置以及常用插件都了如指掌了吧；

vite?作為一個(gè)新型的前端構(gòu)建工具，它還很年輕，也有很多擴(kuò)展性，那么為什么我們不趁現(xiàn)在與它一起攜手前進(jìn)呢？做一些于你于我于大家更有意義的事呢？

快速體驗(yàn)

要想寫一個(gè)插件，那必須從創(chuàng)建一個(gè)項(xiàng)目開(kāi)始，下面的?vite 插件通用模板?大家以后寫插件可以直接clone使用；

插件通用模板 github：體驗(yàn)入口：github.com/jeddygong/vite-templates/tree/master/vite-plugin-template[2]

插件 github：體驗(yàn)入口：github.com/jeddygong/vite-plugin-progress[3]

建議包管理器使用優(yōu)先級(jí)：pnpm > yarn > npm > cnpm

長(zhǎng)話短說(shuō)，直接開(kāi)干 ~

創(chuàng)建?vite 插件通用模板

1. 初始化

1.1?創(chuàng)建一個(gè)文件夾并且初始化：初始化按照提示操作即可

mkdir?vite-plugin-progress?&&?cd?vite-plugin-progress?&&?pnpm?init? 復(fù)制代碼

1.2?安裝?typescript

pnpm?i?typescript?@types/node?-D 復(fù)制代碼

1.3?配置?tsconfig.json

{"compilerOptions":?{"module":?"ESNext","target":?"esnext","moduleResolution":?"node","strict":?true,"declaration":?true,"noUnusedLocals":?true,"esModuleInterop":?true,"outDir":?"dist","lib":?["ESNext"],"sourceMap":?false,"noEmitOnError":?true,"noImplicitAny":?false},"include":?["src/*","*.d.ts"],"exclude":?["node_modules","examples","dist"] } 復(fù)制代碼

1.4?安裝?vite

//?進(jìn)入?package.json {..."devDependencies":?{"vite":?"*"}... } 復(fù)制代碼

2. 配置?eslint?和?prettier（可選）

安裝?eslint

pnpm?i?eslint?@typescript-eslint/parser?@typescript-eslint/eslint-plugin?--save-dev

配置?.eslintrc：配置連接[4]

安裝?prettier?（可選）

pnpm?i?prettier?eslint-config-prettier?eslint-plugin-prettier?--save-dev

配置?.prettierrc?：配置連接[5]

3. 新增?src/index.ts?入口

import type { PluginOption } from 'vite';export default function vitePluginTemplate(): PluginOption {return {// 插件名稱name: 'vite-plugin-template',// pre 會(huì)較于 post 先執(zhí)行enforce: 'pre', // post// 指明它們僅在 'build' 或 'serve' 模式時(shí)調(diào)用apply: 'build', // apply 亦可以是一個(gè)函數(shù)config(config, { command }) {console.log('這里是config鉤子');},configResolved(resolvedConfig) {console.log('這里是configResolved鉤子');},configureServer(server) {console.log('這里是configureServer鉤子');},transformIndexHtml(html) {console.log('這里是transformIndexHtml鉤子');},} } 復(fù)制代碼

其中的 vite 插件函數(shù)鉤子會(huì)在下面詳細(xì)詳解 ~

到這里，那么我們的基本模版就建好了，但是我們現(xiàn)在思考一下，我們應(yīng)該怎么去運(yùn)行這個(gè)插件呢？

那么我們就需要?jiǎng)?chuàng)建一些?examples?例子來(lái)運(yùn)行這個(gè)代碼了；

4. 創(chuàng)建 examples 目錄

我這里創(chuàng)建了三套項(xiàng)目 demo，大家直接 copy 就行了，這里就不詳細(xì)介紹了

vite-react：github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-react[6]

vite-vue2：github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-vue2[7]

vite-vue3：github.com/jeddygong/vite-templates/tree/master/vite-plugin-template/examples/vite-vue3[8]

如果你的插件需要多跑一些 demo，自行創(chuàng)建項(xiàng)目即可；

那么下面我們就需要配置 examples 下的項(xiàng)目與當(dāng)前根目錄的插件做一個(gè)聯(lián)調(diào)了（下面以?examples/vite-vue3?為例）。

5. 配置?examples/vite-vue3?項(xiàng)目

修改?examples/vite-vue3/package.json

{..."devDependencies":?{..."vite":?"link:../../node_modules/vite","vite-plugin-template":?"link:../../"} }

上面意思就是說(shuō)：

要把?examples/vite-vue3?項(xiàng)目中的 vite 版本與根目錄?vite-plugin-template?的版本一致；
同時(shí)要把?examples/vite-vue3?項(xiàng)目中的?vite-plugin-template?指向你當(dāng)前根目錄所開(kāi)發(fā)的插件；

引入插件：?examples/vite-vue3/vite.config.ts

import template from 'vite-plugin-template';export default defineConfig({...plugins: [vue(), template()],... });

安裝：?cd examples/vite-vue3 && pnpm install

cd?examples/vite-vue3?&&?pnpm?install

注意：?examples/vite-vue2?和?examples/vite-react?的配置與這一致

思考：

到這里，我們?cè)偎伎家幌?#xff0c;我們把?examples/vite-vue3?中的項(xiàng)目配置好了，但是我們應(yīng)該怎么去運(yùn)行呢？

直接去?examples/vite-vue3?目錄下運(yùn)行?pnpm run build?或者?pnpm run dev?？

這樣顯然是不能運(yùn)行成功的，因?yàn)槲覀兊母夸浵碌?src/index.ts?是沒(méi)法直接運(yùn)行的，所以我們需要把?.ts?文件轉(zhuǎn)義成?.js?文件；

那么我們?cè)趺刺幚砟?#xff1f;

那么我們不得不去試著用用一個(gè)輕小且無(wú)需配置的工具?tsup?了。

6. 安裝?tsup?配置運(yùn)行命令

tsup?是一個(gè)輕小且無(wú)需配置的，由?esbuild?支持的構(gòu)建工具；

同時(shí)它可以直接把?.ts、.tsx?轉(zhuǎn)成不同格式?esm、cjs、iife?的工具；

安裝?tsup

pnpm?i?tsup?-D

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

{..."scripts":?{"dev":?"pnpm?run?build?--?--watch?--ignore-watch?examples","build":?"tsup?src/index.ts?--dts?--format?cjs,esm","example:react":?"cd?examples/vite-react?&&?pnpm?run?build","example:vue2":?"cd?examples/vite-vue2?&&?pnpm?run?build","example:vue3":?"cd?examples/vite-vue3?&&?pnpm?run?build"},... }

7. 開(kāi)發(fā)環(huán)境運(yùn)行

開(kāi)發(fā)環(huán)境運(yùn)行：實(shí)時(shí)監(jiān)聽(tīng)文件修改后重新打包（熱更新）

pnpm?run?dev

運(yùn)行?examples?中的任意一個(gè)項(xiàng)目（以 vite-vue3 為例）

pnpm?run?example:vue3

注意：

如果你的插件只會(huì)在 build 時(shí)運(yùn)行，那就設(shè)置?"example:vue3": "cd examples/vite-vue3 && pnpm run build"?；

反之就運(yùn)行?pnpm run dev

輸出：

Untitled.png

到這里你就可以?邊開(kāi)發(fā)邊運(yùn)行?了，尤雨溪看了都說(shuō)爽歪歪 ~

8. 發(fā)布

安裝 `bumpp` 添加版本控制與 tag

pnpm?i?bumpp?-D 復(fù)制代碼

配置 `package.json`

{..."scripts":?{..."prepublishOnly":?"pnpm?run?build","release":?"npx?bumpp?--push?--tag?--commit?&&?pnpm?publish",},... } 復(fù)制代碼

開(kāi)發(fā)完插件后運(yùn)行發(fā)布

#?第一步 pnpm?run?prepublishOnly#?第二步 pnpm?run?release 復(fù)制代碼

那么到這里，我們的?vite 插件模板?就已經(jīng)寫好了，大家可以直接克隆?vite-plugin-template 模板[9]?使用；

如果你對(duì)?vite 的插件鉤子?和?實(shí)現(xiàn)一個(gè)真正的 vite 插件?感興趣可以繼續(xù)往下面看；

vite 的插件鉤子 hooks 們

1. vite 獨(dú)有的鉤子

enforce?：值可以是pre?或?post?，?pre?會(huì)較于?post?先執(zhí)行；

apply?：值可以是?build?或?serve?亦可以是一個(gè)函數(shù)，指明它們僅在?build?或?serve?模式時(shí)調(diào)用；

config(config, env)?：可以在 vite 被解析之前修改 vite 的相關(guān)配置。鉤子接收原始用戶配置 config 和一個(gè)描述配置環(huán)境的變量env；

configResolved(resolvedConfig)?：在解析 vite 配置后調(diào)用。使用這個(gè)鉤子讀取和存儲(chǔ)最終解析的配置。當(dāng)插件需要根據(jù)運(yùn)行的命令做一些不同的事情時(shí)，它很有用。

configureServer(server)?：主要用來(lái)配置開(kāi)發(fā)服務(wù)器，為 dev-server (connect 應(yīng)用程序) 添加自定義的中間件；

transformIndexHtml(html)?：轉(zhuǎn)換 index.html 的專用鉤子。鉤子接收當(dāng)前的 HTML 字符串和轉(zhuǎn)換上下文；

handleHotUpdate(ctx)：執(zhí)行自定義HMR更新，可以通過(guò)ws往客戶端發(fā)送自定義的事件；

2. vite 與 rollup 的通用鉤子之構(gòu)建階段

options(options)?：在服務(wù)器啟動(dòng)時(shí)被調(diào)用：獲取、操縱Rollup選項(xiàng)，嚴(yán)格意義上來(lái)講，它執(zhí)行于屬于構(gòu)建階段之前；

buildStart(options)：在每次開(kāi)始構(gòu)建時(shí)調(diào)用；

resolveId(source, importer, options)：在每個(gè)傳入模塊請(qǐng)求時(shí)被調(diào)用，創(chuàng)建自定義確認(rèn)函數(shù)，可以用來(lái)定位第三方依賴；

load(id)：在每個(gè)傳入模塊請(qǐng)求時(shí)被調(diào)用，可以自定義加載器，可用來(lái)返回自定義的內(nèi)容；

transform(code, id)：在每個(gè)傳入模塊請(qǐng)求時(shí)被調(diào)用，主要是用來(lái)轉(zhuǎn)換單個(gè)模塊；

buildEnd()：在構(gòu)建階段結(jié)束后被調(diào)用，此處構(gòu)建結(jié)束只是代表所有模塊轉(zhuǎn)義完成；

3. vite 與 rollup 的通用鉤子之輸出階段

outputOptions(options)：接受輸出參數(shù)；

renderStart(outputOptions, inputOptions)：每次 bundle.generate 和 bundle.write 調(diào)用時(shí)都會(huì)被觸發(fā)；

augmentChunkHash(chunkInfo)：用來(lái)給 chunk 增加 hash；

renderChunk(code, chunk, options)：轉(zhuǎn)譯單個(gè)的chunk時(shí)觸發(fā)。rollup 輸出每一個(gè)chunk文件的時(shí)候都會(huì)調(diào)用；

generateBundle(options, bundle, isWrite)：在調(diào)用 bundle.write 之前立即觸發(fā)這個(gè) hook；

writeBundle(options, bundle)：在調(diào)用 bundle.write后，所有的chunk都寫入文件后，最后會(huì)調(diào)用一次 writeBundle；

closeBundle()：在服務(wù)器關(guān)閉時(shí)被調(diào)用

4. 插件鉤子函數(shù) hooks 的執(zhí)行順序（如下圖）

vite插件開(kāi)發(fā)鉤子函數(shù) (1).png

5. 插件的執(zhí)行順序

別名處理Alias

用戶插件設(shè)置enforce: 'pre'

vite 核心插件

用戶插件未設(shè)置enforce

vite 構(gòu)建插件

用戶插件設(shè)置enforce: 'post'

vite 構(gòu)建后置插件(minify, manifest, reporting)

手?jǐn)]一個(gè) vite 插件

下面以?vite 打包進(jìn)度條?插件為例；

demo.gif

插件地址：github[10]?如果您覺(jué)得不錯(cuò)歡迎 star ??

該插件已被 vite 官方收集至官方文檔：鏈接地址[11]

因?yàn)槲恼碌闹攸c(diǎn)不在于這個(gè)插件的詳細(xì)實(shí)現(xiàn)過(guò)程，所以本文只會(huì)貼上源代碼供大家參考，詳細(xì)介紹會(huì)在下一篇文章中講解，請(qǐng)大家拭目以待吧！

`inde.ts`

import type { PluginOption } from 'vite'; import colors from 'picocolors'; import progress from 'progress'; import rd from 'rd'; import { isExists, getCacheData, setCacheData } from './cache';type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;type PluginOptions = Merge<ProgressBar.ProgressBarOptions,{/*** total number of ticks to complete* @default 100*/total?: number;/*** The format of the progress bar*/format?: string;} >;export default function viteProgressBar(options?: PluginOptions): PluginOption {const { cacheTransformCount, cacheChunkCount } = getCacheData()let bar: progress;const stream = options?.stream || process.stderr;let outDir: string;let transformCount = 0let chunkCount = 0let transformed = 0let fileCount = 0let lastPercent = 0let percent = 0return {name: 'vite-plugin-progress',enforce: 'pre',apply: 'build',config(config, { command }) {if (command === 'build') {config.logLevel = 'silent';outDir = config.build?.outDir || 'dist';options = {width: 40,complete: '\u2588',incomplete: '\u2591',...options};options.total = options?.total || 100;const transforming = isExists ? `${colors.magenta('Transforms:')} :transformCur/:transformTotal | ` : ''const chunks = isExists ? `${colors.magenta('Chunks:')} :chunkCur/:chunkTotal | ` : ''const barText = `${colors.cyan(`[:bar]`)}`const barFormat =options.format ||`${colors.green('Bouilding')} ${barText} :percent | ${transforming}${chunks}Time: :elapseds`delete options.format;bar = new progress(barFormat, options as ProgressBar.ProgressBarOptions);// not cache: Loop files in src directoryif (!isExists) {const readDir = rd.readSync('src');const reg = /\.(vue|ts|js|jsx|tsx|css|scss||sass|styl|less)$/gi;readDir.forEach((item) => reg.test(item) && fileCount++);}}},transform(code, id) {transformCount++// not cacheif(!isExists) {const reg = /node_modules/gi;if (!reg.test(id) && percent < 0.25) {transformed++percent = +(transformed / (fileCount * 2)).toFixed(2)percent < 0.8 && (lastPercent = percent)}if (percent >= 0.25 && lastPercent <= 0.65) {lastPercent = +(lastPercent + 0.001).toFixed(4)} }// go cacheif (isExists) runCachedData()bar.update(lastPercent, {transformTotal: cacheTransformCount,transformCur: transformCount,chunkTotal: cacheChunkCount,chunkCur: 0,})return {code,map: null};},renderChunk() {chunkCount++if (lastPercent <= 0.95) isExists ? runCachedData() : (lastPercent = +(lastPercent + 0.005).toFixed(4))bar.update(lastPercent, {transformTotal: cacheTransformCount,transformCur: transformCount,chunkTotal: cacheChunkCount,chunkCur: chunkCount,})return null},closeBundle() {// close progressbar.update(1)bar.terminate()// set cache datasetCacheData({cacheTransformCount: transformCount,cacheChunkCount: chunkCount,})// out successful messagestream.write(`${colors.cyan(colors.bold(`Build successful. Please see ${outDir} directory`))}`);stream.write('\n');stream.write('\n');}};/*** run cache data of progress*/function runCachedData() {if (transformCount === 1) {stream.write('\n');bar.tick({transformTotal: cacheTransformCount,transformCur: transformCount,chunkTotal: cacheChunkCount,chunkCur: 0,})}transformed++percent = lastPercent = +(transformed / (cacheTransformCount + cacheChunkCount)).toFixed(2)} }復(fù)制代碼

`cache.ts`

import fs from 'fs'; import path from 'path';const dirPath = path.join(process.cwd(), 'node_modules', '.progress'); const filePath = path.join(dirPath, 'index.json');export interface ICacheData {/*** Transform all count*/cacheTransformCount: number;/*** chunk all count*/cacheChunkCount: number }/*** It has been cached* @return boolean*/ export const isExists = fs.existsSync(filePath) || false;/*** Get cached data* @returns ICacheData*/ export const getCacheData = (): ICacheData => {if (!isExists) return {cacheTransformCount: 0,cacheChunkCount: 0};return JSON.parse(fs.readFileSync(filePath, 'utf8')); };/*** Set the data to be cached* @returns */ export const setCacheData = (data: ICacheData) => {!isExists && fs.mkdirSync(dirPath);fs.writeFileSync(filePath, JSON.stringify(data)); };復(fù)制代碼

最后

該系列會(huì)是一個(gè)持續(xù)更新系列，關(guān)于整個(gè)《Vite 從入門到精通》專欄[12]，我主要會(huì)從如下圖幾個(gè)方面講解，請(qǐng)大家拭目以待吧！！！