2022年你必须要会的微前端 -（源码篇）

一.初始化开发环境

初始化配置安装rollup

npm init -y
npm install rollup rollup-plugin-serve 

import serve from 'rollup-plugin-serve'
export default {input:'./src/single-spa.js',output:{file:'./lib/umd/single-spa.js',format:"umd",name:'singleSpa',sourcemap:true},plugins:[serve({openPage:'/index.html',contentBase:'',port:3000})]
} 

这里我们一切从简，只借助rollup模块化和打包的能力~，不进行过多的rollup配置， 把精力放到编写微前端的核心逻辑上~~~

二.SignleSpa的使用方式

singleSpa.registerApplication('app1',async () => {return {bootstrap:async()=>{console.log('应用启动');},mount:async()=>{console.log('应用挂载');},unmount:async()=>{console.log('应用卸载')}}},location => location.hash.startsWith('#/app1'), { store: { name: 'me' } }
);
singleSpa.start(); 

• 参数分别是:
• appName: 当前注册应用的名字
• loadApp: 加载函数(必须返回的是promise)，返回的结果必须包含bootstrap、mount和 unmount做为接入协议
• activityWhen: 满足条件时调用loadApp方法
• customProps:自定义属性可用于父子应用通信

根据使用方式编写源码

const apps = [];
export function registerApplication(appName,loadApp,activeWhen,customProps){apps.push({name:appName,loadApp,activeWhen,customProps,});
}
export function start(){// todo...
}
export {registerApplication} from './applications/app.js';
export {start} from './start.js'; 

三.应用加载状态 - 生命周期

export const NOT_LOADED = "NOT_LOADED"; // 没有加载过
export const LOADING_SOURCE_CODE = "LOADING_SOURCE_CODE"; // 加载原代码
export const NOT_BOOTSTRAPPED = "NOT_BOOTSTRAPPED"; // 没有启动
export const BOOTSTRAPPING = "BOOTSTRAPPING"; // 启动中
export const NOT_MOUNTED = "NOT_MOUNTED"; // 没有挂载
export const MOUNTING = "MOUNTING"; // 挂载中
export const MOUNTED = "MOUNTED"; // 挂载完毕
export const UPDATING = "UPDATING"; // 更新中
export const UNMOUNTING = "UNMOUNTING"; // 卸载中
export const UNLOADING = "UNLOADING"; // 没有加载中
export const LOAD_ERROR = "LOAD_ERROR"; /