umi+@umijs/plugin-qiankun的应用

这段时间一直在看微前端方面的内容，调研了比较热门的框架qiankun，也看了很多大佬的帖子，文章等，根据这两天自己的Demo实践，记录下学习内容。

本文举例用的Demo是用的umi+@umijs/plugin-qiankun的组合，
项目结构是一个主应用mainSystem，两个子应用subSystemA，subSystemB。

项目都是用umi的脚手架生成的，比较简单基础 ：

yarn create umi

注意：demo用的版本如下，不同版本的umi会有一些比较大的差异，具体的可以看下umi官网

"umi": "^2.7.7",

"@umijs/plugin-qiankun": "^1.3.1"

注意： 如果是刚开始接触的话，可以把项目放到根目录下先进行配置下，这里的话我是后面为了部署时 尝试项目在非根目录下的情景来配的；xxxxx.com/h5/

主应用配置：

// mainSystem/.umirc.js

export default {
	treeShaking: true,
	routes: [
		{
			path: '/',
			component: '../layouts/index',
			routes: [{ path: '/', component: '../pages/index' }, { path: '/subSystemA' }, { path: '/subSystemB' }]
		}
	],
	// base: 'h5/mainSystem',
	// publicPath: '//xxxxx.com/',
	base: '/h5/mainSystem', // 部署时非根目录需要配置路径前缀
	publicPath: '/h5/mainSystem/',
	outputPath: '../dist/mainSystem',
	plugins: [
		// ref: https://umijs.org/plugin/umi-plugin-react.html
		[
			'umi-plugin-react',
			{
				antd: true,
				dva: true,
				dynamicImport: { webpackChunkName: true },
				title: 'mainSystem',
				dll: true,
				locale: {
					enable: true,
					default: 'en-US'
				},
				routes: {
					exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]
				}
			}
		],
		[
			'@umijs/plugin-qiankun',
			{
				master: {
					apps: [
						{
							name: 'subSystemA',
							// entry: '/h5/subSystemA',
							entry: '//localhost:8001/subSystemA',
							base: '/h5/mainSystem/subSystemA',
							path: '/mainSystem/subSystemA',
							mountElementId: 'root-slave',
							props: { loading: true }
						},
						{
							name: 'subSystemB',
							// entry: '/h5/subSystemB',
							entry: '//localhost:8002/subSystemB',
							base: '/h5/mainSystem/subSystemB',
							path: '/subSystemB',
							key: 'subSystemB',
							mountElementId: 'root-slave'
						}
					],
					jsSandbox: true,
					prefetch: true
				}
			}
		]
	]
};

子应用配置： 

// subSystemA/.umirc.js

export default {
	treeShaking: true,
	routes: [
		{
			path: '/',
			component: '../layouts/index',
			routes: [{ path: '/', component: '../pages/index' }]
		}
	],
	base: '/h5/mainSystem/subSystemA', // 部署时非根目录需要配置路径前缀
	runtimePublicPath: false,
	publicPath: '/h5/subSystemA/',
	outputPath: '../dist/subSystemA',
	mountElementId: 'subSystemA-root',
	plugins: [
		// ref: https://umijs.org/plugin/umi-plugin-react.html
		[
			'umi-plugin-react',
			{
				antd: true,
				dva: true,
				dynamicImport: { webpackChunkName: true },
				title: 'subSystemA',
				dll: false,
				locale: {
					enable: true,
					default: 'en-US'
				},
				routes: {
					exclude: [/models\//, /services\//, /model\.(t|j)sx?$/, /service\.(t|j)sx?$/, /components\//]
				}
			}
		],
		['@umijs/plugin-qiankun/slave', {}]
	]
};

内容比较简单，，应为插件都给做好了，要做的是熟悉下api进行主应用，子应用的配置，简单demo版的就这样，后续还需要实际看下研究下
demo地址：
https://github.com/gaomeng965/SelfStudy.git