Nerfed Poet Melancholia

    o-modules
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.15 • Public • Published

    oModules

    Features

    • [x] 支持 TypeScript 类型提示
    • [x] 支持加载多个服务器的远程模块
    • [x] 按需加载远程模块
    • [ ] 开发环境快速联调

    Usage

    Step 1

    提供方需要导出模块的资源列表以便消费方使用,格式如下:

    {
      "CustomerActions": {
        "js": ["static/js/CustomerActions-b23edb27.js"],
        "css": [
          "static/css/entry-cb2eef2e.css",
          "static/css/api-9fb5ff20.css",
          "static/css/index.vue_vue_type_style_index_0_lang-265f4a95.css",
          "static/css/deal-data-d7649152.css",
          "static/css/conf-c7843131.css",
          "static/css/index.vue_vue_type_style_index_0_lang-04fd6d71.css"
        ]
      },
      "Dynamic": {
        "js": ["static/js/Dynamic-def41451.js"],
        "css": [
          "static/css/entry-cb2eef2e.css",
          "static/css/api-9fb5ff20.css",
          "static/css/index.vue_vue_type_style_index_0_lang-265f4a95.css",
          "static/css/ScheduleForm.vue_vue_type_style_index_0_lang-dc56af3c.css",
          "static/css/Index.vue_vue_type_style_index_0_scoped_true_lang-35cb33bf.css",
          "static/css/dtc-track-title.vue_vue_type_style_index_0_lang-87d55cf5.css",
          "static/css/index.vue_vue_type_style_index_0_scoped_true_lang-089519f8.css",
          "static/css/FollowModal.vue_vue_type_style_index_0_lang-79a841f9.css"
        ]
      },
      "Info": {
        "js": ["static/js/Info-169de637.js"],
        "css": [
          "static/css/entry-cb2eef2e.css",
          "static/css/api-9fb5ff20.css",
          "static/css/InfoField-cbffb9bc.css",
          "static/css/deal-data-d7649152.css",
          "static/css/conf-c7843131.css",
          "static/css/index.vue_vue_type_style_index_0_lang-265f4a95.css",
          "static/css/Index.vue_vue_type_style_index_0_scoped_true_lang-35cb33bf.css",
          "static/css/index.vue_vue_type_style_index_0_scoped_true_lang-089519f8.css",
          "static/css/index.vue_vue_type_style_index_0_lang-04fd6d71.css",
          "static/css/ScheduleForm.vue_vue_type_style_index_0_lang-dc56af3c.css",
          "static/css/dtc-track-title.vue_vue_type_style_index_0_lang-87d55cf5.css",
          "static/css/FollowModal.vue_vue_type_style_index_0_lang-79a841f9.css"
        ]
      },
      "Tags": {
        "js": ["static/js/Tags-8e020b71.js"],
        "css": [
          "static/css/entry-cb2eef2e.css",
          "static/css/api-9fb5ff20.css",
          "static/css/index.vue_vue_type_style_index_0_lang-04fd6d71.css",
          "static/css/index.vue_vue_type_style_index_0_lang-265f4a95.css",
          "static/css/deal-data-d7649152.css",
          "static/css/conf-c7843131.css",
          "static/css/InfoField-cbffb9bc.css",
          "static/css/Index.vue_vue_type_style_index_0_scoped_true_lang-35cb33bf.css",
          "static/css/index.vue_vue_type_style_index_0_scoped_true_lang-089519f8.css",
          "static/css/ScheduleForm.vue_vue_type_style_index_0_lang-dc56af3c.css",
          "static/css/dtc-track-title.vue_vue_type_style_index_0_lang-87d55cf5.css",
          "static/css/FollowModal.vue_vue_type_style_index_0_lang-79a841f9.css"
        ]
      }
    }

    Setp 2

    在消费方处使用 @okki/oModules

    import oModules from "@okki/oModules";
    
    // 初始化 oModules 的安装
    oModules.init({
      remote: "https://127.0.0.1:5050", // 服务器地址 or 域名地址
      manifestPath: "/vite-assets.json", // manifest 的相对路径
      group: "Valar", // 该远程服务器下的所有模块存放的分组
    });
    
    oModules.init({
      remote: "https://127.0.0.1:5055", // 服务器地址 or 域名地址
      manifestPath: "/webpack-assets.json", // manifest 的相对路径
      group: "TMS", // 该远程服务器下的所有模块存放的分组
    });

    Step 3

    基于提供方暴露的调用方式,进行消费使用

    import { oFetchModule } from "@okki/oModules";
    
    // 在 JavaScript 执行时预加载指定模块的资源
    const dynamic = await oFetchModule("Dynamic", { group: "Valar" });
    dynamic({
      container: ".remote-component-container",
      props: {
        companyInfo: props.companyInfo,
        isOwner: props.isOwner,
        companyId: props.companyInfo?.company_id,
      },
      userInfo: userInfo?.value,
    });
    import { oFetchModule } from "@okki/oModules";
    
    // 按需加载模块资源
    function onClick() {
      console.log("Dynamic import module~~~");
    
      const dynamic = await oFetchModule("Dynamic", { group: "Valar" });
      dynamic({
        container: ".remote-component-container",
        props: {
          companyInfo: props.companyInfo,
          isOwner: props.isOwner,
          companyId: props.companyInfo?.company_id,
        },
        userInfo: userInfo?.value,
      });
    }

    Keywords

    none

    Install

    npm i o-modules

    DownloadsWeekly Downloads

    8

    Version

    1.0.15

    License

    ISC

    Unpacked Size

    12.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • xavierluo