在开发过程中，我们经常会遇到一个问题：有一个bug已经修复了，然后也重新更新部署了，但是测试环境还是能复现，这时我们可能会产生自我怀疑：明明已经改了，为啥没生效？然后通过各种手段最终发现测试环境因为某些原因没更新成功，周而复始，就很烦。那有没有一种可能在打包过程中将一些信息记录以便于线上环境验证是否更新成功。
于是，我就开发了一款打包插件，最开始只是webpack插件，后来发现了unplugin，可以同时打包不同的框架中，于是我便开发了unplugin-build-info。
展示效果
支持框架
webpack4/webpack5viterolluprspackrsbuildfarm
安装
npm i @renzp/unplugin-build-info -D
使用
webpack
// webpack.config.ts
import BuildInfoWebpackPlugin from '@renzp/unplugin-build-info/webpack'
export default {
plugins: [BuildInfoWebpackPlugin()]
}
vite
// vite.config.ts
import { defineConfig } from 'vite'
import BuildInfoVitePlugin from '@renzp/unplugin-build-info/vite'
export default defineConfig({
plugins: [BuildInfoVitePlugin()],
})
rspack
// rspack.config.js
const BuildInfoRspackPlugin = require('@renzp/unplugin-build-info/rspack')
module.exports = {
plugins: [BuildInfoRspackPlugin.default()]
}
rsbuild
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import BuildInfoRspackPlugin from '@renzp/unplugin-build-info/rspack'
export default defineConfig({
tools: {
rspack: {
plugins: [BuildInfoRspackPlugin()],
},
},
})
rollup
// rollup.config.mjs
import BuildInfoRollupPlugin from '@renzp/unplugin-build-info/rollup'
export default {
plugins: [BuildInfoRollupPlugin()],
}
farm
// farm.config.ts
import { defineConfig } from '@farmfe/core'
import BuildInfoVitePlugin from '@renzp/unplugin-build-info/vite'
export default defineConfig({
vitePlugins: [BuildInfoVitePlugin()],
})
注意事项
如果使用的html模板名字不是index.html，则可通过html参数指定模板名称(vite插件不需要此参数)。注意是文件名称，不是文件路径。
例如：
- html模板文件路径为：
./src/html/index.html，则无需指定。 - html模板文件路径为：
./src/html/app.html，则需要指定html: 'app.html'
原因：内部通过匹配资源文件名来进行查找html文件的，默认为index.html，如果不是则需要指定。
import BuildInfoWebpackPlugin from '@renzp/unplugin-build-info/webpack'
export default {
plugins: [BuildInfoWebpackPlugin({ html: 'app.html'})]
}
参数
interface Options {
// html模板文件，默认为index.html，如果使用的html模板不是index.html，则可以使用该选项指定模板文件名称
html?: string
// 是否显示项目名称(package.name)
showName?:boolean
// 是否显示项目版本号(package.version)
showVersion?:boolean
// 项目名称样式
nameBlockColor?: string
// 是否显示打包时间
showTime?:boolean
// 打包时间样式
timeBlockColor?: string
// 是否显示git信息
showGit?:boolean
// git信息样式
gitBlockColor?: string
}
结语
希望你喜欢此插件或者此插件对你有用。如果有用，希望可以给个Star。
