微前端乾坤使用過程當中的坑

微前端乾坤使用過程當中的坑

乾坤在啓動子應用的時候默認開啓沙箱模式{sandbox: true}，這樣的狀況下，乾坤節點下會生成一個 shadow dom，shadow dom 內的樣式與外部樣式是沒有關聯的，這樣就會給子應用內的樣式帶來一系列問題。這其中不少問題並非乾坤形成的，而是 shadow dom 自己的特性致使的，乾坤仍是不錯的（不背鍋）。隨時補充

1.iconffont 字體在子應用沒法加載

緣由：shadow dom 是不支持@font-face 的，因此當引入 iconfont 的時候，儘管能夠引入樣式，但因爲字體文件是不存在的，因此相對應的圖標也沒法展現。相關連接：@font-face doesn't work with Shadow DOM?，Icon Fonts in Shadow DOM

方案：

1. 把字體文件放在主應用加載
2. 使用通用的字體文件，這樣就不須要單獨加載字體文件了（等於沒說~）

2.dom的查詢方法找不到指定的元素

緣由：shadow dom 內的元素是被隔離的元素，故 document下查詢的方法例如，querySelector、getElementsById 等是獲取不到 shadow dom 內元素的。

方案：代理 document 下各個查詢元素的方法，使用子應用外面的 shadow dom 一層查詢。如何獲取子應用dom對象能夠參考乾坤的這個方法 initGlobalState。

3.組件庫動態建立的元素沒法使用本身的樣式

緣由：有些對話框或提示窗是經過document.body.appendChild添加的，因此 shadow dom 內引入的 CSS 是沒法做用到外面元素的。方案：代理document.body.appendChild方法，即把新加的元素添加到 shadow dom容器下，而不是最外面的 body節點下。

補充：相似的問題均可以往這個方向靠，看是否是shadow dom節點或者dom方法的問題。

4.第三方引入的 JS 不生效

緣由：有些 JS 文件自己是個當即執行函數，或者會動態的建立 scipt 標籤，可是全部獲取資源的請求是被乾坤劫持處理，因此都不會正常執行，也不會在 window 下面掛載相應的變量，天然在取值調用的時候也不存在這個變量。方案：參考乾坤的 issue，子應用向body添加script標籤失敗

5.webpack-dev-server 代理訪問的接口 cookie 丟失

緣由：在主應用的端口下請求子應用的端口，存在跨域，axios 默認狀況下跨域是不攜帶 cookie 的，假如把 axios 的 withCredential設置爲 true（表示跨域攜帶 cookie），那麼子應用須要設置跨域訪問頭Access-Control-Allow-Origin（在 devServer 下配置 header）爲指定的域名，但不能設置爲*，這時候同時存在主應用和子應用端口發出的請求，而跨域訪問頭只能設置一個地址，就致使沒法代理指定服務器接口。

方案：子應用接口請求的端口使用主應用接口請求的端口，使用主應用的配置代理請求

// 主應用

devServer: {
 ...
 port: 9600
 proxy: {
  // 代理配置
 }
}

// 子應用
devServer: {
 ...
 port: 9600, // 使用主應用的頁面訪問端口
}