{"id":31970674,"url":"https://github.com/winjs-dev/winjs-plugin-qiankun","last_synced_at":"2025-10-14T19:18:11.266Z","repository":{"id":314197439,"uuid":"1054102070","full_name":"winjs-dev/winjs-plugin-qiankun","owner":"winjs-dev","description":"适配 WinJS 的微前端 qiankun 子应用插件。","archived":false,"fork":false,"pushed_at":"2025-10-05T01:29:59.000Z","size":756,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-05T03:43:33.871Z","etag":null,"topics":["plugin","qiankun","winjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-10T11:18:23.000Z","updated_at":"2025-10-05T01:28:57.000Z","dependencies_parsed_at":"2025-09-11T05:56:58.542Z","dependency_job_id":"85690059-d3b9-4107-87c1-69feeb68330d","html_url":"https://github.com/winjs-dev/winjs-plugin-qiankun","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-qiankun"],"tags_count":1,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-qiankun","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-qiankun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-qiankun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-qiankun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-qiankun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-qiankun/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-qiankun/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020655,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","qiankun","winjs"],"created_at":"2025-10-14T19:18:08.607Z","updated_at":"2025-10-14T19:18:11.259Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# winjs-plugin-qiankun\n\n适配 WinJS 的微前端 qiankun 子应用插件。\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-qiankun\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-qiankun?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@winner-fed/plugin-qiankun?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-qiankun.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n## 功能特性\n\n- 🚀 **自动化子应用改造**: 自动将 WinJS 应用改造为 qiankun 子应用\n- 📦 **完整生命周期支持**: 提供 bootstrap、mount、unmount、update 生命周期钩子\n- 🔧 **智能路由配置**: 自动处理路由前缀和公共路径，支持 hash 和 browser 模式\n- 🎯 **运行时检测**: 提供运行时检测函数，判断是否在 qiankun 环境中运行\n- 📊 **缓存机制**: 内置应用实例缓存，优化性能\n- 🔄 **热重载支持**: 开发环境支持热重载调试\n\n## 安装\n\n```bash\nnpm install @winner-fed/plugin-qiankun\n# 或\nyarn add @winner-fed/plugin-qiankun\n# 或\npnpm add @winner-fed/plugin-qiankun\n```\n\n## 基础使用\n\n### 1. 在 WinJS 项目中启用插件\n\n在 `.winrc.ts` 配置文件中添加插件：\n\n```typescript\nimport { defineConfig } from 'win';\n\nexport default defineConfig({\n  plugins: [\n    require.resolve('@winner-fed/plugin-qiankun')\n  ],\n  qiankun: {\n    child: {}\n  }\n});\n```\n\n### 2. 基础配置\n\n```typescript\nexport default defineConfig({\n  plugins: [\n    require.resolve('@winner-fed/plugin-qiankun')\n  ],\n  qiankun: {\n    child: {\n      enable: true,\n      devSourceMap: true,\n      shouldNotModifyDefaultBase: false,\n      shouldNotModifyRuntimePublicPath: false,\n      shouldNotAddLibraryChunkName: false\n    }\n  }\n});\n```\n\n## 配置选项\n\n### child 配置\n\n| 参数 | 类型 | 默认值 | 说明 |\n|------|------|--------|------|\n| `enable` | `boolean` | `true` | 是否启用子应用功能 |\n| `devSourceMap` | `boolean` | `true` | 开发环境是否启用 source map |\n| `shouldNotModifyDefaultBase` | `boolean` | `false` | 是否不修改默认的 base 路径 |\n| `shouldNotModifyRuntimePublicPath` | `boolean` | `false` | 是否不修改运行时公共路径 |\n| `shouldNotAddLibraryChunkName` | `boolean` | `false` | 是否不添加库 chunk 名称 |\n\n### 生命周期钩子\n\n```typescript\nexport default defineConfig({\n  qiankun: {\n    child: {\n      bootstrap: async (props) =\u003e {\n        console.log('子应用启动', props);\n      },\n      mount: async (props) =\u003e {\n        console.log('子应用挂载', props);\n      },\n      unmount: async (props) =\u003e {\n        console.log('子应用卸载', props);\n      },\n      update: async (props) =\u003e {\n        console.log('子应用更新', props);\n      }\n    }\n  }\n});\n```\n\n## 运行时 API\n\n### isQiankun()\n\n判断当前应用是否运行在 qiankun 环境中：\n\n```javascript\nimport { isQiankun } from '@@/plugin-qiankun-child';\n\nif (isQiankun()) {\n  console.log('当前运行在 qiankun 环境中');\n} else {\n  console.log('当前独立运行');\n}\n```\n\n### 运行时配置\n\n在 `src/app.js` 中进行运行时配置：\n\n```javascript\nexport const qiankun = {\n  child: {\n    bootstrap: async (props) =\u003e {\n      console.log('子应用启动', props);\n    },\n    mount: async (props) =\u003e {\n      console.log('子应用挂载', props);\n      // 处理主应用传递的 props\n      if (props.token) {\n        // 设置认证信息\n        localStorage.setItem('token', props.token);\n      }\n    },\n    unmount: async (props) =\u003e {\n      console.log('子应用卸载', props);\n      // 清理资源\n      localStorage.removeItem('token');\n    },\n    update: async (props) =\u003e {\n      console.log('子应用更新', props);\n    }\n  }\n};\n```\n\n## 高级功能\n\n### 路由配置\n\n插件会自动处理路由前缀，支持以下场景：\n\n1. **Browser 模式**: 自动添加 `/${packageName}` 前缀\n2. **Hash 模式**: 自动重写路由，添加路由前缀\n3. **自定义前缀**: 通过主应用传递的 `routerPrefix` 配置\n\n```javascript\n// 路由配置示例\nexport const router = {\n  scrollBehavior(to, from) {\n    // 自定义滚动行为\n    return { top: 0 };\n  }\n};\n```\n\n### 历史模式支持\n\n```javascript\nexport const qiankun = {\n  child: {\n    mount: async (props) =\u003e {\n      // 主应用可以传递历史模式配置\n      const { history } = props;\n      if (history) {\n        console.log('使用主应用指定的历史模式:', history);\n      }\n    }\n  }\n};\n```\n\n### 加载状态管理\n\n```javascript\nexport const qiankun = {\n  child: {\n    mount: async (props) =\u003e {\n      // 手动控制加载状态\n      if (props.setLoading) {\n        props.setLoading(true);\n        \n        // 执行初始化逻辑\n        await initializeApp();\n        \n        // 完成后关闭加载状态\n        props.setLoading(false);\n      }\n    }\n  }\n};\n```\n\n## 最佳实践\n\n### 1. 应用隔离\n\n确保子应用的样式和全局变量不会影响主应用：\n\n```css\n/* 在子应用中使用 scoped 样式 */\n.my-app {\n  /* 子应用样式 */\n}\n```\n\n### 2. 状态管理\n\n```javascript\n// 使用 Vuex 或 Pinia 进行状态管理\nexport const qiankun = {\n  child: {\n    mount: async (props) =\u003e {\n      // 从主应用获取初始状态\n      if (props.initialState) {\n        store.commit('setInitialState', props.initialState);\n      }\n    },\n    unmount: async (props) =\u003e {\n      // 清理状态\n      store.commit('reset');\n    }\n  }\n};\n```\n\n### 3. 通信机制\n\n```javascript\nexport const qiankun = {\n  child: {\n    mount: async (props) =\u003e {\n      // 监听主应用消息\n      if (props.onGlobalStateChange) {\n        props.onGlobalStateChange((state, prev) =\u003e {\n          console.log('全局状态变化:', state, prev);\n        });\n      }\n      \n      // 向主应用发送消息\n      if (props.setGlobalState) {\n        props.setGlobalState({\n          childAppLoaded: true\n        });\n      }\n    }\n  }\n};\n```\n\n## 注意事项\n\n1. **包名配置**: 确保 `package.json` 中有正确的 `name` 字段\n2. **public-path**: 插件会自动处理 `publicPath`，一般不需要手动配置\n3. **样式隔离**: 建议使用 CSS Modules 或 styled-components 避免样式冲突\n4. **资源加载**: 确保静态资源路径正确，避免在子应用中使用绝对路径\n\n## 故障排除\n\n### 常见问题\n\n1. **子应用无法正常加载**\n    - 检查 `package.json` 中的 `name` 字段\n    - 确认主应用的 `entry` 配置正确\n\n2. **路由跳转异常**\n    - 检查路由配置是否正确\n    - 确认 `base` 配置是否符合预期\n\n3. **样式冲突**\n    - 使用 CSS Modules 或 scoped 样式\n    - 避免全局样式污染\n\n### 调试技巧\n\n```javascript\n// 开启调试模式\nexport const qiankun = {\n  child: {\n    mount: async (props) =\u003e {\n      console.log('子应用 props:', props);\n      console.log('是否在 qiankun 环境:', window.__POWERED_BY_QIANKUN__);\n    }\n  }\n};\n```\n\n## 许可证\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-qiankun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-qiankun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-qiankun/lists"}