0.1.1 • Published 2 years ago
@sh-winter/vite-plugin-qiankun v0.1.1
简介
简化
vite
子应用接入qiankun
的流程
快速开始
1. 安装 vite
插件
// vite.config.ts
import qiankun from '@sh-winter/vite-plugin-qiankun'
import { name as packageName } from './package.json'
export default {
base: `/${packageName}/`
plugins: [
qiankun({ packageName })
]
}
2. 导出 qiankun
生命周期钩子
// main.ts
import { exportLifeCycleHooks, qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
// some code
function render(root: Element | Document = document) {
app = createApp(App)
app.mount(root.querySelector('#app'))
}
exportLifeCycleHooks({
bootstrap() {
// do nothing.
},
mount(props: { container: Element }) {
render(props.container);
},
unmount() {
app?.unmount();
}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
render();
}
3. 注意事项
es module
会导致qiankun
沙箱失效,如果想要访问qiankun
提供的代理window
,请使用qiankunWindow
import { qiankunWindow } from '@sh-winter/vite-plugin-qiankun/dist/helper'
如果是
vue
子应用,开发环境下需要额外引入vue-template-compiler transform
插件:transformAssetUrl
// vite.config.ts import qiankun, { transformAssetUrl } from '@sh-winter/vite-plugin-qiankun' export default { // ... plugins: [ vue({ template: { compilerOptions: { nodeTransforms: [transformAssetUrl as any] } } }), qiankun({ packageName }) ] }
查看示例
yarn example
0.1.1
2 years ago
0.1.0
2 years ago
0.0.24
2 years ago
0.0.23
2 years ago
0.0.22
2 years ago
0.0.21
2 years ago
0.0.20
2 years ago
0.0.18
2 years ago
0.0.17
2 years ago
0.0.16
2 years ago
0.0.15
2 years ago
0.0.14
2 years ago
0.0.13
2 years ago
0.0.12
2 years ago
0.0.11
2 years ago
0.0.10
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago