React加载vue的微前端组件

基于single-spa原理，实现react项目加载vue组件

demo 体验

git clone [email protected]
cd mircro-tech
npm install
npm run start

使用方式

npm install --save micro-tech

  /** 加载远程组件 **/
  import React from 'react';
  import VueFrame from 'micro-tech';
  const Test = () => (
    <div>
      <VueIFrame jsurl="http://originPath/vueComponent.umd.js"/>
    </div>
  )

  /** 加载本地组件 **/
  import React from 'react';
  import VueFrame from 'micro-tech';
  import VueComponent from './vueComponent.vue';
  const Test = () => (
    <div>
      <VueFrame componet={VueComponent} />
    </div>
  )

  /** 也可以加载一个远程的react组件 **/
  import React from 'react';
  import { ReactFrame } from 'micro-tech';
  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属性加载的静态资源
 */

3. vue-cli提供的构件库的方式默认是会将css文件单独提取出来, 可以通过cssurl属性加载远程的css, 也可以通过inline的方式把css放进js文件里:

// vue-cli的vue.config.js
module.exports = {
  css: {
    extract: false,
  },
}

4. 请大佬们多提bug, 感激不尽(方便的话顺便点个星星吧, 谢谢大佬们!)