{"_id":"@c0nanxie/vite-plugin-qiankun","name":"@c0nanxie/vite-plugin-qiankun","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.16":{"name":"@c0nanxie/vite-plugin-qiankun","version":"1.0.16","description":"vite for qiankun","module":"es/index.js","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c scripts/rollup.config.js","example:install":"cd example/main && npm install && cd ../viteapp && npm install && cd ../vue && npm install && cd ../react18 && npm install && cd ../vue3sub && npm install","example:start":"npm run build && cd example/viteapp && npm run build && cd ../../ && npm-run-all --parallel start:main start:viteapp start:vue start:react18dev start:vue3sub","example:start-vite-dev":"npm run build && npm-run-all --parallel start:main start:vitedev start:vue start:react18dev start:vue3sub","start:main":"cd example/main && npm run start","start:viteapp":"cd example/viteapp && npm run start","start:vitedev":"cd example/viteapp && npm run dev","start:react18dev":"cd example/react18 && npm run dev","start:vue3sub":"cd example/vue3sub && npm run dev","start:vue":"cd example/vue && npm run start","vite:test":"npm run build && cd example/viteapp && npm run dev"},"keywords":["qiankun","vite","esm","esModule"],"homepage":"https://github.com/tengmaoqing/vite-plugin-qiankun","author":{"name":"markteng"},"license":"MIT","dependencies":{"cheerio":"^1.0.0-rc.10"},"devDependencies":{"@rollup/plugin-json":"^6.0.0","@types/jsdom":"^16.2.10","@typescript-eslint/eslint-plugin":"^4.29.1","@typescript-eslint/parser":"^4.29.1","eslint":"^7.32.0","eslint-config-standard":"^16.0.3","eslint-plugin-import":"^2.24.0","eslint-plugin-node":"^11.1.0","eslint-plugin-promise":"^5.1.0","npm-run-all":"^4.1.5","rollup":"^2.73.0","rollup-plugin-typescript2":"^0.30.0","typescript":"^4.6.4","vite":"^2.9.9"},"peerDependencies":{"typescript":">=4","vite":">=2"},"gitHead":"87b1e5e4d34ca3b85cfb12d49572a3f474ff9ce3","_id":"@c0nanxie/vite-plugin-qiankun@1.0.16","_nodeVersion":"18.14.2","_npmVersion":"9.5.0","dist":{"integrity":"sha512-XULrHSs+9j7k3HxVg+roqmyy6wAYWWcRwWkFcCk1VwarlYx08/sPoPb3M2lm3j/Qown6O88Qi9AHwwUulV2Tng==","shasum":"bd92f14c30709a0db53de5b30541ec5f078134ac","tarball":"https://registry.npmjs.org/@c0nanxie/vite-plugin-qiankun/-/vite-plugin-qiankun-1.0.16.tgz","fileCount":15,"unpackedSize":29575,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVD8OwGhoGsIOPHaYKVmHLMzBDcK8AbJeuVO0P7sX3jwIgbovKMF6CoQXy7ow9fVs/yvz2fwfkxpnLv+/Smp5ZRys="}]},"_npmUser":{"name":"conanxie","email":"xjj416@gmail.com"},"directories":{},"maintainers":[{"name":"conanxie","email":"xjj416@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vite-plugin-qiankun_1.0.16_1686557662963_0.3281970614869545"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-12T08:14:22.675Z","1.0.16":"2023-06-12T08:14:23.115Z","modified":"2023-06-12T08:14:23.481Z"},"maintainers":[{"name":"conanxie","email":"xjj416@gmail.com"}],"description":"vite for qiankun","homepage":"https://github.com/tengmaoqing/vite-plugin-qiankun","keywords":["qiankun","vite","esm","esModule"],"author":{"name":"markteng"},"license":"MIT","readme":"#### 简介\n\n> vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件\n\n- 保留vite构建es模块的优势\n- 一键配置，不影响已有的vite配置\n- 支持vite开发环境\n\n#### 快速开始\n\n###### 1、在 `vite.config.ts` 中安装插件\n```typescript\n// vite.config.ts\n\nimport qiankun from 'vite-plugin-qiankun';\n\nexport default {\n  // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致\n  plugins: [qiankun('myMicroAppName')],\n  // 生产环境需要指定运行域名作为base\n  base: 'http://xxx.com/'\n}\n```\n###### 2、在入口文件里面写入乾坤的生命周期配置\n\n```typescript\n// main.ts\nimport { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';\n\n// some code\nrenderWithQiankun({\n  mount(props) {\n    console.log('mount');\n    render(props);\n  },\n  bootstrap() {\n    console.log('bootstrap');\n  },\n  unmount(props: any) {\n    console.log('unmount');\n    const { container } = props;\n    const mountRoot = container?.querySelector('#root');\n    ReactDOM.unmountComponentAtNode(\n      mountRoot || document.querySelector('#root'),\n    );\n  },\n});\n\nif (!qiankunWindow.__POWERED_BY_QIANKUN__) {\n  render({});\n}\n```\n\n###### 3、dev下作为子应用调试\n\n> 因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置\n\n```typescript\n// useDevMode 开启时与热更新插件冲突,使用变量切换\nconst useDevMode = true\n\nconst baseConfig: UserConfig = {\n  plugins: [\n    ...(\n      useDevMode ? [] : [\n        reactRefresh()\n      ]\n    ),\n    qiankun('viteapp', {\n      useDevMode\n    })\n  ],\n}\n```\n上面例子中 `useDevMode = true` 则不使用热更新插件，`useDevMode = false` 则能使用热更新，但无法作为子应用加载。\n\n###### 4、其它使用注意点 `qiankunWindow`\n\n因为es模块加载与`qiankun`的实现方式有些冲突，所以使用本插件实现的`qiankun`微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式\n```typescript\nimport { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';\n\nqiankunWindow.customxxx = 'ssss'\n\nif (qiankunWindow.__POWERED_BY_QIANKUN__) {\n  console.log('我正在作为子应用运行')\n}\n\n```\n\n#### 例子\n\n详细的信息可以参考例子里面的使用方式\n ```\ngit clone xx\nnpm install\nnpm run example:install\n# 生产环境调试demo\nnpm run example:start\n# vite开发环境demo, demo中热更新已经关闭\nnpm run example:start-vite-dev\n```\n\n\n","readmeFilename":"readme.md"}