react-vue-micro-frame: 在react中像加载一个iframe一样加载vue的微前端组件

代码拉取完成,页面将自动刷新

richgiteeai

Watch

不关注关注所有动态仅关注版本发行动态关注但不提醒动态

1 Star 1 Fork 0

SyncGithub/react-vue-micro-frame

代码 Issues 0 Pull Requests 0 Wiki 统计流水线

服务

加入 Gitee

与超过 1400万开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)

免费加入

已有帐号? 立即登录

该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。

项目仓库所选许可证以仓库主分支所使用许可证为准

克隆/下载

HTTPS SSH SVN SVN+SSH 下载ZIP

提示

下载代码请复制以下命令到终端执行

为确保你提交的代码身份被 Gitee 正确识别,请执行以下命令完成配置

git config --global user.name userName 
git config --global user.email userEmail

初次使用 SSH 协议进行代码克隆、推送等操作时,需按下述提示完成 SSH 配置

1 生成 RSA 密钥

2 获取 RSA 公钥内容,并配置到 SSH公钥中

在 Gitee 上使用 SVN,请访问使用指南

使用 HTTPS 协议时,命令行会出现如下账号密码验证步骤。基于安全考虑,Gitee 建议配置并使用私人令牌替代登录密码进行克隆、推送等操作

Username for 'https://gitee.com': userName

Password for 'https://userName@gitee.com': # 私人令牌

新建文件新建 Diagram 文件

新建子模块

上传文件

分支 19

标签 0

贡献代码

同步代码

创建 Pull Request

了解更多

对比差异通过 Pull Request 同步

同步更新到分支

通过 Pull Request 同步

将会在向当前分支创建一个 Pull
Request,合入后将完成同步

dingyubo bugfix: issue3 style miss 80a7563

62 次提交

config

demo

lib

mock-component

src

.babelrc

.editorconfig

.gitignore

README-zh_CN.md

README.md

index.d.ts

jest.config.js

package-lock.json

package.json

tsconfig.json

tslint.js

README

## [English](./README.md) | 简体中文

# React加载vue的微前端组件
##### &emsp;&emsp;基于single-spa的react微前端组件
&emsp;&emsp;我有一个梦想, 希望可以在react项目中像加载一个```<iframe>```标签一样简单地加载其他框架的组件或应用。
</br>

# demo 体验
```
git clone git@github.com:y805939188/react-vue-micro-frame.git
cd react-vue-micro-frame
npm install
npm run start
```

# 使用方式
```js
npm install --save react-vue-micro-frame
```
```js
 /** 加载远程组件 **/
 import React from 'react';
 import VueFrame from 'react-vue-micro-frame';
 const Test = () => (
 <div>
 <VueIFrame jsurl="http://originPath/vueComponent.umd.js"/>
 </div>
 )
```
```js
 /** 加载本地组件 **/
 import React from 'react';
 import VueFrame from 'react-vue-micro-frame';
 import VueComponent from './vueComponent.vue';
 const Test = () => (
 <div>
 <VueFrame componet={VueComponent} />
 </div>
 )
```
```js
 /** 也可以加载一个远程的react组件 **/
 import React from 'react';
 import { ReactFrame } from 'react-vue-micro-frame';
 const Test = () => (
 <div>
 <ReactFrame jsurl="http://reactComponentAddress.umd.js" />
 </div>
 )
```
&emsp;&emsp;注意: 组件的开发请务必使用**umd规范**。
&emsp;&emsp;建议使用vue-cli提供的<a href="https://cli.vuejs.org/zh/guide/build-targets.html#%E5%BA%94%E7%94%A8" target="_blank">构建库</a>的功能</br>
&emsp;&emsp;或者可以使用<a href="https://github.com/y805939188/elf-cli" target="_blank">elf-cli</a>简单地创建一个符合umd规范的react组件
</br>

# Feature
- [x] 加载远程vue或react组件
- [x] 加载本地vue组件
- [x] 跨域加载
- [x] 静态资源加载
- [x] css样式隔离

# TODO
- [ ] 调研是否可基于 qiankun2.x 重构
- [ ] 加载整个 vue/react 应用
- [ ] frame 组件外渲染 (由于当前设计类似于原生 iframe 标签,所以无法做到组件范围外的渲染)
- [ ] frame 组件与外部通信的pipeline (由于当前设计类似原生 iframe 标签,只能接受外部参数,但是没有专门用来和外部其他组件通信的 pipeline,这对于组件外部需要状态管理等场景很有必要)

# 可能存在的问题
1. 样式隔离使用的是shadow dom的方式, 所以暂时不支持ie
2. 静态资源在不做任何处理的情况下只支持通过src属性加载的资源, 比如image啥的, 对于类似tty之类的js无法处理的静态资源, 可以通过提前约定publicPath的方式加载。比如:
```js
/** vue-cli的vue.config.js */
const ASSET_PATH = '__WILL_BE_REPLACED_PUBLIC_PATH__';

function PublicPathWebpackPlugin () {}

PublicPathWebpackPlugin.prototype.apply = function (compiler) {
 compiler.hooks.beforeRun.tap('PublicPathWebpackPlugin', (compiler) => {
 compiler.options.output.publicPath = ASSET_PATH;
 })
}

module.exports = {
 publicPath: ASSET_PATH,
 configureWebpack (config) {
 config.plugins.unshift(new PublicPathWebpackPlugin());
 },
}
/**
 * react-vue-micro-frame 组件内部会替换掉提前约定好 ASSET_PATH 以此来加载那些非src属性加载的静态资源
 */

```
3. vue-cli提供的构件库的方式默认是会将css文件单独提取出来, 可以通过cssurl属性加载远程的css, 也可以通过inline的方式把css放进js文件里:
```js
// vue-cli的vue.config.js
module.exports = {
 css: {
 extract: false,
 },
}
```
4. 请大佬们多提bug, 感激不尽(方便的话顺便点个星星吧, 谢谢大佬们!)