aliyun/alibabacloud-alfa

阿里云微前端解决方案

alibabacloud-alfa's Issues

postcss-prefix-wrapper 对 @-webkit-keyframes 处理有误

@-webkit-keyframes a {
  from {}
  to {}
}

会被编译为

@-webkit-keyframes a {
  #prefix from {}
  #prefix to {}
}

withSyncHistory不生效

react-route版本4的情况下宿主同步子应用不生效

运行宿主项目 和子项目 Warning: 警告

如下图：
运行宿主项目 和子项目 报 Warning: 警告，请问有什么解决方式，

加载子应用直接报error

经常请求子应用manifest.json失败,清除缓存后可以恢复请求。

关于webpack3的支持

背景

目前子应用如果是通过webpack构建的话，可以通过引入插件的形式来实现，文档地址
但是实际开发中，很多项目（遗产项目）是通过webpack3来实现的，目前引入的@alicloud/console-toolkit-plugin-os并不支持webpack3

期望

希望可以使@alicloud/console-toolkit-plugin-os支持webpack3，这样可以降低接入成本，否则要子项目做wepack的版本迁移

emitter对象丢失问题

宿主传递给子应用只有初次有emitter对象，更新后传递给子应用的props里面的emitter对象丢失

是否支持Vue作为宿主应用？

我看packages里面只有react,ng作为宿主应用，目前是否开放了Vue作为宿主应用？

UnhandledPromiseRejectionWarning: TypeError: Cannot convert object to primitive value

@alicloud/[email protected] serve alibabacloud-console-os/example/SubApp/Vue
vue-cli-service serve

INFO Starting development server...
95% emitting WebpackAssetsManifest(node:2655) UnhandledPromiseRejectionWarning: TypeError: Cannot convert object to primitive value
at alibabacloud-console-os/example/SubApp/Vue/node_modules/@[email protected]@@alicloud/console-toolkit-plugin-os/lib/index.js:71:56
at Array.forEach ()
at transform (alibabacloud-console-os/example/SubApp/Vue/node_modules/@[email protected]@@alicloud/console-toolkit-plugin-os/lib/index.js:69:56)
at SyncWaterfallHook.eval [as call] (eval at create (alibabacloud-console-os/example/SubApp/Vue/node_modules/_tapable@1.1.3@tapable/lib/HookCodeFactory.js:19:10), :12:16)
at SyncWaterfallHook.lazyCompileHook (alibabacloud-console-os/example/SubApp/Vue/node_modules/_tapable@1.1.3@tapable/lib/Hook.js:154:20)
at WebpackAssetsManifest.toJSON (alibabacloud-console-os/example/SubApp/Vue/node_modules/_webpack-assets-manifest@3.1.1@webpack-assets-manifest/src/WebpackAssetsManifest.js:375:33)
at JSON.stringify ()
at WebpackAssetsManifest.toString (alibabacloud-console-os/example/SubApp/Vue/node_modules/_webpack-assets-manifest@3.1.1@webpack-assets-manifest/src/WebpackAssetsManifest.js:385:17)
at WebpackAssetsManifest.handleEmit (alibabacloud-console-os/example/SubApp/Vue/node_modules/_webpack-assets-manifest@3.1.1@webpack-assets-manifest/src/WebpackAssetsManifest.js:484:55)
at _next1 (eval at create (alibabacloud-console-os/example/SubApp/Vue/node_modules/_tapable@1.1.3@tapable/lib/HookCodeFactory.js:33:10), :28:1)
at eval (eval at create (alibabacloud-console-os/example/SubApp/Vue/node_modules/_tapable@1.1.3@tapable/lib/HookCodeFactory.js:33:10), :44:1)
at alibabacloud-console-os/example/SubApp/Vue/node_modules/_copy-webpack-plugin@5.1.1@copy-webpack-plugin/dist/index.js:91:9
(node:2655) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2655) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

node --version
v12.7.0

npm --version
6.10.0

子应用在本地开发时，无法热更新，如何解决

postcss-prefix-wrapper 对 font-family 处理有误

配置：

postcssPrefixWrapper({
  stackableRoot: '.A-B',
  repeat: 1,
  overrideIds: false,
}),

源码：

.a {
  font-family: inherit;
}

.b {
  font-family: -apple-system;
}

编译后：

.A-B .a {
  font-family: .ABinherit;
}

.A-B .b {
  font-family: .AB-apple-system;
}

ng-portal是否可以可以更新一下？

alibabacloud-alfa/packages/ng/下的ng-portal打包出来的库版本还是v1.0.0-next.11，其他都更新v1.2.3。

在使用angualr 10的子应用时，这个库报错不兼容，能否升级更新兼容一下？

支持blazor webassembly框架吗？.net 系的

请问一下：
支持blazor webassembly框架吗？.net 系的
还有现有老系统怎么接入，jquery,asp.net,jsp开发的。

项目支持vue3吗？ 没看到有vue3的demo

支持的话能否更新一下demo

子应用打包之后，包裹器样式对第三方库没有生效

main.js:

import Vue from "vue";
import App from "./App.vue;
import "ant-design-vue/dist/antd.css";
import Antd from "ant-design-vue";
import router from "./router";
import { mount } from "@alicloud/console-os-vue-portal";
Vue.use(Antd);
export default mount({
  el: "#app",
  router,
  render: (h) => h(App)
});

Sandbox增加部分开启的功能

如题，�沙箱可以对指定子应用开启(以id做匹配等等)

保持宿主路由同步后浏览器返回前进按钮功能失效

react主应用 + angular8子应用，在保持宿主路由同步后，点击浏览器左上角后退前进按钮会出现功能失效或长时间后页面才跳转问题，快速连续点击回退按钮后页面会出现元素错乱问题(原本两个页面的元素在同一页面展示但显示不全)。

vue-portal是否支持withSyncHistory

在文档中：指定路由定位到子应用的页面 中有描述react中的主从路由同步的方式，但是在文档和源码中没有找到vue相关的模式。

刷新页面后子应用返回首页

react主应用 + angular8子应用：保持宿主路由同步后，F5刷新页面，子应用重新跳转会应用首页(个人猜测是由于页面刷新主应用重新加载子应用所导致) 有较好的解决方案吗？

跟icestark比起来有啥优势么，看代码复杂度很高，但实际跟飞冰的原理基本一样

兼容性问题：browser-vm模块是否可以不使用 es6 Proxy 实现？

有没有其他的方式实现属性代理访问？

OS APP 内部无法收到 postMessage 信息

在 OS APP 里监听 message 事件
window.addEventListener('message', (evt) => { console.log(evt.data)})

在容器层派发事件后， APP里的事件处理器没有执行；
window.postMessage('message', '*')

在同一个区域切换子应用的示例

如下图，请问有没有在body区域动态切换子应用的示例代码？谢谢

React application loading callback

"@alicloud/console-os-react-app": "~0.3.6"
希望@alicloud/console-os-react-app Application组件暴露应用加载loading以便自定义loading效果

vue子应用如何接受props？

目前文档上缺少参数，且Mount中无法传入props从而获取宿主应用的参数

wrapCss dev模式下不会生成带前缀的css文件

看源码使用的是nodejs的fs模块，而不是MemoryFileSystem

example/SubApp/React package 少了 webpack-merge的依赖

您好，关于angular，我没在官网看到当angular作为子应用时的demo

目前有的是 ng作为主应用 以及 其他框架引入ng的 demo，我想看看ng作为子应用是如何配置的：

文档里写的自定义webpack配置我不确定如何做的，放在哪个目录下的哪个文件里，貌似没有webpack相关的配置文件可以修改（ng最新脚手架创建的项目）
我看vue是有提到下载哪个插件然后在哪个文件里修改的，希望官方能再完善下相关的文档，谢谢！
另外问个问题，ng 引入 ng，是否需要对zone进行额外的处理呢？

1.0.0-next.13 问题反馈

环境

vue-cli3+chrome v88

依赖

主应用 安装 @alicloud/console-os-vue-host-app": "^1.0.0-next.13"
出现问题如下:

"export 'loadExposedModule' was not found in '@alicloud/console-os-kernal'

子应用
vue-cli3+chrome v88
安装依赖:
"@alicloud/console-os-vue-portal": "^0.4.1",
"vue-cli-plugin-console-os": "^0.4.5",
路由配置懒加载

{
      path: "/page1",
      name: "page1",
      component: () => import("./views/page1.vue")
    }

报错:

vue-router.esm.js?8c4f:2314 ChunkLoadError: Loading chunk 0 failed.
(missing: http://172.21.52.166:8081/sub-app1/0.js)
    at Function.requireEnsure [as e] (http://17

不配置懒加载没问题

import page1 from  './views/page1.vue'
component: page1

demo中的React子应用出错

子应用React有问题，构建配置文件需改为：
chainOsWebpack({ id: 'os-example' })(chain);
entry: { 'os-example': './src/index.js', // 'os-example2': './src/index2.js' },

另外，React宿主应用的manifest引用需要修改为
manifest="http://localhost:8082/os-example.manifest.json"

关于样式隔离的问题

原本样式隔离是通过postcss在所有样式前追加作用域——pluginOptions.consoleOs.id。
但是当Vue子应用在cli的配置中指定了outputDir时，会导致这个选择的作用加不上。
需要追加一个属性cssBuildDir才能解决。
这是属于bug，还是使用不当？

我这边看到的是@alicloud/console-toolkit-plugin-os插件读取css路径的位置有问题。

                    postcss_prefix_wrapper_1.wrapCss(options.cssBuildDir || config.output.get('path'), options.cssPrefix || options.id, {
                        ext: '.os.css',
                        disableOsCssExtends: options.disableOsCssExtends,
                    });

@alicloud/console-toolkit-plugin-os这个源码在哪里？我想了解一下

与umijs/qiankun 比较有什么优势吗？

方便加一个demo吗？文档貌似不是很全

ConsoleOS 非单例模式下报错

目前 ConsoleOS Kernal 起初提供出一个 Singleton:false 配置来提供如下能力：

1.一个应用可以被同时初始化多次，并且同时存在，但是可以保持不同的状态。
2.在单例模式下，这个沙箱是被缓存起来下次使用的， 但是非单例下应用被卸载之后，相关的沙箱状态被完全销毁。

目前非单例模式的问题在于，第二次生成实例的时候没更新沙箱对象，导致报错。

打正式包 需要Access-Control-Allow-Origin

'http://localhost:6065/urule/res/urule-asserts/js/os-example.manifest.json' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

example运行起来后报错

在master分支下，照着readme运行example，出现如下问题

Umi架构下的应用，目前无法成为子应用

alfa 要求子应用 export default mount(xxx,xxx)
umi架构下构建是个黑盒，不支持自定义这步

构建支持 webpack 多 entry.

如果对于构建， wepback 指定了多个 entry. 构建工具应该支持对于每个entry 生成一份 manifest.json.

ConsoleOS 0.3.3版本，子应用高度异常

宿主应用："@alicloud/console-os-react-app": "~0.3.3"
子应用："@alicloud/console-os-react-portal": "~0.3.3"

疑似生成的子应用标签父级多了一个div标签影响了高度的继承

官网更新

指南里的其他框架使用模块里给的两个地址都是404了，什么时候更新下

子应用中使用 element.ownerDocument 挂载时，元素会被挂载在父页面 body 下

如使用 antd 的 DatePicker 等组件时，元素会被挂载在父页面 body 下。
此时，由于样式被增加了前缀，弹出的日期选择框无法匹配到样式。

源码：
https://github.com/react-component/trigger/blob/4259210ac983f562338c405524f7aed4c4bccd8a/src/index.tsx#L39

文档：
https://developer.mozilla.org/en-US/docs/Web/API/Node/ownerDocument

dev模式加载资源报404

资源在manifest生成是正确的 '//dev.g.alicdn.com/...' ，但是在load静态资源时，路径被处理成 'dev.dev.g.alicdn.com'。

建议在 getRealUrl 方法里，urlStr.replace('g.alicdn.com', 'dev.g.alicdn.com'); 改为 urlStr.replace('//g.alicdn.com', '//dev.g.alicdn.com');

子应用的本地存储有隔离吗？

如Cookie,localStorage,sessionStorage这些前端本地缓存是否做了隔离？

比如：宿主应用下分别有两个子应用——subA和subB。如果subA调用localStorage.setItem('someFlag', true),而subB调用localStorage.setItem('someFlag', false)，势必会造成冲突。

目前子应用的运行时是否已经做了隔离？还是需要开发者自行去规避问题？

如何实现一个更加纯粹的iframe

我是无界微前端的作者，制作动机可查看文章，最近才看到这个微前端实现的思路和我的方案非常一致，而且也碰到相同的问题，子应用需要一个空白的、同域的、浏览器前进后退可以生效的 iframe 作为沙箱。

由于 设置 iframe src 等于主应用域名，然后 appendChild 到 body 后通过 document.write 操作：

iframe.contentDocumennt.open();
iframe.contentDocumennt.write("");
iframe.contentDocumennt.close();

就可以得到一个空白的、同域的iframe，history.pushState 也可以正常工作，唯独一点，当子应用跳转路由后点击浏览器后退发现无效。

所以无界还是采用直接加载 iframe src 等于主应用域名的地址，然后等 location origin 初始化成主应用域名后立即停止iframe的加载，此时history.pushState 也可以正常工作、子应用跳转路由后点击浏览器后退也可以生效到子应用，但是在等待 location origin 初始化的过程中运行了部分主应用的代码，所以最好也要给一个宿主应用空的同域 URL 来作为这个 iframe 初始加载的 URL

想探讨一下有没有什么办法可以得到一个空白的、同域的、浏览器前进后退可以生效的 iframe 而不产生副作用

是否支持vite构建作为子应用

是否支持以vite构建vue3作为子应用

React子项目中用到jQuery

jQuery is not defined