手把手教你写一个简易的微前端框架

// 当 location.pathname 以 /vue 为前缀时切换到 vue 子应用https://www.example.com/vue/xxx// 当 location.pathname 以 /react 为前缀时切换到 react 子应用https://www.example.com/react/xxx

// 执行下面代码后，浏览器的 URL 将从 https://www.xxx.com 变为 https://www.xxx.com/vuewindow.history.pushState(null, '', '/vue')

import { loadApps } from '../application/apps'
const originalPushState = window.history.pushStateconst originalReplaceState = window.history.replaceState
export default function overwriteEventsAndHistory() {    window.history.pushState = function (state: any, title: string, url: string) {        const result = originalPushState.call(this, state, title, url)        // 根据当前 url 加载或卸载 app        loadApps()        return result    }
    window.history.replaceState = function (state: any, title: string, url: string) {        const result = originalReplaceState.call(this, state, title, url)        loadApps()        return result    }
    window.addEventListener('popstate', () => {        loadApps()    }, true)
    window.addEventListener('hashchange', () => {        loadApps()    }, true)}

export async function loadApps() {    // 先卸载所有失活的子应用    const toUnMountApp = getAppsWithStatus(AppStatus.MOUNTED)    await Promise.all(toUnMountApp.map(unMountApp))
    // 初始化所有刚注册的子应用    const toLoadApp = getAppsWithStatus(AppStatus.BEFORE_BOOTSTRAP)    await Promise.all(toLoadApp.map(bootstrapApp))
    const toMountApp = [        ...getAppsWithStatus(AppStatus.BOOTSTRAPPED),        ...getAppsWithStatus(AppStatus.UNMOUNTED),    ]    // 加载所有符合条件的子应用    await toMountApp.map(mountApp)}

registerApplication({    name: 'vue',    // 初始化子应用时执行该方法    loadApp() {         return {            mount() {                                // 这里进行挂载子应用的操作                app.mount('#app')            },            unmount() {                // 这里进行卸载子应用的操作                 app.unmount()            },        }    },    // 如果传入一个字符串会被转为一个参数为 location 的函数    // activeRule: '/vue' 会被转为 (location) => location.pathname === '/vue'    activeRule: (location) => location.hash === '#/vue'})

interface Application {    // 子应用名称    name: string
    /**     * 激活规则，例如传入 /vue，当 url 的路径变为 /vue 时，激活当前子应用。     * 如果 activeRule 为函数，则会传入 location 作为参数，activeRule(location) 返回 true 时，激活当前子应用。     */    activeRule: Function | string
    // 传给子应用的自定义参数    props: AnyObject
    /**     * loadApp() 必须返回一个 Promise，resolve() 后得到一个对象：     * {     *   bootstrap: () => Promise<any>     *   mount: (props: AnyObject) => Promise<any>     *   unmount: (props: AnyObject) => Promise<any>     * }     */    loadApp: () => Promise<any>}

let vueAppregisterApplication({    name: 'vue',    loadApp() {        return Promise.resolve({            bootstrap() {                console.log('vue bootstrap')            },            mount() {                console.log('vue mount')                vueApp = Vue.createApp({                    data() {                        return {                            text: 'Vue App'                        }                    },                    render() {                        return Vue.h(                            'div',     // 标签名称                            this.text  // 标签内容                        )                    },                })
                vueApp.mount('#app')            },            unmount() {                console.log('vue unmount')                vueApp.unmount()            },        })    },    activeRule:(location) => location.hash === '#/vue',})
registerApplication({    name: 'react',    loadApp() {         return Promise.resolve({            bootstrap() {                console.log('react bootstrap')            },            mount() {                console.log('react mount')                ReactDOM.render(                    React.createElement(LikeButton),                    $('#app')                );            },            unmount() {                console.log('react unmount')                ReactDOM.unmountComponentAtNode($('#app'));            },        })    },    activeRule: (location) => location.hash === '#/react'})
start()

registerApplication({    name: 'vue',    loadApp() {         return Promise.resolve({            bootstrap() {                import('http://localhost:8001/js/chunk-vendors.js')                import('http://localhost:8001/js/app.js')            },            mount() {                // ...                        },            unmount() {                // ...                        },        })    },    activeRule: (location) => location.hash === '#/vue'})

registerApplication({    // 子应用入口 URL    pageEntry: 'http://localhost:8081'    // ...})

export default function parseHTMLandLoadSources(app: Application) {    return new Promise<void>(async (resolve, reject) => {        const pageEntry = app.pageEntry            // load html                const html = await loadSourceText(pageEntry)        const domparser = new DOMParser()        const doc = domparser.parseFromString(html, 'text/html')        const { scripts, styles } = extractScriptsAndStyles(doc as unknown as Element, app)
        // 提取了 script style 后剩下的 body 部分的 html 内容        app.pageBody = doc.body.innerHTML
        let isStylesDone = false, isScriptsDone = false        // 加载 style script 的内容        Promise.all(loadStyles(styles))        .then(data => {            isStylesDone = true            // 将 style 样式添加到 document.head 标签            addStyles(data as string[])            if (isScriptsDone && isStylesDone) resolve()        })        .catch(err => reject(err))
        Promise.all(loadScripts(scripts))        .then(data => {            isScriptsDone = true            // 执行 script 内容            executeScripts(data as string[])            if (isScriptsDone && isStylesDone) resolve()        })        .catch(err => reject(err))    })}

export function loadSourceText(url: string) {    return new Promise<string>((resolve, reject) => {        const xhr = new XMLHttpRequest()        xhr.onload = (res: any) => {            resolve(res.target.response)        }
        xhr.onerror = reject        xhr.onabort = reject        xhr.open('get', url)        xhr.send()    })}

const domparser = new DOMParser()const doc = domparser.parseFromString(html, 'text/html')

export function addStyles(styles: string[] | HTMLStyleElement[]) {    styles.forEach(item => {        if (typeof item === 'string') {            const node = createElement('style', {                type: 'text/css',                textContent: item,            })
            head.appendChild(node)        } else {            head.appendChild(item)        }    })}

export function executeScripts(scripts: string[]) {    try {        scripts.forEach(code => {            new Function('window', code).call(window, window)        })    } catch (error) {        throw error    }}

// 保存 HTML 代码app.pageBody = doc.body.innerHTML
// 加载子应用前赋值给挂载的 DOMapp.container.innerHTML = app.pageBodyapp.mount()

// 每个子应用都需要这样暴露三个 API，该属性格式为 `mini-single-spa-${appName}`window['mini-single-spa-vue'] = {    bootstrap,    mount,    unmount}

module.exports = {    devServer: {        port: 8001, // 子应用访问端口        headers: {            'Access-Control-Allow-Origin': '*'        }    },    publicPath: "//localhost:8001/",}

registerApplication({    name: 'vue',    pageEntry: 'http://localhost:8001',    activeRule: pathPrefix('/vue'),    container: $('#subapp-viewport')})
registerApplication({    name: 'react',    pageEntry: 'http://localhost:8002',    activeRule:pathPrefix('/react'),    container: $('#subapp-viewport')})
start()

// 先加载 a 子应用window.name = 'a'// 后加载 b 子应用window.name = 'b'// 这时再切换回 a 子应用，读取 window.name 得到的值却是 bconsole.log(window.name) // b

app.window = new Proxy({}, {    get(target, key) {        if (Reflect.has(target, key)) {            return Reflect.get(target, key)        }
        const result = originalWindow[key]        // window 原生方法的 this 指向必须绑在 window 上运行，否则会报错 "TypeError: Illegal invocation"        // e.g: const obj = {}; obj.alert = alert;  obj.alert();        return (isFunction(result) && needToBindOriginalWindow(result)) ? result.bind(window) : result    },
    set: (target, key, value) => {        this.injectKeySet.add(key)        return Reflect.set(target, key, value)    }})

export function executeScripts(scripts: string[], app: Application) {    try {        scripts.forEach(code => {                        // ts 使用 with 会报错，所以需要这样包一下            // 将子应用的 js 代码全局 window 环境指向代理环境 proxyWindow            const warpCode = `                ;(function(proxyWindow){                    with (proxyWindow) {                        (function(window){${code}\n}).call(proxyWindow, proxyWindow)                    }                })(this);            `
            new Function(warpCode).call(app.sandbox.proxyWindow)        })    } catch (error) {        throw error    }}

for (const key of injectKeySet) {    Reflect.deleteProperty(microAppWindow, key as (string | symbol))}

// 部分关键代码microAppWindow.setTimeout = function setTimeout(callback: Function, timeout?: number | undefined, ...args: any[]): number {    const timer = originalWindow.setTimeout(callback, timeout, ...args)    timeoutSet.add(timer)    return timer}
microAppWindow.clearTimeout = function clearTimeout(timer?: number): void {    if (timer === undefined) return    originalWindow.clearTimeout(timer)    timeoutSet.delete(timer)}microAppWindow.addEventListener = function addEventListener(    type: string,     listener: EventListenerOrEventListenerObject,     options?: boolean | AddEventListenerOptions | undefined,) {    if (!windowEventMap.get(type)) {        windowEventMap.set(type, [])    }
    windowEventMap.get(type)?.push({ listener, options })    return originalWindowAddEventListener.call(originalWindow, type, listener, options)}
microAppWindow.removeEventListener = function removeEventListener(    type: string,     listener: EventListenerOrEventListenerObject,     options?: boolean | AddEventListenerOptions | undefined,) {    const arr = windowEventMap.get(type) || []    for (let i = 0, len = arr.length; i < len; i++) {        if (arr[i].listener === listener) {            arr.splice(i, 1)            break        }    }
    return originalWindowRemoveEventListener.call(originalWindow, type, listener, options)}

for (const timer of timeoutSet) {    originalWindow.clearTimeout(timer)}
for (const [type, arr] of windowEventMap) {    for (const item of arr) {        originalWindowRemoveEventListener.call(originalWindow, type as string, item.listener, item.options)    }}

window.name = 'test'
function bootstrap() { // ... }function mount() { // ... }function unmount() { // ... }

const { windowSnapshot, microAppWindow } = thisconst recordAttrs = windowSnapshot.get('attrs')!const recordWindowEvents = windowSnapshot.get('windowEvents')!
// 缓存 window 属性this.injectKeySet.forEach(key => {    recordAttrs.set(key, deepCopy(microAppWindow[key]))})
// 缓存 window 事件this.windowEventMap.forEach((arr, type) => {    recordWindowEvents.set(type, deepCopy(arr))})

const {     windowSnapshot,     injectKeySet,     microAppWindow,     windowEventMap,     onWindowEventMap,} = thisconst recordAttrs = windowSnapshot.get('attrs')!const recordWindowEvents = windowSnapshot.get('windowEvents')!
recordAttrs.forEach((value, key) => {    injectKeySet.add(key)    microAppWindow[key] = deepCopy(value)})
recordWindowEvents.forEach((arr, type) => {    windowEventMap.set(type, deepCopy(arr))    for (const item of arr) {        originalWindowAddEventListener.call(originalWindow, type as string, item.listener, item.options)    }})

// 将所有查询 dom 的范围限制在子应用挂载的 dom 容器上Document.prototype.querySelector = function querySelector(this: Document, selector: string) {    const app = getCurrentApp()    if (!app || !selector || isUniqueElement(selector)) {        return originalQuerySelector.call(this, selector)    }    // 将查询范围限定在子应用挂载容器的 DOM 下    return app.container.querySelector(selector)}
Document.prototype.getElementById = function getElementById(id: string) {    // ...}

Document.prototype.querySelector = originalQuerySelectorDocument.prototype.querySelectorAll = originalQuerySelectorAll// ...

body {    color: red;}

/* body 被替换为子应用挂载 DOM 的 id 选择符 */#app {    color: red;}

const re = /^(\s|,)?(body|html)\b/g// 将 body html 标签替换为子应用挂载容器的 idcssText.replace(re, `#${app.container.id}`)

Document.prototype.createElement = function createElement(    tagName: string,    options?: ElementCreationOptions,): HTMLElement {    const appName = getCurrentAppName()    const element = originalCreateElement.call(this, tagName, options)    appName && element.setAttribute('single-spa-name', appName)    return element}

export function removeStyles(name: string) {    const styles = document.querySelectorAll(`style[single-spa-name=${name}]`)    styles.forEach(style => {        removeNode(style)    })
    return styles as unknown as HTMLStyleElement[]}

div {    color: red;}

div[single-spa-name=vue] {    color: red;}

/** * 给每一条 css 选择符添加对应的子应用作用域 * 1. a {} -> a[single-spa-name=${app.name}] {} * 2. a b c {} -> a[single-spa-name=${app.name}] b c {} * 3. a, b {} -> a[single-spa-name=${app.name}], b[single-spa-name=${app.name}] {} * 4. body {} -> #${子应用挂载容器的 id}[single-spa-name=${app.name}] {} * 5. @media @supports 特殊处理，其他规则直接返回 cssText */

function handleCSSRules(cssRules: CSSRuleList, app: Application) {    let result = ''    Array.from(cssRules).forEach(cssRule => {        const cssText = cssRule.cssText        const selectorText = (cssRule as CSSStyleRule).selectorText        result += cssRule.cssText.replace(            selectorText,             getNewSelectorText(selectorText, app),        )    })
    return result}
let count = 0const re = /^(\s|,)?(body|html)\b/gfunction getNewSelectorText(selectorText: string, app: Application) {    const arr = selectorText.split(',').map(text => {        const items = text.trim().split(' ')        items[0] = `${items[0]}[single-spa-name=${app.name}]`        return items.join(' ')    })
    // 如果子应用挂载的容器没有 id，则随机生成一个 id    let id = app.container.id    if (!id) {        id = 'single-spa-id-' + count++        app.container.id = id    }
    // 将 body html 标签替换为子应用挂载容器的 id    return arr.join(',').replace(re, `#${id}`)}

export default class GlobalState extends EventBus {    private state: AnyObject = {}    private stateChangeCallbacksMap: Map<string, Array<Callback>> = new Map()
    set(key: string, value: any) {        this.state[key] = value        this.emitChange('set', key)    }
    get(key: string) {        return this.state[key]    }
    onChange(callback: Callback) {        const appName = getCurrentAppName()        if (!appName) return
        const { stateChangeCallbacksMap } = this        if (!stateChangeCallbacksMap.get(appName)) {            stateChangeCallbacksMap.set(appName, [])        }
        stateChangeCallbacksMap.get(appName)?.push(callback)    }
    emitChange(operator: string, key?: string) {        this.stateChangeCallbacksMap.forEach((callbacks, appName) => {            /**             * 如果是点击其他子应用或父应用触发全局数据变更，则当前打开的子应用获取到的 app 为 null             * 所以需要改成用 activeRule 来判断当前子应用是否运行             */            const app = getApp(appName) as Application            if (!(isActive(app) && app.status === AppStatus.MOUNTED)) return            callbacks.forEach(callback => callback(this.state, operator, key))        })    }}

export default class EventBus {    private eventsMap: Map<string, Record<string, Array<Callback>>> = new Map()
    on(event: string, callback: Callback) {        if (!isFunction(callback)) {            throw Error(`The second param ${typeof callback} is not a function`)        }
        const appName = getCurrentAppName() || 'parent'
        const { eventsMap } = this        if (!eventsMap.get(appName)) {            eventsMap.set(appName, {})        }
        const events = eventsMap.get(appName)!        if (!events[event]) {            events[event] = []         }
        events[event].push(callback)    }
    emit(event: string, ...args: any) {        this.eventsMap.forEach((events, appName) => {            /**             * 如果是点击其他子应用或父应用触发全局数据变更，则当前打开的子应用获取到的 app 为 null             * 所以需要改成用 activeRule 来判断当前子应用是否运行             */            const app = getApp(appName) as Application            if (appName === 'parent' || (isActive(app) && app.status === AppStatus.MOUNTED)) {                if (events[event]?.length) {                    for (const callback of events[event]) {                        callback.call(this, ...args)                    }                }            }        })    }}

// 父应用window.spaGlobalState.set('msg', '父应用在 spa 全局状态上新增了一个 msg 属性')// 子应用window.spaGlobalState.onChange((state, operator, key) => {    alert(`vue 子应用监听到 spa 全局状态发生了变化: ${JSON.stringify(state)}，操作: ${operator}，变化的属性: ${key}`)})

// 父应用window.spaGlobalState.emit('testEvent', '父应用发送了一个全局事件: testEvent')// 子应用window.spaGlobalState.on('testEvent', () => alert('vue 子应用监听到父应用发送了一个全局事件: testEvent'))