Skip to content

Latest commit

 

History

History
117 lines (105 loc) · 4.22 KB

README-zh_CN.md

File metadata and controls

117 lines (105 loc) · 4.22 KB
Raw

English | 简体中文

React加载vue的微前端组件

  基于single-spa的react微前端组件

  我有一个梦想, 希望可以在react项目中像加载一个<iframe>标签一样简单地加载其他框架的组件或应用。

demo 体验

git clone git@github.com:y805939188/react-vue-micro-frame.git
cd react-vue-micro-frame
npm install
npm run start

使用方式

npm install --save react-vue-micro-frame
  /** 加载远程组件 **/
  import React from 'react';
  import VueFrame from 'react-vue-micro-frame';
  const Test = () => (
    <div>
      <VueIFrame jsurl="http://originPath/vueComponent.umd.js"/>
    </div>
  )
  /** 加载本地组件 **/
  import React from 'react';
  import VueFrame from 'react-vue-micro-frame';
  import VueComponent from './vueComponent.vue';
  const Test = () => (
    <div>
      <VueFrame componet={VueComponent} />
    </div>
  )
  /** 也可以加载一个远程的react组件 **/
  import React from 'react';
  import { ReactFrame } from 'react-vue-micro-frame';
  const Test = () => (
    <div>
      <ReactFrame jsurl="http://reactComponentAddress.umd.js" />
    </div>
  )

  注意: 组件的开发请务必使用umd规范。   建议使用vue-cli提供的构建库的功能
  或者可以使用elf-cli简单地创建一个符合umd规范的react组件

参数

只有jsurl或component属性是必须的, 其他参数均可选

参数名 类型 是否必须 功能
jsurl string jsurl和component必须二选一 远程组件的地址
component VueComponent component和jsurl必须二选一 本地vue组件
extraProps Object 非必须 传递给组件的属性
visible boolean 非必须, 默认是true 是否显示组件
cssurl string 非必须 远程css的地址, 如果自己确定这个地址有css文件可以使用该属性
name string 非必须 远程vue组件的名字
loadType 'xhr' 或 'script' 非必须, 默认是script 加载远程组件的方式, 使用xhr有跨域风险, 当存在跨域风险时候会强制使用script方式加载

Feature

  • 加载远程vue或react组件
  • 加载本地vue组件
  • 跨域加载
  • 静态资源加载
  • css样式隔离

TODO

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

可能存在的问题

  1. 样式隔离使用的是shadow dom的方式, 所以暂时不支持ie
  2. 静态资源在不做任何处理的情况下只支持通过src属性加载的资源, 比如image啥的, 对于类似tty之类的js无法处理的静态资源, 可以通过提前约定publicPath的方式加载。比如:
/** 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属性加载的静态资源
 */
  1. vue-cli提供的构件库的方式默认是会将css文件单独提取出来, 可以通过cssurl属性加载远程的css, 也可以通过inline的方式把css放进js文件里:
// vue-cli的vue.config.js
module.exports = {
  css: {
    extract: false,
  },
}
  1. 请大佬们多提bug, 感激不尽(方便的话顺便点个星星吧, 谢谢大佬们!)