如何基于ant-design-pro使用umi-plugin-qiankun？

[zhilianbi520]

想在ant-design-pro中使用umi-plugin-qiankun，实现微服务构建，请问如何做相关的配置，能否提供相关demo给予帮助。

[label-actions]

@kuitos 请看下。

[DLCnow]

有相同的诉求,我现在使用的是ant-design-pro+ts的解决方案,按照demo实现了两天未果,目前有几个问题:

1. 加入插件后yarn start会提示"Conflict: Multiple assets emit different content to the same filename umi.js.map",子项目跑不起来,script标签引用了错误的path"http://localhost:undefined/umi.js"。
   
   需要手动更改config.js的文件,当监听到config.js变化后会重新build,之后子项目就会正常显示了.
2. 在第一步成功的情况下子项目会正常显示,跑qiankun项目下的example,将本地子项目添加进去会提示"Application 'k2assets' died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in k2assets entry",此时src 下的 app.js 已经正常修改并添加了文档中描述的export方法.

---

node 12.6.0
umi 2.10.2
antd 3.20.0
@ant-design/pro-layout 4.5.9
@ant-design/pro-cli 1.0.0

[zhilianbi520]

有相同的诉求,我现在使用的是ant-design-pro+ts的解决方案,按照demo实现了两天未果,目前有几个问题:

1. 加入插件后yarn start会提示"Conflict: Multiple assets emit different content to the same filename umi.js.map",子项目跑不起来,script标签引用了错误的path"http://localhost:undefined/umi.js"。
   
   需要手动更改config.js的文件,当监听到config.js变化后会重新build,之后子项目就会正常显示了.
2. 在第一步成功的情况下子项目会正常显示,跑qiankun项目下的example,将本地子项目添加进去会提示"Application 'k2assets' died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in k2assets entry",此时src 下的 app.js 已经正常修改并添加了文档中描述的export方法.

楼上你用的是v2的pro嘛？还是？

[DLCnow]

有相同的诉求,我现在使用的是ant-design-pro+ts的解决方案,按照demo实现了两天未果,目前有几个问题:

1. 加入插件后yarn start会提示"Conflict: Multiple assets emit different content to the same filename umi.js.map",子项目跑不起来,script标签引用了错误的path"http://localhost:undefined/umi.js"。
   
   需要手动更改config.js的文件,当监听到config.js变化后会重新build,之后子项目就会正常显示了.
2. 在第一步成功的情况下子项目会正常显示,跑qiankun项目下的example,将本地子项目添加进去会提示"Application 'k2assets' died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in k2assets entry",此时src 下的 app.js 已经正常修改并添加了文档中描述的export方法.

楼上你用的是v2的pro嘛？还是？

版本我在上面加上了

[atzcl]

同有

Conflict: Multiple assets emit different content to the same filename umi.js.map

的警告

[phobal]

@kuitos 升级到 v1.3.2 还是有这样的问题

[phobal]

@DLCnow

加入插件后yarn start会提示"Conflict: Multiple assets emit different content to the same filename umi.js.map",子项目跑不起来,script标签引用了错误的path"http://localhost:undefined/umi.js"。

这个是因为你没指定 port, 你可以在项目的根目录下创建一个 .env 的文件，在里面加入 PORT 的配置,比如：

PORT=8000
 

[huyansheng3]

http://localhost:undefined/umi.js 引入的umi.js的地址有undefined的错误感觉需要修复下。不能让在.env中指定PORT才行。。

umi/packages/af-webpack/src/fork.js

child.on('message', data => {
    const type = (data && data.type) || null;
    if (type === RESTART) {
      child.kill();
      start(scriptPath);
    } else if (type === 'UPDATE_PORT') {
      // set current used port
      CURRENT_PORT = data.port;
    }
    if (onMessage) {
      onMessage(data);
    }
    send(data);
  });

在 CURRENT_PORT = data.port; 这里再增加一行

if(!process.env.PORT) {
    process.env.PORT = data.port  
}

感觉这样应该就可以了吧？插件的逻辑都是跑在子进程里的。即使通知了父进程，插件里也取不到 process.env.PORT

[kuitos]

http://localhost:undefined/umi.js 引入的umi.js的地址有undefined的错误感觉需要修复下。不能让在.env中指定PORT才行。。

umi/packages/af-webpack/src/fork.js

child.on('message', data => {
    const type = (data && data.type) || null;
    if (type === RESTART) {
      child.kill();
      start(scriptPath);
    } else if (type === 'UPDATE_PORT') {
      // set current used port
      CURRENT_PORT = data.port;
    }
    if (onMessage) {
      onMessage(data);
    }
    send(data);
  });

在 CURRENT_PORT = data.port; 这里再增加一行

if(!process.env.PORT) {
    process.env.PORT = data.port  
}

感觉这样应该就可以了吧？插件的逻辑都是跑在子进程里的。即使通知了父进程，插件里也取不到 process.env.PORT

cc @sorrycc 看下这个解决方案是否合理？

[hqqxxf]

所以，最后解决了吗？

[zhanghouji]

从 antd-pro 切换的别的子应用或主应用样式报错，页面不加载。