子项目配置

1. 确保本地开发时能访问子项目服务

devServer: {
		compress: true,
		injectClient: false,
		disableHostCheck: true,
		clientLogLevel: 'warning',
		headers: {
			'Access-Control-Allow-Origin': '*',
		},
		historyApiFallback: true,
		overlay: { warnings: false, errors: true },
	}

2. 打包输出 umd 模块，挂载至 window[${name}-[filename]]下（name 为 package.json 中的 name 字段）

output: {
  libraryTarget: 'umd',
  globalObject: 'window',
  library: `${name}-[name]`,
}

注意事项

1. 确保正确导出bootstrap mount unmount钩子
2. 子项目最好统一使用 hash 路由

example

const render = ({ container }) =>
	ReactDOM.render(
		<HashRouter>
			<Layout menus={routes}>
				<App routes={routes} />
			</Layout>
		</HashRouter>,
		getContainer(container),
	)

module.hot && module.hot.accept()

if (!window.__POWERED_BY_QIANKUN__) render({})

export async function bootstrap() {
	console.log(`[${name}] bootstraped`)
}

export async function mount(props) {
	console.log(`[${name}] mount, props: `, props)
	render(props)
}

export async function unmount({ container }) {
	ReactDOM.unmountComponentAtNode(getContainer(container))
}