微前端学习 - 问题记录

学历微前端过程中遇到的一些困惑，此处做记录。

遇到的问题

• webpackConfig 和 devServer 是啥？ 以及里面每一个配置的作用？
• rescripts 和 react - script 的区别 ？
• webpack_public_path 是干嘛用的？public-path.js 里的
• 如何进行 不同微应用 之间的传参？
• 微应用生命周期的使用场景？
• 主应用传参的时候不用把 initGlobalState 的 action 传递过来吗,直接就能识别了吗？
  如果出现多个 state 呢？只 能有 1 个吗？如果一开始就想访问主应用的 state 怎么办？ 不是变化的时候才获取?

问题 1：webpackConfig 和 devServer 是啥？ 以及里面每一个配置的作用？

webpackConfig 是 webpack 一些的配置。 devServer 是本地开发运行时的一些配置。 详细需要了解 webpack 的配置。 - 参考梳理的一些webpack知识点

问题 2：rescripts 和 react - script 的区别

react - script： 封装了 webpack 的配置，使创建 react 应用的时候更 open out of the box。

@rescripts/cli：重写 webpack 配置的插件。另外还有个插件叫： react-app-rewired。

问题 3：public-path.js 里的webpack_public_path 是干嘛用的？

有 qiankun 的情况: http://localhost:3000/ . 自启动的情况：/

个人理解： webpack.public_path 就是静态资源的访问路径。让从 qiankun 主应用 启动子应用时，从当前子应用的端口和路由下去访问静态资源，不要从主应用访问。题目中的 publicPath 就是 runtime publicPath，主要解决的是微应用动态载入的 脚本、样式、图片 等地址不正确的问题。参考 qiankun 官网的解释

问题 4：如何进行 不同微应用 之间的传参？

<!-- 主应用定义 -->
 const actions = initGlobalState(GlobalStateTest);

<!-- 子应用可以用下面的方法获取 -->
 actions.onGlobalStateChange((state, prev) => {
   // state: 变更后的状态; prev 变更前的状态
   console.log("onGlobalStateChange", state, prev);
 },true、false);
 actions.setGlobalState({ age: GlobalStateTest.age + 1 });
 actions.offGlobalStateChange();

问题 5 ：主应用传参的时候不用把 initGlobalState 的 action 传递过来吗,直接就能识别了吗？

qiankun 会默认传递 onGlobalStateChange: ƒ onGlobalStateChange(callback, fireImmediately) 和 setGlobalState: ƒ setGlobalState()就算没有定义 initGlobalState 实例也会有的。

问题 6 ：为什么不传递 actions 的时候，qiankun 通过 mount 的 props 自带 actions 的方法呢？–待解决+

问题 7 ：如果出现多个 state 呢,定义多个 initGlobalState 实例？只 能有 1 个吗？

最好不要在主应用定义多个 initGlobalState(GlobalStateTest)，因为 onGlobalStateChange 的参数会把他们放到一个对象里去。（为什么呢？）
原因猜测：是因为这种传参方式本来就是只适用于简单的数据通信。不适合复杂的。

问题 8 ：如下图，直接 setGlobalState({xxx})给了个新对象，不会改变原本的 GlobalStateTest 。除非 GlobalStateTest.xx=xx,然后 setGlobalState(GlobalStateTest)。（怎么办呢？）

原因猜测：根据 此链接里的说明，initGlobalState 的通信方式，无法跟踪状态池。意思就是：不会改变原本的 GlobalStateTest。

（如上猜测：那其它子应用怎么获取最新的更改后的数据呢？）

猜测： 如下图所示，我在 react 子应用里修改了 GlobalStateTest，然后再 vue 子应用的 mount 方法里通过 onGlobalStateChange 监听，第二个参数设置为 true,就能拿到最新的了。不过主应用通过 props 穿过来的 GlobalStateTest 了这个是旧的

问题 9：如果一开始就想访问主应用的 state 怎么办？ 不是变化的时候才获取?

1: 直接 onGlobalStateChange 第二个参数为 true 会默认调用一次变化的监听方法。取值然后拿给子应用自己用。

2: 注册子应用的时候通过 props 传递 GlobalStateTest — 此方法不建议了 原因如上，无法跟踪状态池