{"id":31645688,"url":"https://github.com/umijs/umi-plugin-qiankun","last_synced_at":"2025-10-07T05:15:54.234Z","repository":{"id":34828364,"uuid":"184034443","full_name":"umijs/umi-plugin-qiankun","owner":"umijs","description":"Umi plugin for qiankun.","archived":false,"fork":false,"pushed_at":"2023-07-03T09:25:30.000Z","size":1435,"stargazers_count":640,"open_issues_count":4,"forks_count":185,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-10-02T17:58:16.031Z","etag":null,"topics":["micro-frontends","qiankun","umi-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":false,"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/umijs.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}},"created_at":"2019-04-29T08:48:26.000Z","updated_at":"2025-09-28T12:26:52.000Z","dependencies_parsed_at":"2022-07-08T06:00:21.497Z","dependency_job_id":"917794de-b826-4575-ae96-8a476f6f2f06","html_url":"https://github.com/umijs/umi-plugin-qiankun","commit_stats":{"total_commits":179,"total_committers":16,"mean_commits":11.1875,"dds":0.2737430167597765,"last_synced_commit":"7c6e4cd96233b321e8dfd87f05a98f2adbd06a66"},"previous_names":["umijs/umi-plugin-single-spa"],"tags_count":36,"template":false,"template_full_name":null,"purl":"pkg:github/umijs/umi-plugin-qiankun","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fumi-plugin-qiankun","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fumi-plugin-qiankun/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fumi-plugin-qiankun/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fumi-plugin-qiankun/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umijs","download_url":"https://codeload.github.com/umijs/umi-plugin-qiankun/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umijs%2Fumi-plugin-qiankun/sbom","scorecard":{"id":908583,"data":{"date":"2025-08-11","repo":{"name":"github.com/umijs/umi-plugin-qiankun","commit":"7c6e4cd96233b321e8dfd87f05a98f2adbd06a66"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Code-Review","score":0,"reason":"Found 2/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":-1,"reason":"internal error: error during branchesHandler.setup: internal error: githubv4.Query: Resource not accessible by integration","details":null,"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 6 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-24T18:18:27.669Z","repository_id":34828364,"created_at":"2025-08-24T18:18:27.669Z","updated_at":"2025-08-24T18:18:27.669Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278722757,"owners_count":26034463,"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-07T02:00:06.786Z","response_time":59,"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":["micro-frontends","qiankun","umi-plugin"],"created_at":"2025-10-07T05:15:37.537Z","updated_at":"2025-10-07T05:15:54.228Z","avatar_url":"https://github.com/umijs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Umi@2 plugin for [qiankun@v1](https://github.com/umijs/qiankun/tree/1.x).\n\n# Umi@3 相应的 qiankun 插件请移步[这里](https://github.com/umijs/plugins/tree/master/packages/plugin-qiankun)\n\n[![NPM version](https://img.shields.io/npm/v/@umijs/plugin-qiankun/umi2.svg?style=flat)](https://npmjs.org/package/@umijs/plugin-qiankun) [![Build Status](https://img.shields.io/travis/umijs/umi-plugin-qiankun.svg?style=flat)](https://travis-ci.org/umijs/umi-plugin-qiankun) [![NPM downloads](http://img.shields.io/npm/dm/@umijs/plugin-qiankun.svg?style=flat)](https://npmjs.org/package/@umijs/plugin-qiankun)\n\n## Installation\n\n```shell\n$ npm i @umijs/plugin-qiankun@umi2 -S\n```\n\nor\n\n```shell\n$ yarn add @umijs/plugin-qiankun@umi2\n```\n\n## Examples\n\n导航是主应用，App1 和 App2 是子应用，\n\n![](readme/demo.gif)\n\n```bash\n$ yarn\n$ yarn build\n$ yarn start\n```\n\n## Features\n\n- ✔︎ 基于 qiankun\n- ✔︎ 支持主应用和子应用都用 umi\n- ✔︎ 支持主子应用 browser、hash 等多种 history 模式\n- ✔︎ 父子应用通讯\n- ✔︎ 子应用运行时配置自定义 `bootstrap()`、`mount()` 和 `unmount()`\n- ✔︎ 主应用、子应用联调\n\n## Usage\n\n### 主应用\n\n#### 第一步：配置插件\n\n```js\nexport default {\n  plugins: [\n    [\n      '@umijs/plugin-qiankun',\n      {\n        master: { ...masterOptions },\n      },\n    ],\n  ],\n};\n```\n\n[masterOptions 配置列表](#masterOptions)\n\n#### 第二步：配置子应用\n\n子应用的配置方式（二选一）：\n\n##### 构建期配置子应用\n\n```js\nexport default {\n  plugins: [\n    [\n      '@umijs/plugin-qiankun',\n      {\n        master: {\n          // 注册子应用信息\n          apps: [\n            {\n              name: 'app1', // 唯一 id\n              entry: '//localhost:7001', // html entry\n              base: '/app1', // app1 的路由前缀，通过这个前缀判断是否要启动该应用，通常跟子应用的 base 保持一致\n              history: 'browser', // 子应用的 history 配置，默认为当前主应用 history 配置\n            },\n            {\n              name: 'app2',\n              entry: {\n                // TODO 支持 config entry\n                scripts: [],\n                styles: [],\n              },\n              base: '/app2',\n            },\n          ],\n          jsSandbox: true, // 是否启用 js 沙箱，默认为 false\n          prefetch: true, // 是否启用 prefetch 特性，默认为 true\n        },\n      },\n    ],\n  ],\n};\n```\n\n_注意: 当主应用跟子应用的 history 模式一致时（比如都是 browser 或 hash），插件会自动创建一些空路由来避免 404，所以建议主应用跟子应用使用相同的 history mode，否则需要自己处理这些情况。_\n\n##### 运行时动态配置子应用（src/app.js 里开启）\n\n```js\n// 从接口中获取子应用配置，export 出的 qiankun 变量是一个 promise\nexport const qiankun = fetch('/config').then(({ apps }}) =\u003e ({\n  // 注册子应用信息\n  apps,\n  jsSandbox: true, // 是否启用 js 沙箱，默认为 false\n  prefetch: true, // 是否启用 prefetch 特性，默认为 true\n  lifeCycles: {\n    // see https://github.com/umijs/qiankun#registermicroapps\n    afterMount: props =\u003e {\n      console.log(props);\n    },\n  },\n  // ...even more options qiankun start() supported, see https://github.com/umijs/qiankun#start\n}));\n```\n\n由于 umi 不支持在应用 render 之后修改路由，故运行时配置方式插件无法自动生成子应用相关路由，（见[代码](https://github.com/umijs/umi-plugin-qiankun/blob/2f51ccd43493a4ad2a9c9fb1f724a0bf63d73235/src/master/index.ts#L55)）。所以这里需要用户手动添加子应用相关路由配置避免 404 情况：\n\n###### 1. 主应用新建 pages/subAppContainer.js\n\n```js\nimport React from 'react';\n\nexport default function() {\n  return \u003cdiv /\u003e;\n}\n```\n\n###### 2. 新建 pages/subAppContainer.js\n\n```js\n// 主应用 config.js 中添加子应用相关路由配置\nexport default {\n  routes: [\n    { path: '/app1', exact: false, component: 'subAppContainer' },\n    { path: '/app2', exact: false, component: 'subAppContainer' },\n  ],\n};\n```\n\n### 子应用\n\n安装 `@umijs/plugin-qiankun` ，并在 `.umirc.js/config` 的 plugin 中配置 `@umijs/plugin-qiankun`\n\n#### 第一步：构建层配置\n\n`@umijs/plugin-qiankun` 子应用配置方式有以下两种(选取一种配置即可)： [slaveOptions 配置列表](#slaveOptions)\n\n- 子应用配置\n\n```js\nexport default {\n  base: `/${appName}`, // 子应用的 base，默认为 package.json 中的 name 字段\n  plugins: ['@umijs/plugin-qiankun', { slave: { ...slaveOptions } }],\n};\n```\n\n- 如果子应用配置项为空，即 slave: {}，则可以省略配置：\n\n```js\nexport default {\n  base: `/${appName}`, // 子应用的 base，默认为 package.json 中的 name 字段\n  plugins: ['@umijs/plugin-qiankun'],\n};\n```\n\n#### 第二步：运行时配置（可选）\n\n在子应用的 `src/app.js` 里输出 `qiankun`，`props` 由主应用注册子应用时提供\n\n```js\nexport const qiankun = {\n  // 应用加载之前\n  async bootstrap(props) {\n    console.log('app1 bootstrap', props);\n  },\n  // 应用 render 之前触发\n  async mount(props) {\n    console.log('app1 mount', props);\n  },\n  // 应用卸载之后触发\n  async unmount(props) {\n    console.log('app1 unmount', props);\n  },\n};\n```\n\n#### 环境变量配置\n\n为了获得更好地本地开发及调试体验，我们建议您提前在子应用中指定应用启动的具体端口号，如通过`.env`指定\n\n```yml\nPORT=8081\n```\n\n详细配置参考：https://umijs.org/zh/guide/env-variables.html#port\n\n## 父子应用通讯\n\n有两种方式可以实现\n\n### 基于 props 传递\n\n类似 react 中组件间通信的方案\n\n1. 主应用中配置 apps 时以 props 将数据传递下去（参考主应用运行时配置一节）\n\n   ```js\n   // src/app.js\n\n   export const qiankun = fetch('/config').then(config =\u003e {\n     return {\n       apps: [\n         {\n           name: 'app1',\n           entry: '//localhost:2222',\n           base: '/app1',\n           props: {\n             onClick: event =\u003e console.log(event),\n             ...config,\n           },\n         },\n       ],\n     };\n   });\n   ```\n\n2. 子应用在生命周期钩子中获取 props 消费数据（参考子应用运行时配置一节）\n\n### 基于 Hooks 共享数据\n\n由于方案基于 react hook，所以只能在 functional component 中使用相关 api，无法在 class component 中使用。\n\n1. 约定父应用中在 `src/rootExports.js` 里 export 内容。参考 [rootExports](https://github.com/umijs/umi-plugin-qiankun/blob/master/examples/master/rootExports.js)\n2. 子应用中通过 `import { useRootExports } from 'umi'; const rootExports = useRootExports();` 取到。参考 [useRootExports](https://github.com/umijs/umi-plugin-qiankun/blob/master/examples/app1/pages/index.js#L1)\n\n## API\n\n### \u003ca name=\"masterOptions\"\u003eMasterOptions\u003c/a\u003e\n\n[qiankun start](https://github.com/umijs/qiankun/blob/master/src/interfaces.ts#L31) 方法其他可接收的参数在这里也都可以配置\n\n| 配置 | 说明 | 类型 | 是否必填 | 默认值 |\n| --- | --- | --- | --- | --- |\n| apps | 子应用配置, 具体项见下表 | [App](#app)[] | 是 |  |\n| jsSandbox | 是否启用 js 沙箱 | boolean | 否 | false |\n| prefetch | 是否启用 prefetch 特性 | boolean | 否 | true |\n| defer | 是否异步渲染，比如子应用的渲染容器依赖主应用生成的节点，而主应用生成该节点的过程是异步的。\u003cbr /\u003e当该配置开启的时候，需要使用 `import { qiankunStart } from 'umi'` api 通知 qiankun 启动。参考 [example](https://github.com/umijs/umi-plugin-qiankun/blob/master/examples/master/models/base.js#L35) | boolean | 否 | false |\n| fetch | 用于拦截 htmlEntry 静态资源 fetch 时的请求 | function | 否 | fetch |\n\n#### \u003ca name=\"app\"\u003eApp\u003c/a\u003e\n\n| 配置 | 说明 | 类型 | 是否必填 | 默认值 |\n| --- | --- | --- | --- | --- |\n| name | 子应用唯一 id | string | 是 |  |\n| entry | 子应用 html 地址 | string \\| { script: string[], styles: [] } | 是 |  |\n| base | 子应用路由前缀，通常跟子应用的 [base 配置](https://umijs.org/config/#base) 一致，框架会以这个配置作为前缀判断是否激活当前应用，支持配置一组前缀 | string \\| string[] | 是 |  |\n| history | [umi history mode](https://umijs.org/config/#history) | string | 否 | 主应用 history 配置 |\n| mountElementId | 子应用挂载到主应用的哪个 id 节点上（注意不要跟子应用的 mountElementId 一致） | string | 否 | root-subapp |\n| props | 主应用传递给子应用的数据 | object | 否 | {} |\n\n### \u003ca name=\"slaveOptions\"\u003eSlaveOptions\u003c/a\u003e\n\n| 配置 | 说明 | 类型 | 是否必填 | 默认值 |\n| --- | --- | --- | --- | --- |\n| keepOriginalRoutes | 子应用通过设置此配置，在编译时会按照 keepOriginalRoutes 的值添加一份 route 的快照(如果值为 true 将默认取 packageName)，并将快照路由前缀改为/\\${keepOriginalRoutes}添加到 routes | boolean \\| string | 否 | false |\n\n## Roadmap\n\n- [x] 支持 browserHistory\n- [x] master 运行时配置\n- [ ] 子应用嵌套\n- [ ] 公共依赖加载策略\n- [x] 子应用单独调试\n- [x] 基于 Hooks 的父子应用通讯（需强制 external React 保证一个 React 实例）\n\n## Questions \u0026 Suggestions\n\nPlease open an issue [here](https://github.com/umijs/umi/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc).\n\n## Community\n\nhttps://github.com/umijs/umi#community\n\n## 相关\n\n- [RFC: 微前端（@umijs/plugin-qiankun） by sorrycc · Pull Request #3 · umijs/rfcs · GitHub](https://github.com/umijs/rfcs/pull/3)\n\n- [umi-example-monorepo](https://github.com/umijs/umi-example-monorepo) 之前尝试的另一种简单粗糙的微前端试验\n\n## LICENSE\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumijs%2Fumi-plugin-qiankun","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fumijs%2Fumi-plugin-qiankun","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fumijs%2Fumi-plugin-qiankun/lists"}