micro-app是京东零售推出的一款微前端框架,它基于类WebComponent进行渲染,从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架,并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。
micro-app与技术栈无关,对前端框架没有限制,任何框架都可以作为基座应用嵌入任何类型的子应用。
1、安装依赖
yarn add @micro-zoe/micro-app
2、在入口文件引入
// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start()
3、在页面中嵌入微前端应用
<!-- 👇 name为应用名称,url为应用地址 -->
<micro-app name='my-app' url='https://localhost:3000/'></micro-app>
在webpack-dev-server的headers中设置跨域支持。
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
},
以上即完成微前端的嵌入,效果如下:
更多详细配置可以查看官网文档
如果您对这个项目感兴趣,欢迎参与贡献,也欢迎 "Star" 支持一下 ^_^
1、克隆项目
git clone https://github.com/micro-zoe/micro-app.git
2、安装依赖
yarn bootstrap
3、运行项目
yarn start # 访问 https://localhost:3000
更多命令请查看DEVELP
micro-app的优势在哪里?
上手简单、侵入性低,只需改动少量的代码即可接入微前端,同时提供丰富的功能。具体细节请参考文章:micro-app介绍
兼容性如何?
micro-app依赖于CustomElements和Proxy两个较新的API。对于不支持CustomElements的浏览器,可以通过引入polyfill进行兼容,详情可参考:webcomponents/polyfills。
但是Proxy暂时没有做兼容,所以对于不支持Proxy的浏览器无法运行micro-app。
浏览器兼容性可以查看:Can I Use
总体如下:
- PC端:除了IE浏览器,其它浏览器基本兼容。
- 移动端:ios10+、android5+
子应用一定要支持跨域吗?
是的!如果是开发环境,可以在webpack-dev-server中设置headers支持跨域。
devServer: {
headers: {
'Access-Control-Allow-Origin': '*',
},
}
如果是线上环境,可以通过配置nginx支持跨域。
支持vite吗?
支持,详情请查看适配vite