A frontend build toolkit for Halo plugin development, supporting both Vite and Rsbuild build systems.
npm install @halo-dev/ui-plugin-bundler-kitA frontend build toolkit for Halo plugin development, supporting both Vite and Rsbuild build systems.
@halo-dev/ui-plugin-bundler-kit is a frontend build configuration toolkit specifically designed for Halo plugin development. It provides pre-configured build settings to help developers quickly set up and build frontend interfaces for Halo plugins.
- 🚀 Ready to Use - Provides pre-configured Vite and Rsbuild build settings
- 📦 Multi-Build Tool Support - Supports both Vite and Rsbuild
- 🔧 Flexible Configuration - Supports custom build configurations
- 🎯 Halo Optimized - External dependencies and global variables optimized for Halo plugin development
- 📁 Smart Output - Automatically selects output directory based on environment
``bashUsing npm
npm install @halo-dev/ui-plugin-bundler-kit
$3
For Vite users, you need to install Vite:
`bash
npm install vite
`For Rsbuild users, you need to install Rsbuild:
`bash
npm install @rsbuild/core
`Usage
$3
Create or update
vite.config.ts file in your project root:`typescript
import { viteConfig } from "@halo-dev/ui-plugin-bundler-kit";export default viteConfig({
vite: {
// Your custom Vite configuration
plugins: [
// Additional plugins (Vue plugin is already included)
],
// Other configurations...
},
});
`> Note: Vue plugin is pre-configured, no need to add it manually.
$3
Create or update
rsbuild.config.ts file in your project root:`typescript
import { rsbuildConfig } from "@halo-dev/ui-plugin-bundler-kit";export default rsbuildConfig({
rsbuild: {
// Your custom Rsbuild configuration
plugins: [
// Additional plugins (Vue plugin is already included)
],
// Other configurations...
},
});
`> Note: Vue plugin is pre-configured, no need to add it manually.
$3
> ⚠️ Note: The
HaloUIPluginBundlerKit function is deprecated. Please use viteConfig or rsbuildConfig instead.`typescript
import { HaloUIPluginBundlerKit } from "@halo-dev/ui-plugin-bundler-kit";export default {
plugins: [
HaloUIPluginBundlerKit({
// Configuration options
}),
],
};
`Configuration Options
$3
`typescript
interface ViteUserConfig {
/**
* Halo plugin manifest file path
* @default "../src/main/resources/plugin.yaml"
*/
manifestPath?: string; /**
* Custom Vite configuration
*/
vite: UserConfig | UserConfigFnObject;
}
`$3
`typescript
interface RsBuildUserConfig {
/**
* Halo plugin manifest file path
* @default "../src/main/resources/plugin.yaml"
*/
manifestPath?: string; /**
* Custom Rsbuild configuration
*/
rsbuild: RsbuildConfig | ((env: ConfigParams) => RsbuildConfig);
}
`Advanced Configuration Examples
$3
`typescript
import { viteConfig } from "@halo-dev/ui-plugin-bundler-kit";
import path from "path";export default viteConfig({
vite: {
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
"@components": path.resolve(__dirname, "src/components"),
},
},
},
});
`$3
`typescript
import { rsbuildConfig } from "@halo-dev/ui-plugin-bundler-kit";export default rsbuildConfig({
rsbuild: {
source: {
alias: {
"@": "./src",
"@components": "./src/components",
},
},
},
});
`$3
`typescript
import { viteConfig } from "@halo-dev/ui-plugin-bundler-kit";
import { defineConfig } from "vite";
import UnoCSS from "unocss/vite";export default viteConfig({
vite: {
plugins: [
UnoCSS(), // Add UnoCSS plugin
],
},
});
`$3
`typescript
import { rsbuildConfig } from "@halo-dev/ui-plugin-bundler-kit";
import { pluginSass } from "@rsbuild/plugin-sass";export default rsbuildConfig({
rsbuild: {
plugins: [
pluginSass(), // Add Sass plugin
],
},
});
`$3
`typescript
import { viteConfig } from "@halo-dev/ui-plugin-bundler-kit";export default viteConfig({
manifestPath: "application/src/main/resources/plugin.yaml", // Custom manifest file path
vite: {
// Other configurations...
},
});
`Development Scripts
Recommended scripts to add to your
package.json:`json
{
"scripts": {
"dev": "vite dev --mode=development --watch",
"build": "vite build"
}
}
`For Rsbuild:
`json
{
"scripts": {
"dev": "rsbuild dev --env-mode=development --watch",
"build": "rsbuild build"
}
}
`Build Output
> Relative to the root directory of the Halo plugin project
- Development:
build/resources/main/console
- Production: ui/build/dist> Note: The production build output directory of
HaloUIPluginBundlerKit is still src/main/resources/console to ensure compatibility.Requirements
- Node.js: ^18.0.0 || >=20.0.0
- Peer Dependencies:
-
@rsbuild/core: ^1.0.0 (when using Rsbuild)
- @rsbuild/plugin-vue: ^1.0.0 (when using Rsbuild)
- @vitejs/plugin-vue: ^4.0.0 || ^5.0.0 (when using Vite)
- vite: ^4.0.0 || ^5.0.0 || ^6.0.0 (when using Vite)Vite vs Rsbuild
Both Vite and Rsbuild are excellent build tools, but they have different strengths depending on your use case:
$3
Recommended for large-scale plugins
- ✅ Code Splitting Support - Rsbuild provides excellent support for code splitting and lazy loading
- ✅ Better Performance - Generally faster build times and smaller bundle sizes for complex applications
- ✅ Dynamic Imports - Perfect for plugins with heavy frontend components
Example with dynamic imports:
`typescript
import { definePlugin } from "@halo-dev/ui-shared";
import { defineAsyncComponent } from "vue";
import { VLoading } from "@halo-dev/components";export default definePlugin({
routes: [
{
parentName: "Root",
route: {
path: "demo",
name: "DemoPage",
// Lazy load heavy components
component: defineAsyncComponent({
loader: () => import("./views/DemoPage.vue"),
loadingComponent: VLoading,
}),
},
},
],
extensionPoints: {},
});
``Recommended for simple to medium-scale plugins
- ✅ Vue Ecosystem Friendly - Better integration with Vue ecosystem tools and plugins
- ✅ Rich Plugin Ecosystem - Extensive collection of Vite plugins available
- ✅ Simple Configuration - Easier to configure for straightforward use cases
| Feature | Vite | Rsbuild |
| ----------------- | ------------ | ------------ |
| Code Splitting | ❌ Limited | ✅ Excellent |
| Vue Ecosystem | ✅ Excellent | ✅ Good |
| Build Performance | ✅ Good | ✅ Excellent |
| Dev Experience | ✅ Excellent | ✅ Excellent |
| Plugin Ecosystem | ✅ Rich | ✅ Growing |
| Configuration | ✅ Simple | ⚖️ Moderate |
Recommendation: Use Rsbuild for complex plugins with large frontend codebases, and Vite for simpler plugins or when you need extensive Vue ecosystem integration.
GPL-3.0
Issues and Pull Requests are welcome! Please check our Contributing Guide for more information.
- Halo Website
- Halo Documentation
- GitHub Repository
- Plugin Development Guide