o-modules v1.0.15

oModules

Features

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

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,
  });
}