@kp-ui/build-plugins

构建插件和配置工具集合，为昆鹏UI提供构建支持。

安装

npm install @kp-ui/build-plugins --save-dev
# 或
pnpm add @kp-ui/build-plugins -D

使用方法

Vite配置

你可以在Vite项目中直接引用我们预设的配置:

// vite.config.ts
import { defineConfig } from 'vite';
import { initViteConfig } from '@kp-ui/build-plugins';

export default defineConfig(async ({ mode }) => {
  // 初始化配置，自动根据mode选择开发或生产配置
  return await initViteConfig(mode, {
    // 可选：自定义输出目录
    outDir: 'dist',
    // 可选：自定义基础路径
    base: '/',
    // 可选：添加额外的配置
    extraConfig: {
      // 自定义配置...
    }
  });
});

单独使用各种配置

你也可以单独引入各种配置和插件:

import { 
  baseConfig, 
  devConfig, 
  prodConfig,
  include, 
  exclude,
  configVisualizerPlugin,
  loadIcon,
  isReportMode
} from '@kp-ui/build-plugins';

// 使用基础配置
const config = await baseConfig(env);

// 使用开发配置
const devConf = await devConfig({ mode: 'development' });

// 使用生产配置
const prodConf = await prodConfig({ mode: 'production' });

// 使用优化依赖列表
console.log(include, exclude);

// 使用可视化插件
const plugins = configVisualizerPlugin();

使用插件工厂函数

我们提供了多种插件的工厂函数，方便你定制自己的插件配置:

import { 
  createVuePlugins,
  createSvgPlugin,
  createAutoImportPlugins,
  createHtmlPluginConfig,
  createCompressionPlugin,
  createMicroAppPlugin,
  createMockPlugin,
  createEslintPlugin
} from '@kp-ui/build-plugins';

// 组合多种插件
const plugins = [
  // Vue相关插件
  ...createVuePlugins(),
  
  // SVG图标插件
  createSvgPlugin('src/icons'),
  
  // 自动导入插件
  ...createAutoImportPlugins({
    dirs: ['src/composables'],
    imports: ['vue', 'vue-router']
  }),
  
  // HTML插件
  createHtmlPluginConfig('应用标题'),
  
  // 仅在生产环境使用压缩插件
  process.env.NODE_ENV === 'production' && createCompressionPlugin(),
  
  // 微前端插件
  createMicroAppPlugin('my-app')
].filter(Boolean); // 过滤掉false值

高级示例

这是一个完整的示例，展示如何结合多种插件和配置:

import { defineConfig } from 'vite';
import { 
  initViteConfig, 
  createVuePlugins, 
  createSvgPlugin, 
  createAutoImportPlugins,
  createHtmlPluginConfig,
  createCompressionPlugin,
  createMicroAppPlugin
} from '@kp-ui/build-plugins';

export default defineConfig(async ({ mode }) => {
  // 自定义插件
  const customPlugins = [
    ...createVuePlugins(),
    createSvgPlugin('src/icons'),
    ...createAutoImportPlugins({
      dirs: ['src/composables', 'src/utils'],
      imports: ['vue', 'vue-router', 'pinia']
    }),
    createHtmlPluginConfig('我的应用'),
    mode === 'production' && createMicroAppPlugin('my-app'),
    mode === 'production' && createCompressionPlugin({
      deleteOriginFile: true,
      threshold: 5120
    })
  ].filter(Boolean);

  // 初始化配置
  return await initViteConfig(mode, {
    outDir: 'dist',
    extraConfig: {
      plugins: customPlugins,
      server: {
        port: 3000,
        proxy: {
          '/api': {
            target: 'http://localhost:8080',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
          }
        }
      }
    }
  });
});

API 参考

initViteConfig(mode, options)

初始化Vite配置的主要函数。

参数:

• mode (string): 环境模式，如 'development' 或 'production'
• options (ConfigOptions): 配置选项
  • cwd (string): 自定义工作目录，默认为 process.cwd()
  • outDir (string): 自定义输出目录
  • base (string): 自定义基础路径
  • extraConfig (UserConfig): 额外的Vite配置选项

返回值:

• Promise: 完整的Vite配置对象

插件工厂函数

| 函数名 | 描述 | 参数 | |--------|------|------| | createVuePlugins | 创建Vue相关插件 | 无 | | createSvgPlugin | 创建SVG图标插件 | iconDirPath: SVG图标目录路径 | | createAutoImportPlugins | 创建自动导入插件 | options: {dirs, dts, imports} | | createHtmlPluginConfig | 创建HTML插件 | title: 页面标题 | | createCompressionPlugin | 创建压缩插件 | options: 压缩选项 | | createMicroAppPlugin | 创建微前端插件 | name: 应用名称, useDevMode: 是否使用开发模式 | | createMockPlugin | 创建Mock服务插件 | env: 环境变量 | | createEslintPlugin | 创建Eslint插件 | 无 |

插件说明

• loadIcon: 从远程加载图标
• configVisualizerPlugin: 生成打包分析报告
• include/exclude: 优化依赖预构建的包含/排除列表

许可证

MIT