Spark Modules Builder

模块化拆包工具，用于将 web-antd/src/views 下的模块打包成独立的 npm 包，供主应用按需加载。

快速开始

1. 配置要打包的模块

编辑 modules.config.ts 文件：

export const moduleExportNames: Record<string, string> = {
  // 系统管理模块
  'views/system/user': 'UserList',
  'views/system/apiManage': 'ApiManageList',

  // 取消注释可添加更多模块:
  // 'views/system/role': 'RoleList',
  // 'views/system/menu': 'MenuList',
  // 'views/system/dict': 'DictList',
};

// 包名称（发布到 npm 时使用）
export const packageName = '@your-org/spark-base';
export const packageVersion = '1.0.0';

2. 执行打包

cd apps/modules-builder
pnpm build

打包后，dist/index.mjs 包含所有配置的模块。

工作原理

modules.config.ts  →  scripts/generate-entry.mjs  →  src/entries/index.ts  →  vite build  →  dist/index.mjs
    (配置文件)              (动态生成入口)              (入口文件)            (打包)

构建流程

1. 读取配置 (generate-entry.mjs): 解析 modules.config.ts 中的模块列表
2. 生成入口: 动态创建 src/entries/index.ts，导入所有模块
3. 提取宿主变量: 从 spark-modules-init.ts 自动提取 window.__SPARK_USER_HOST__ 中的变量
4. 生成占位符: 创建 src/placeholder/constants/common-imports.ts，用于运行时注入
5. Vite 打包: 打包成单个 ESM 文件

宿主依赖注入

子模块打包后，需要在主应用中注册宿主提供的依赖：

主应用端 (web-antd/src/spark-modules-init.ts)

import DynamicListPage from '@your-org/dynamic-list-page';
import { useWlinkModal, useWlinkForm } from '@your-org/wlink-components';
import { useI18n } from 'vue-i18n';

(window as any).__SPARK_USER_HOST__ = {
  // 组件
  DynamicListPage,
  Button: Button,
  Modal: Modal,

  // Hooks
  useWlinkModal,
  useWlinkForm,
  useCrudActions,
  useAccess,

  // 工具
  $t: useI18n().t,
  requestClient,
  message,
  isSuccessResponse,
};

子模块使用

子模块通过 #/placeholder/constants/common-imports 引用这些依赖：

// 在 list.vue 中
import {
  $t,
  DynamicListPage,
  useWlinkModal,
} from '#/placeholder/constants/common-imports';

打包后，这些引用会被替换为 window.__SPARK_USER_HOST__?.xxx。

目录结构

apps/modules-builder/
├── modules.config.ts                    # ⭐ 模块配置文件（编辑此文件）
├── src/
│   ├── index.ts                         # 主入口（重新导出 entries）
│   ├── entries/
│   │   └── index.ts                     # 动态生成的入口文件
│   └── placeholder/
│       └── constants/
│           └── common-imports.ts        # 自动生成的宿主变量占位符
├── scripts/
│   ├── build.mjs                        # 构建脚本
│   └── generate-entry.mjs               # 入口生成脚本
├── dist/                                # ⭐ 打包输出目录（发布到 npm）
├── package.json
├── vite.config.ts
└── README.md

使用子模块

1. 发布 npm 包

cd apps/modules-builder
pnpm build
cd dist
npm publish --access public

2. 在主应用中使用

// 路由配置
import sparkModulesMap from './router/spark-modules-map';

// 动态导入模块
const module = await import('@your-org/spark-base');
const { UserList } = module.default;

// 注册到路由
{
  path: '/system/user',
  component: UserList,
}

3. 路由映射配置 (spark-modules-map.ts)

const sparkModulesMap = {
  '/system/user': () =>
    import('@your-org/spark-base').then((m) => m.default.UserList),
  '/system/apiManage': () =>
    import('@your-org/spark-base').then((m) => m.default.ApiManageList),
};

export default sparkModulesMap;

外部依赖配置

vite.config.ts 中配置了以下外部依赖，打包时会被排除：

• vue / @vue/* - Vue 核心库
• ant-design-vue - Ant Design Vue 组件库
• @wlink/* - 内部组件包

这些依赖需要在主应用中提供。

注意事项

1. 模块路径: 打包时从 web-antd/src/views 读取模块，无需手动复制
2. 文件要求: 每个模块必须包含 list.vue 主文件
3. 宿主变量: 确保主应用的 spark-modules-init.ts 中注册了子模块需要的所有变量
4. 自动生成: src/entries/index.ts 和 src/placeholder/ 下的文件由脚本自动生成，请勿手动修改