vite 插件,vite打包工具
本文主要介绍一个如何更流畅的使用vite插件包的例子。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。
目录
用法及用法介绍(带参数):给自定义进度条加点颜色：实现思路。第一次打包(模拟模块总数)与进度条配合。添加缓存。使用缓存实现架构图。最后
前言
上一个我给你带了《如何入门去写一个 vite 插件》。我能看出学生们非常喜欢它。如果对vite感兴趣，可以关注我的专栏《vite 从入门到精通》。
因为公司目前大部分项目都已经转化为vite，为了给社区增加一份贡献，我们开发了一个插件vite-plugin-progress，已经应用到项目中vite的前端打包进度条上；
介绍
Vite-plugin-progress插件是一个在打包时显示进度条的插件。如果你觉得这个插件对你的项目有帮助，欢迎明星支持。谢谢大家！
用法
安装
# npm
npm我邀请-插件-进度-D
#纱线
纱线添加插件-进度-D
# pnpm
pnpm i邀请-插件-进度-D
使用（不带参数）:vite.config.js/vite.config.ts的配置
从“vite-plugin-progress”导入进度
导出默认值{
插件：[
进度()
]
}
参数 0ptions:
格式：自定义进度条的格式；Width:终端中进度条的宽度；完成：完成后的默认字符\ u2588不完整：不完整的默认字符；RenderThrottle:默认的间隔更新时间是16(毫秒)；Clear:完成后是否清空终端，false默认情况下；回调：完成后执行的回调函数；流终端中输出格式流，默认为stderrHead:进度条的第一个字符；options参数格式中每个标记的含义：
:bar:代表进度条；当前：当前执行位置的规模；合计：总规模；elapsed:经过的时间(秒)；percent:完成的百分比；eta:预计完成时间(秒)；速率：每秒的速率；
使用（带参数）：
//vite . config . js/vite . config . ts
从“vite-plugin-progress”导入进度
导出默认值{
插件：[
进度({
格式：建筑[:条]:百分比，
总计：200，
宽度：60，
完成：“=”，
不完整：“”，
})
]
}
给自定义进度条加点颜色：
安装微微色：
pnpm i微微色-D
使用：
//vite . config . js/vite . config . ts
从“vite-plugin-progress”导入进度
从“微微色”导入颜色
导出默认值{
插件：[
进度({
format:`$ { colors . green(colors . bold( boubuilding )} $ { colors . cyan([:bar])}:percent ` p
})
]
}
如果你只想使用插件，那么现在就去安装吧！
如果你对实现的想法感兴趣，那么你可以继续向下滚动查看~
实现思路
其实要实现这个功能，我们主要考虑的是目前的vite打包进度在哪里，所以我们思考两个问题：
vite包装目前进展如何？我如何知道目前包装的进展？熟悉webpack的朋友对webpack的打包进度条并不陌生。可以发现，在webpack中，webpack公开了一个webpack的事件钩子。ProgressPlugin，可以很方便的在webpack中实现进度条，并且可以通过钩子直接封装；
但是在vite中，由于包代码是基于Rollup构建的，所以我们无法知道当前的vite包进度；
借用vite的一位作者的话：
简单的意思就是vite打包的时候，不可能知道0%-100%的进度条，因为你必须先确定要构建的模块总数。
虽然不知道模块总数，但是第一次封装可以模拟一个；
而且在第一次打包的时候，我们记录了对应的模块个数然后缓存，这样就可以知道对应的模块个数了？
说做就做~
第一次打包（模拟模块总数）
因为我们可以知道科学研究委员会目录下所有的文件总数，所以就可以假设在第一次打包时用该总数来代替模块总数；
那么简单公式：进度条百分比=当前转换的模块/模拟的模块总数
从“维特”导入类型{插件选项}；
从"研发"导入rd；
导出默认函数viteProgressBar(选项？插件选项):插件选项{
//文件类型总数
让文件计数=0
让transformCount=0
let transformed=0 //当前已转换的数量
返回{
.
config(config，{ command }) {
if (command===build) {
const readDir=rd。读取同步( src )；
const reg=/\ .(vue ts js jsx tsx CSS scss sass styl less)$/gi；
readdir。foreach((item)=reg。测试(项目)文件计数)；
}
},
转换（代码，id) {
转换计数
const reg=/node _ modules/gi；
如果(!注册测试(id){
百分比=(转换的/文件数)。toFixed(2)
}
}
}
}
与进度条配合
那么既然我们已经算出了基本的进度条，也知道了基本思路，那么我们就把进度条加进去
从“维特”导入类型{插件选项}；
从"进度"导入进度；
从"研发"导入rd；
导出默认函数viteProgressBar(选项？插件选项):插件选项{
设fileCount=0//文件类型总数
设transformCount=0 //转换的模块总数
let transformed=0 //当前已转换的数量
设最后一个百分比=0；//记录上一次进度条百分比
常量栏：进步；
返回{
.
config(config，{ command }) {
if (command===build) {
//初始化进度条
选项={
宽度：40,
完成：" \u2588 "，
不完整：" \u2591 "，
.选择
};
options.total=options？合计 100;
const transforming=isExists？` ${ colors。magenta( Transforms:)}:transform cur/:transform total `:
const chunks=isExists？` ${ colors。magenta( Chunks:)}:chunk cur/:chunk total `:
const barText=` ${ colors。青色(`[:bar]`)} `
常量条形格式=
options.format
` $ { colors。green( bou building )} $ { barText }:percent $ { transforming } $ { chunks } Time:elapseds ` s时间
删除选项.格式；
bar=新进度(条形格式，选项为进度栏.进度选项)；
//统计目录下的文件总数
const readDir=rd。读取同步( src )；
const reg=/\ .(vue ts js jsx tsx CSS scss sass styl less)$/gi；
readdir。foreach((item)=reg。测试(项目)文件计数)；
}
},
转换（代码，id) {
转换计数
const reg=/node _ modules/gi；
如果(!注册测试(id){
lastPercent=percent=(已转换/文件计数)。toFixed(2)
}
//更新进度条
bar.update(lastPercent，{
转换总数：cacheTransformCount，
transformCur: transformCount，
chunkTotal: cacheChunkCount，
chunkCur: 0，
})
},
closeBundle() {
//关闭进度
bar.update(1)
bar.terminate()
}
}
}
添加缓存
为了更准确的知道打包的进度，那么我们在第一次模拟了总数的时候，也要同时把真实的模块总数给缓存起来，这样在下一次打包时才能更加准确的计算出进度条；
新增缓存文件cache.ts
从" fs "导入fs；
从"路径"导入路径；
const dirPath=path。加入(流程。CWD()，节点模块， .进步);
const文件路径=path。join(dirPath， index。JSON’)；
导出接口ICacheData {
/**
* 转换的模块总数
*/
cacheTransformCount:number；
/**
*组块的总数
*/
cacheChunkCount:数字
}
/**
* 判断是否有缓存
* @返回布尔值
*/
导出常量is exists=fs。exists sync(文件路径) false
/**
* 获取缓存数据
* @返回ICacheData
*/
导出常量getCacheData=(): ICacheData={
如果(!isExists)返回{
cacheTransformCount: 0，
cacheChunkCount: 0
};
返回JSON。解析(fs。读取文件同步(文件路径， utf8 )；
};
/**
* 设置缓存数据
* @返回
*/
export const setCacheData=(data:icache data)={
！是存在的fs。mkdirsync(目录路径)；
fs.writeFileSync(filePath，JSON。stringify(数据))；
};
使用缓存
//缓存进度条计算
函数runCachedData() {
if (transformCount===1) {
溪流。写( \ n )；
条形刻度({
转换总数：cacheTransformCount，
transformCur: transformCount，
chunkTotal: cacheChunkCount，
chunkCur: 0，
})
}
转换
percent=last percent=(transformed/(cacheTransformCount cacheChunkCount)).toFixed(2)
}
实现架构图
最后
该系列会是一个持续更新系列，关于整个专栏《Vite 从入门到精通》 ,我主要会从如下图几个方面讲解，请大家拭目以待吧！
更多关于轻快地打包插件的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。