Skip to content

Run all project in one place/project

License

Notifications You must be signed in to change notification settings

UMCloud-FE/rapiop

This branch is up to date with ZxBing0066/rapiop:master.

Folders and files

NameName
Last commit message
Last commit date
Dec 5, 2019
Sep 30, 2020
Oct 23, 2019
Nov 24, 2021
Dec 5, 2019
Apr 24, 2019
Apr 24, 2019
Jun 10, 2020
Apr 9, 2020
Apr 8, 2020
Dec 13, 2019
Apr 23, 2019
Mar 10, 2020
Jun 10, 2020
Jun 10, 2020
Nov 24, 2021
Apr 24, 2019
Jun 10, 2020
Feb 18, 2022

Repository files navigation

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

    yarn add @rapiop/rapiop
  • 参考examples/basic/index.ts,创建一个新的实例。

    import rapiop from "@rapiop/rapiop";
    import { createBrowserHistory } from "history";
    
    // 路由可自定义,或通过其它方式实现,非必要
    const history = createBrowserHistory();
    
    const app = rapiop({
        // 产品配置,支持函数、异步函数
        config: {
            demo: {
                prefix: "/demo/"
            },
            "demo-2": {
                prefix: "/demo-2/"
            }
        },
        // 项目的挂载点,异步可使用 FramePlugin,或使用 hooks
        mountDOM: document.getElementById("mount-dom"),
        // 自定义路由
        history
    });

    config为必要参数

  • 注册各个子项目

    app.register(
        "home",
        (mountDOM: Element) => {
            const content = document.createElement("div");
            content.innerText = "this is my home";
            mountDOM.appendChild(content);
            console.log("home mounted");
        },
        (mountDOM: Element) => {
            mountDOM.innerHTML = null;
            console.log("home unmounted");
        }
    );
    
    app.register(
        "demo",
        (mountDOM: Element) => {
            const content = document.createElement("div");
            content.innerText = "this is my demo";
            mountDOM.appendChild(content);
            console.log("demo mounted");
        },
        (mountDOM: Element) => {
            mountDOM.innerHTML = null;
            console.log("demo unmounted");
        }
    );
    
    app.register(
        "demo-2",
        (mountDOM: Element) => {
            const content = document.createElement("div");
            content.innerText = "this is my demo-2";
            mountDOM.appendChild(content);
            console.log("demo-2 mounted");
        },
        (mountDOM: Element) => {
            mountDOM.innerHTML = null;
            console.log("demo-2 unmounted");
        }
    );

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

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

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

文档

hooks

等待施工 👷‍👷

About

Run all project in one place/project

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 50.8%
  • JavaScript 48.4%
  • Shell 0.8%