RAPIOP - Run All Project In One Project/Place

A simple micro frontend library

介绍

当公司有数十、甚至上百的前端项目，终于由于难以管理维护，想要统一管理的时候，最先能想到的大概是将所有的项目再统一的平台上全部重构，然而这必然会消耗大量的人力，甚至做到一半后因为各种高优先级任务而不了了之。

RAPIOP 出现的初心就是，让任意技术栈的前端项目（目前只支持 SPA 项目，多页应用后续计划支持），只需通过简单的改动（10 分钟 - 30 分钟），便可以无痛的和其它项目共存，大大减少前期的重构人力。在所有项目介入后，便可以方便的对项目进行无痛迭代更新，直至统一化。

最近一两年微前端的概念兴起，RAPIOP 能够很好的承载各种微前端设计。

特点

• 支持 tapable hooks，方便插件化，方便各个生命周期的拦截和统一管理
• 体积小，无侵入，主要功能通过插件提供
• 通过 iframe 插件可以达到彻底的隔离，可支持各种古老的 spa 项目（backbone，jQuery 等），并且支持路由同步和切换缓存
• 支持多实例
• 提供了丰富的插件，组装完成各种功能
  • frame - 方便外层骨架和主逻辑解藕
  • dependence - 方便统一提供公共依赖，减少项目体积
  • iframe - 通过 iframe 来彻底隔离某些项目，避免被老项目搞挂
  • sandbox - 通过简单的 sandbox 实现来隔离全局变量的变更，避免项目间的互相影响（由于依赖 Proxy 等对兼容性要求较高，对性能有一定影响）
  • prefetch - 通过 prefetch 来预加载特定项目资源（如常用产品）提升体验

能做什么

• 快速的将各种不同技术栈的前端 SPA 项目聚合在一起
• 可通过 iframe 和 沙箱隔离各项目的代码，避免干扰
• 方便各项目共享公共文件
• 方便的拦截项目加载、渲染等各个环节，做统一的权限配置、认证
• iframe 也能缓存和同步路由，提升性能、体验
• 等等

如何使用

• 新建一个前端项目作为所有项目的容器，也可选择一个已有项目

• 项目中安装 rapiop

  1yarn add @ucloud-fe/rapiop

• 参考examples/basic/index.ts，创建一个新的实例。

  1import rapiop from "@ucloud-fe/rapiop";
  2import { createBrowserHistory } from "history";
  3
  4// 路由可自定义，或通过其它方式实现，非必要
  5const history = createBrowserHistory();
  6
  7const app = rapiop({
  8    // 产品配置，支持函数、异步函数
  9    config: {
  10        demo: {
  11            prefix: "/demo/"
  12        },
  13        "demo-2": {
  14            prefix: "/demo-2/"
  15        }
  16    },
  17    // 项目的挂载点，异步可使用 FramePlugin，或使用 hooks
  18    mountDOM: document.getElementById("mount-dom"),
  19    // 自定义路由
  20    history
  21});

  config为必要参数

• 注册各个子项目

  1app.register(
  2    "home",
  3    (mountDOM: Element) => {
  4        const content = document.createElement("div");
  5        content.innerText = "this is my home";
  6        mountDOM.appendChild(content);
  7        console.log("home mounted");
  8    },
  9    (mountDOM: Element) => {
  10        mountDOM.innerHTML = null;
  11        console.log("home unmounted");
  12    }
  13);
  14
  15app.register(
  16    "demo",
  17    (mountDOM: Element) => {
  18        const content = document.createElement("div");
  19        content.innerText = "this is my demo";
  20        mountDOM.appendChild(content);
  21        console.log("demo mounted");
  22    },
  23    (mountDOM: Element) => {
  24        mountDOM.innerHTML = null;
  25        console.log("demo unmounted");
  26    }
  27);
  28
  29app.register(
  30    "demo-2",
  31    (mountDOM: Element) => {
  32        const content = document.createElement("div");
  33        content.innerText = "this is my demo-2";
  34        mountDOM.appendChild(content);
  35        console.log("demo-2 mounted");
  36    },
  37    (mountDOM: Element) => {
  38        mountDOM.innerHTML = null;
  39        console.log("demo-2 unmounted");
  40    }
  41);

  home为默认页面 key，若 config 中无可匹配路由的项目，则渲染该页面，可使用option.fallbackProjectKey来自定义

  启动后项目根据 config 中的 url 规则匹配的地址进入对应项目

• config 中传入 files，可支持在路由切换时自动加载文件然后执行挂载，可参考 examples/advance

文档

hooks

等待施工 👷‍👷