https://github.com/renzp94/unplugin-build-info
一款将打包信息打印在控制台上的打包插件
https://github.com/renzp94/unplugin-build-info
Last synced: 14 days ago
JSON representation
一款将打包信息打印在控制台上的打包插件
- Host: GitHub
- URL: https://github.com/renzp94/unplugin-build-info
- Owner: renzp94
- Created: 2024-05-21T02:49:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-05T00:43:51.000Z (about 1 year ago)
- Last Synced: 2024-10-25T22:56:25.057Z (about 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 869 KB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-rstack - unplugin-build-info
README
# @renzp/unplugin-build-info
一款将打包信息打印在控制台上的插件。
支持框架：
- `webpack4/webpack5`
- `vite`
- `rollup`
- `rspack`
- `rsbuild`
- `farm`
## Install
```sh
npm i @renzp/unplugin-build-info -D
```
## Usage
### webpack
```ts
// webpack.config.ts
import BuildInfoWebpackPlugin from '@renzp/unplugin-build-info/webpack'
export default {
plugins: [BuildInfoWebpackPlugin()]
}
```
### vite
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import BuildInfoVitePlugin from '@renzp/unplugin-build-info/vite'
export default defineConfig({
plugins: [BuildInfoVitePlugin()],
})
```
### rspack
```js
// rspack.config.js
const BuildInfoRspackPlugin = require('@renzp/unplugin-build-info/rspack')
module.exports = {
plugins: [BuildInfoRspackPlugin.default()]
}
```
### rsbuild
```ts
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core'
import BuildInfoRspackPlugin from '@renzp/unplugin-build-info/rspack'
export default defineConfig({
tools: {
rspack: {
plugins: [BuildInfoRspackPlugin()],
},
},
})
```
### rollup
```js
// rollup.config.mjs
import BuildInfoRollupPlugin from '@renzp/unplugin-build-info/rollup'
export default {
plugins: [BuildInfoRollupPlugin()],
}
```
### farm
```ts
// 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，如果不是则需要指定。
```js
import BuildInfoWebpackPlugin from '@renzp/unplugin-build-info/webpack'
export default {
plugins: [BuildInfoWebpackPlugin({ html: 'app.html'})]
}
```
### Options
```ts
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
}
```