子应用开发支持热更新？ about qiankun

[kuitos]

@shengbeiniao dynamic import 场景配下 publicPath 就可以了。微信上班一般不怎么看，相关问题也可以到 umi 群里沟通:smile:

[LSWlee]

能否使用静态的方式呢？将子应用全部打包上传，然后主应用加载本地的本地的子应用静态文件？

我上面说的那种需求对于除 web 部署外有一定的场景。比如在进行桌面端部署（有可能是离线环境），简单来说就可以直接使用 Electron 去加载主应用，所有的子应用也不需要通过网络获取，而是全部打包在本地。

请问可以在Electron中使用qiankun来加载本地离线子应用吗？

[kuitos]

暂不支持，pr is welcome😀

[navono]

能否使用静态的方式呢？将子应用全部打包上传，然后主应用加载本地的本地的子应用静态文件？

[kuitos]

@navono 应用发布部署后不存在本地这种概念吧，你说的本地是指？

[navono]

我没解释清楚。基本现在主流是按照这个库的使用方式，也就是主应用加载另外服务上的子应用，像 README 写的一样：

registerMicroApps(
  [
    { name: 'react app', entry: '//localhost:7100', render, activeRule: genActiveRule('/react') },
    { name: 'vue app', entry: { scripts: [ '//localhost:7100/main.js' ] }, render, activeRule: genActiveRule('/vue') },
  ],
  {
    beforeLoad: [async app => {
      console.log('before load', app);
    }],
    beforeMount: [async app => {
      console.log('before mount', app);
    }],
    afterMount: [async app => {
      console.log('before mount', app);
    }],
    afterUnmount: [async app => {
      console.log('after unload', app);
    }],
  },
);

在 entry 写的是子模块的地址，例如：//localhost:7100。

但是我有另外一种需求（可能不是很常见）。就拿上面代码的例子来说，也就是我将子应用（也就是 react app 和 vue app）进行 build，然后将它们的 bundle 放到主应用中，比如 submodule 下。最后由主应用像使用import 导入模块一样将子应用的导入。

我看到 single-spa 下有通过 SystemJS 导入的方式。所以我的问题是，qiankun 是否也支持这种方式？（我还没详细看 qiankun 的代码）

[navono]

我上面说的那种需求对于除 web 部署外有一定的场景。比如在进行桌面端部署（有可能是离线环境），简单来说就可以直接使用 Electron 去加载主应用，所有的子应用也不需要通过网络获取，而是全部打包在本地。

[kuitos]

systemjs import 的方式也是拉的远程资源，我猜你说的是 es dynamic import 的方式吧，但是这种方式要求主子应用共用一个 bundler 一起打包，意味着子应用更新需要主应用也重新打包一次，这不是 qiankun 推荐的方式

[navono]

不需要和主应用一起打包。子应用打包可以是分开的，打包后的文件需要重新部署到主应用上。

[kuitos]

@navono 不一起打包主应用如何引子应用的包?

[navono]

就是类似上面说的，所有的子应用独立打包后，放到主应用的部署的某个目录下，例如：submodules，以各自的模块名称命名子文件夹存放。类似这个项目 lotus-scaffold-micro-frontend-portal。

[kuitos]

@navono systemjs 方式也是通过网络拉取的，本质你还是把子应用部署到了一个静态 server 下面

[navono]

systemjs 可以 load 主应用的相对目录下的资源。如果按照上面说的那种场景，我把所有的代码放到 electron 宿主里，就不存在从网络拉取的操作。所以核心问题是，不同的部署方式导致开发过程中的各个模块的集成方式的问题。

[kuitos]

不确定你用的哪个版本的 systemjs，新的版本是不支持读本地文件系统的。BTW，如果是读文件系统，直接 require 就够用了吧

[shengbeiniao]

看了遍qiankun的代码，楼上说的只需要用一个web server分不同的目录就可以解决，可以写一个脚本针对不同子应用分开编译最后把dist copy到主应用目录下，不过对于umi应用来说，有个问题就是dynamicImport，引用的路径是相对于web server根路径的，如果子应用的路由应用了dynamicImport就会报错了

另外可以加个作者微信么？有些问题想请教下~ @kuitos

[shengbeiniao]

@shengbeiniao dynamic import 场景配下 publicPath 就可以了。微信上班一般不怎么看，相关问题也可以到 umi 群里沟通😄

单独debug子应用不知道楼主有没有好的思路，目前的解决办法是在子应用入口文件app.js添加如下代码，这样可以运行子应用，如果主应用、子应用都为react，可以把主应用作为layout导出，子应用挂在children下

import * as app from '@tmp/umi'

setTimeout(()=>{
  app.bootstrap().then(()=>{
    app.mount()
  })
},0)

[shengbeiniao]

已完成umijs/umi-plugin-qiankun#13

[humorHan]

@shengbeiniao LZ，不想启动主应用，所以主应用是域名地址，某个query参数下会加载本地localhost的子应用，这样的情况应该如何支持子应用修改的热更新？

[luanwulin]

@shengbeiniao 请问下，如果没有用umi的话，主应用的webpack配置要如何修改才能支持子应用热更新？

[ruoruoji]

@shengbeiniao 请问下，如果没有用umi的话，主应用的webpack配置要如何修改才能支持子应用热更新？

https://juejin.cn/post/6927972972640600078/ 这个文章好像可以解决

[zdd00]

能否使用静态的方式呢？将子应用全部打包上传，然后主应用加载本地的本地的子应用静态文件？

我上面说的那种需求对于除 web 部署外有一定的场景。比如在进行桌面端部署（有可能是离线环境），简单来说就可以直接使用 Electron 去加载主应用，所有的子应用也不需要通过网络获取，而是全部打包在本地。

请问可以在Electron中使用qiankun来加载本地离线子应用吗？

同问