npm install @a1exsun/micro-web

📖简介

micro-web是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、虚拟路由系统、插件系统、数据通信等一系列完善的功能。

micro-web与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。

如何使用

主应用

1、安装依赖
``bash yarn add micro-web`

2、在入口文件引入`js // main.js import microWeb from 'micro-web'

microWeb.start()`

3、在页面中嵌入微前端应用`html`

`子应用`

在webpack-dev-server的headers中设置跨域支持。`js devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, },`

以上即完成微前端的嵌入，效果如下：

更多详细配置可以查看官网文档

`🤝 参与共建`


如果您对这个项目感兴趣，欢迎参与贡献，也欢迎 "Star" 支持一下 ^_^
$3

1、克隆项目


git clone https://github.com/jd-opensource/micro-web.git

2、安装依赖`yarn bootstrap`

3、运行项目`yarn start # 访问 http://localhost:3000`

更多命令请查看DEVELP

`FAQ`


问题汇总
  
micro-web的优势在哪里？

  上手简单、侵入性低，只需改动少量的代码即可接入微前端，同时提供丰富的功能。
  具体细节请参考文章：micro-web介绍


  兼容性如何？

  micro-web依赖于CustomElements和Proxy两个较新的API。
  对于不支持CustomElements的浏览器，可以通过引入polyfill进行兼容，详情可参考：webcomponents/polyfills。
  但是Proxy暂时没有做兼容，所以对于不支持Proxy的浏览器无法运行micro-web。
  浏览器兼容性可以查看：Can I Use
  总体如下：
  - PC端：除了IE浏览器，其它浏览器基本兼容。
  - 移动端：ios10+、android5+


  子应用一定要支持跨域吗？

  是的！

如果是开发环境，可以在webpack-dev-server中设置headers支持跨域。`js devServer: { headers: { 'Access-Control-Allow-Origin': '*', }, }``

如果是线上环境，可以通过配置nginx支持跨域。

支持vite吗?

支持，详情请查看适配vite

支持ssr吗?

支持，详情请查看nextjs、nuxtjs

贡献者们

License

MIT License