npm package: @kp-ui/build-plugins
Description: Build plugins for kp-ui
Latest version: 0.0.12

# @kp-ui/build-plugins

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

## 安装

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

## 使用方法

### Vite配置

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

```ts
// 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: {
      // 自定义配置...
    }
  });
});
```

### 单独使用各种配置

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

```ts
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();
```

### 使用插件工厂函数

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

```ts
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值
```

## 高级示例

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

```ts
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<UserConfig>: 完整的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