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