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

编程问答

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

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

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

前言

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

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

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

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

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

了解 vite 插件

1. 什么是 vite 插件

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

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

2. 為什么要寫 vite 插件

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

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

快速體驗

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

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

插件 github：體驗入口：github.com/jeddygong/vite-plugin-progress[3]

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

長話短說，直接開干 ~

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

1. 初始化

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

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

//?進入?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 會較于 post 先執(zhí)行enforce: 'pre', // post// 指明它們僅在 'build' 或 'serve' 模式時調(diào)用apply: 'build', // apply 亦可以是一個函數(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ù)鉤子會在下面詳細詳解 ~

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

那么我們就需要創(chuàng)建一些?examples?例子來運行這個代碼了；

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

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

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)建項目即可；

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

5. 配置?examples/vite-vue3?項目

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

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

上面意思就是說：

要把?examples/vite-vue3?項目中的 vite 版本與根目錄?vite-plugin-template?的版本一致；
同時要把?examples/vite-vue3?項目中的?vite-plugin-template?指向你當(dāng)前根目錄所開發(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?的配置與這一致

思考：

到這里，我們再思考一下，我們把?examples/vite-vue3?中的項目配置好了，但是我們應(yīng)該怎么去運行呢？

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

這樣顯然是不能運行成功的，因為我們的根目錄下的?src/index.ts?是沒法直接運行的，所以我們需要把?.ts?文件轉(zhuǎn)義成?.js?文件；

那么我們怎么處理呢？

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

6. 安裝?tsup?配置運行命令

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

同時它可以直接把?.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. 開發(fā)環(huán)境運行

開發(fā)環(huán)境運行：實時監(jiān)聽文件修改后重新打包（熱更新）

pnpm?run?dev

運行?examples?中的任意一個項目（以 vite-vue3 為例）

pnpm?run?example:vue3

注意：

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

反之就運行?pnpm run dev

輸出：

Untitled.png

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

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ù)制代碼

開發(fā)完插件后運行發(fā)布

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

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

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

vite 的插件鉤子 hooks 們

1. vite 獨有的鉤子

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

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

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

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

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

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

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

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

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

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

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

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

transform(code, id)：在每個傳入模塊請求時被調(diào)用，主要是用來轉(zhuǎn)換單個模塊；

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)用時都會被觸發(fā)；

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

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

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

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

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

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

vite插件開發(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)]一個 vite 插件

下面以?vite 打包進度條?插件為例；

demo.gif

插件地址：github[10]?如果您覺得不錯歡迎 star ??

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

因為文章的重點不在于這個插件的詳細實現(xiàn)過程，所以本文只會貼上源代碼供大家參考，詳細介紹會在下一篇文章中講解，請大家拭目以待吧！

`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ù)制代碼

最后

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