无界微前端是一款基于 Web Components + iframe 微前端框架,具备成本低、速度快、原生隔离、功能强等一系列优点。
动机:动机
文档详见:文档
演示详见:demo
微前端已经是一个非常成熟的领域了,但开发者不管采用哪个现有方案,在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题、或无法提供支持。
Web Components 是一个浏览器原生支持的组件封装技术,可以有效隔离元素之间的样式,iframe 可以给子应用提供一个原生隔离的运行环境,相比自行构造的沙箱 iframe 提供了独立的 window、document、history、location,可以更好的和外部解耦。无界微前端采用 webcomponent + iframe 的沙箱模式,在实现原生隔离的前提下比较完善的解决了上述问题。
- 成本低
- 主应用使用成本低
- 子应用适配成本低
- 速度快
- 子应用首屏打开速度快
- 子应用运行速度快
- 原生隔离
- css 样式通过 Web Components 可以做到严格的原生隔离
- js 运行在 iframe 中做到严格的原生隔离
- 功能强大
- 支持子应用保活
- 支持子应用嵌套
- 支持多应用激活
- 支持应用共享
- 支持去中心化通信
- 支持生命周期钩子
- 支持插件系统
- 支持 vite 框架
- 安装
npm install wujie -S
- 使用
import { startApp } from "wujie";
startApp({ name: "唯一id", url: "子应用路径", el: "容器", sync: true });
- 安装
# vue2 框架
npm i wujie-vue2 -S
# vue3 框架
npm i wujie-vue3 -S
- 引入
// vue2
import WujieVue from "wujie-vue2";
Vue.use(WujieVue);
// vue3
import WujieVue from "wujie-vue3";
app.use(WujieVue);
- 使用
<WujieVue
width="100%"
height="100%"
name="xxx"
:url="xxx"
:sync="true"
:fetch="fetch"
:props="props"
:beforeLoad="beforeLoad"
:beforeMount="beforeMount"
:afterMount="afterMount"
:beforeUnmount="beforeUnmount"
:afterUnmount="afterUnmount"
></WujieVue>
- 安装
npm i wujie-react -S
- 引入
import WujieReact from "wujie-react";
- 使用
<WujieReact
width="100%"
height="100%"
name="xxx"
url="{xxx}"
sync="{true}"
fetch="{fetch}"
props="{props}"
beforeLoad="{beforeLoad}"
beforeMount="{beforeMount}"
afterMount="{afterMount}"
beforeUnmount="{beforeUnmount}"
afterUnmount="{afterUnmount}"
></WujieReact>
运行以下脚本,可以本地开发无界微前端框架,支持实时编译调试开发。
pnpm i // 安装包依赖,务必使用pnpm
npm run start // 启动所有应用
无界微前端解决方案来源于团队的无极低代码平台,通过无界微前端,存量页面和低代码页面可以丝滑的互相内嵌,欢迎体验【腾讯无极低代码】。
wujie's People
Forkers
mamumu123 devilwjp senro yyhaxx2108 tanghui28 zihao-zhong hiwangyeah chencs-19950208 zhuzhuman978 torns liquidliang hhy5277 isabella232 renlindong 202780181 jxzx-xsh ksl9508 dream2023 zhangtaiwei wangwenjie1314 3113001457 linhw2018 guoshijiang majk1224 wangditxz jinly2 it-rafi ccheng2729111 zidandirk lazycattylqm handoing skuramatata aminwangaa ltinerary steadyhua xiangyin1987 iamxiyang jtsang4 lichengtao1989 since92x chengbeyond js-dive wringy canwhite rickythink yaoleia 15538607130 taoqiyang wqqfocks yanglvyou zombieyang lijinghan9611 jinchengawu xulzu chengeping loverows worsher aimwhy weichengfu rxie2 ldt2016 instanceofs h5lsy ztaom gaoletian bukexuewang chakns ufec weiplanet xchen1995 wangyang0210 songjianet xinglongjizi lszjhux miracles1919 david0718 zlwaiwjj 554246839 yaowengang mazethree rocketwebjs chengfai heath1998 sondh0127 bulesky123 sunyfg owoeoto hadoop835 wangzhengbo lyonbot dodofun 275208060 penn6699 dut3062796s colgin wengfengtong webshy corey-wangdong erkelost denver-ningwujie's Issues
window事件 和 document.write失效
描述bug
window上的事件比如onload 和 document.write添加 script 标签无法生效
点击不同的菜单显示显示子应用不同页面
在主工程中,如何通过点击不同的菜单显示显示子工程不同的页面,菜单会添加到多页签中,方便切换
子应用使用arco.design组件库打开弹窗问题
子应用使用arco.design组件库打开弹窗会默认往body插入样式,导致我需要在子应用处理相关问题。在子应用中使用svg就会因为这个问题不出现。
没有编译的老旧项目加载会出问题
相对路径会访问主应用服务器端的
如果不开启路由同步,会出现什么问题?
我搭建了一个demo,开启路由同步后,路由后面始终会携带参数。当关闭路由同步后,demo中的效果暂时没发现有什么问题。所以想请教一下,如果关闭后会有什么问题?
主应用和子应用均为vite + vue3。
eventBus通信章节中链接打开404
问题描述:指南文档中,通信系统章节内的eventBus通信系统小节中api链接打开404
报错截图:
子应用使用webpack module federation报错
子应用使用module federation引用其它module federation类型模块报错,有支持的方式吗?[
Uncaught (in promise) ScriptExternalLoadError: Loading script failed. (missing: http://localhost:4000/remoteEntry.js) while loading "./react" from webpack/container/reference/lib-app while loading "./react-dom" from webpack/container/reference/lib-app
创建官方处理子应用css内部相对地址的plugin
DEMO本地运行报错
preloadApp 和 startApp 重复配置项问题
vue3主应用,加载不了vue2子应用
zepto.js 使用时 $(window).width()运行报错
element-ui dialog弹框里面写的下拉框el-select左右错位
IE11下 "EventTarget" 未定义
描述bug
IE11浏览器,在 creat-react-app 生成的 demo 项目下,引入 wujie-react,尝试渲染子应用,控制台显示 "EventTarget" 未定义
如何复现
1、第一步,通过 cra 生成最简demo项目
2、第二步,安装 creat-app-polyfill,在入口文件 index.js 中引入 “import "react-app-polyfill/ie11";”
3、第三步
改写 App 组件,注释无用css和图片等,保留 外层 div 结构,内部引入 wujie-react 组件
wujie-react 组件配置相关的 name 和 url(这里把 name和url 设置为同一个),width/height 100%
4、第四步,yarn build 打包项目,部署在本机 nginx,通过 IE11 浏览器进行访问
错误代码定位在 common.ts 中的 EventTarget.prototype.addEventListen
最小复现仓库或者地址
重要!!!,请尽量给出复现仓库,这样能极大加快bug解决速度
第一个issues
话说,生产环境效果怎么样,有没什么坑啊
在多个子应用同时激活的情况下 ,打开页面出现白屏
子应用通过css加载的图片无法显示
// Vue 2 / App.vue
<template>
<div>
[Test] img src
<img src="./assets/logo.png" alt="">
</div>
<div>
[Test] i background url
<i class="icon-logo"></i>
</div>
</template>
<style>
.icon-logo {
display: inline-block;
width: 100px;
height: 100px;
background: url("./assets/logo.png") 0 0 / 100px 100px no-repeat;
}
</style>
子应用独立运行可以正确显示 i 标签的图片
但是在主应用里运行子应用的时候就失效了
主应用如何跳转到子应用指定页?
访问子应用跨域错误
我的子应用接口通过配置nginx已经支持跨域访问,但是通过主应用访问还是提示跨域错误。单独访问子应用正常
下拉框等卡片弹出错位
加载完子应用入口html后为何还要请求一次主应用host
描述bug
加载完子应用入口html后为何还要请求一次主应用host
创建官方处理子应用字体加载的plugin
主应用菜单点击路由变化问题
主应用通过点击菜单跳转子应用页面,路由同步开启。
当我再次点击主应用同样的菜单时,会改变路由,后面的参数丢了。
主应用、子应用均为vite+vue3。使用element plus, 菜单组件,开起路由模式
创建官方处理子应用window、document 滚动相关的plugin
劫持子应用的滚动高度,指定子应用滚动到指定位置等相关api,让子应用无感知也无需特殊处理滚动相关问题
主应用怎么打开子应用指定页面
从主应用打开子应用,会默认打开子应用的首页
可不可以提供vite构建工具为主应用
可不可以提供vite构建工具为主应用?
如何在本地环境中加载不用域里的子应用呢
无界目前是否可以应用在生产级别的环境中
当前在做微前端框架选择,项目本身是vue2做主,ng1 ng2 vue2都有子,之前调研过qiankun,对于ng和ng1有一些不太友好的地方,恰巧这时候看到了无界,但是目前看下来好像没有什么具体产品验证,特此询问一下(没有别的意思,就是单纯问一下测试及验证的情况)
createApp 和 vue 的 api 重名
描述bug
主应用为vue3时, wujie的createApp 与vue3的createApp 冲突了
Windows系统无法正常运行start脚本
DOMException: Blocked a frame with origin from accessing a cross-origin frame 报错
DOMException: Blocked a frame with origin ***** from accessing a cross-origin frame
at getTargetValue (https://dev.g.alicdn.com/*********/***.js)
请问有什么办法能在子应用中获取到主应用中的某个DOM节点
我这边有个特别的场景,需要在子应用中获取到主应用中某个DOM节点
以前项目未采用微前端方案时,是直接通过document.querySelector(xxx),但是现在接入wujie后,我发现document.querySelector会从shadowRoot中找,这样以前代码就有bug
请问有什么好办法解决吗?
感谢
js-excludes 和 css-excludes 建议支持函数或者正则
背景
比如我们现在接的子应用内部有百度 sdk 需要忽略,由主应用统一处理,但是子应用内部的百度 sdk 1、2、3版本都有,而且有 query 等各种情况,那么我们想忽略,就必须把所有子应用链接的版本都收集到,比较麻烦。
期望
能 js-excludes 和 css-excludes 支持正则表达式和字符串两张形式
常见问题6里面的,把相对地址替换为绝对地址,具体是怎么替换
解决方案: 使用插件中的css-loader在运行时将相对地址代码替换成绝对地址, 这个具体替换的代码demo有吗?
阿里iconfont图标出不来
样式都有就是不显示
顶层声明的 var 变量,文件之间无法共享
描述bug
script 文件声明的 var 变量,没有挂到 window 对象上,script 之间无法共享
如何复现
创建一个简单的文件,使用wujie加载报错
`
错误截图
如果有可以将截图带上
最小复现仓库或者地址
重要!!!,请尽量给出复现仓库,这样能极大加快bug解决速度
ANTV X6 子应用使用问题
vite的 主子应用 保活问题
子应用 alive设置为true
切换页面时还是会进入到wujie的window.__WUJIE_MOUNT __WUJIE_UNMOUNT中,
如果不生命周期改造 还是会重新加载
就是保活并没有生效
vite子应用css3变量没有生效
子应用为vite开发模式:root样式没有转化成:host
啥是保活,保活是什么意思
引入报这错,有人遇到吗
Uncaught DOMException: Blocked a frame with origin "http://localhost:8001" from accessing a cross-origin frame.
子应用给on事件赋值报错
建议兼容模式下一个子应用只使用一个iframe
在兼容模式下,是不是没有必要让html和css运行在一个iframe内,js运行在另一个iframe内,直接让它们都运行在同一iframe内是最贴近原生和风险最小的方案
vite的 主子应用 保活问题
子应用 alive设置为true
切换页面时还是会进入到wujie的window.__WUJIE_MOUNT __WUJIE_UNMOUNT中,
如果不生命周期改造 还是会重新加载
就是保活并没有生效
使用无界而不用乾坤的理由是啥?
子应用引用的第三方组件,样式丢失
典型如 element ui
bugs: 路径错误时解析URL报错
文件路径:wujie-core/utils.ts
函数体:fixElementCtrSrcOrHref
代码:new URL(value, this.baseURL || '')
当 value 不是合法的URL时,会报错,阻塞继续渲染
建议增加容错
示例:将子应用的url 设为 http://remons.cn/@website_pages/my
子应用中发出的api请求域名会是子应用的url吗?如果想和主应用域名一致该怎么做
单 Vue 应用不会渲染
Vue 设置 width 无效
wujie/packages/wujie-vue3/index.js
Line 86 in 3e2a781
wujie/packages/wujie-vue2/index.js
Line 86 in 3e2a781
包管理工具升级为pnpm
现在安装包重复依赖太多太慢,采用hoist模式又出现各种诡异现状,准备升级到pnpm + lerna
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.