微前端乾坤使用过程当中的坑

微前端乾坤使用过程当中的坑

乾坤在启动子应用的时候默认开启沙箱模式{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, // 使用主应用的页面访问端口
}