1.創建一個主項目，相當于是基座，在主項目里面通過hashchange或者popstate監聽路由的變化，切換路由時，進行子項目activeRule的匹配，然后獲取到對應的子項目的entry入口 ```js const app = apps.find(item => { return window.location.pathname.startsWith(item.activeRule) }) // 3.加載子應用 const html = await fetch(app.entry).then(res => res.text()) ``` 2.通過entry入口，獲取子應用的html，通過innerHTML放到基座的container容器中，這里的獲取方式是通過fetch請求方法 ```js const html = await fetch(app.entry).then(res => res.text()) const container = document.querySelector(app.container) container.innerHTML = html ``` 3.獲取script標簽，核心代碼 1.獲取template中所有的script標簽，如果script標簽存在src屬性，說明請求的是一個js，那么把這個地址存到promise.all里面，如果沒有src屬性，說明是一段立即執行的script代碼，那么拿到script標簽innerHTML里的內容 2. 由于將src的請求執行時是通過fetch方式，所以如果是jsonp跨域請求，會獲取不到 ```js // 獲取所有的 script 節點 const scripts = template.querySelectorAll('script') // 獲取所有的 script 標簽 function getExternalScripts() { console.log(Array.from(scripts), 1111) const scriptsArr = Array.from(scripts).map(script => { const src = script.getAttribute('src') if (!src) { return Promise.resolve(script.innerHTML) } else { let srcUrl = src.startsWith('http') ? src : `${url}/${src}` return fetchResource(srcUrl) } }) return Promise.all(scriptsArr) } ``` 4.提供全局變量，子應用可以根據這個來選擇是獨立渲染，還是掛載到基座上 ```js // 配置全局環境變量 window.__POWERED_BY_QIANKUN__ = true ``` 5.子應用里打包導出的格式要設置成umd格式，目的是為了兼容不同的模塊規范，打包的結果是一個立即執行函數，會執行子應用的代碼，將結果返回到window上（umd規范會判斷兼容哪一種） ```js // node commonJs模塊規范 if (typeof exports === 'object' && typeof module === 'object') { module.exports = factory() } // amd 模塊規范 else if (typeof define === 'funciton' && define.amd) define([], factory) // commonjs es6的 import 規范 else if (typeof exports === 'object') // 如果都不是就是在window上 else ``` 6.手動構造了一個commonJS環境 ```js // 手動構造一個commonJs模塊環境 const module = { exports: {} } const exports = module.exports scripts.forEach(code => { // eval上的代碼可以訪問外部變量 eval(code) }) console.log(module.exports) // 拿到了子應用內部的導出 ```