微前端配置中心

目前使用 Apollo 进行存储配置

背景

想要实现的功能

基座应用中会初始化所有子菜单的菜单项

• 通过Hover时，能够查看所有的有效菜单
• 基座应用点击能够直接加载对应页面
• 所有菜单控制在基座应用，保证菜单一致化
• 独立系统管理子应用，用于管理权限、菜单、角色等

现实中的样子

在使用微前端重构业务项目时，有以下几个问题：

• 老项目权限设计原因，菜单树中包含了业务数据，通过登陆完成后，在后续获取其他模块中的子集数据
• 老项目的菜单权限管理（所有的菜单），只是在前端进行控制展示，并未做所有菜单的入库管理。所以在其他应用中想要获取所有的菜单。是不可行的
• 目前暂时不准备重构权限管理模块，也尽量不去改动现有项目（保持稳定），仅仅是把各个模块进行拆分，并把目前要改造的工作量尽量保持在某一个应用中

所以，就有了它

• 通过 Apollo 存储各子应用的关键信息
• 基座应用获取这些关键信息进行统筹规划

如何使用

1. 新增配置文件 med.micro.config.js (获取在上传脚本中使用自定义配置)
2. 编写上传脚本
   1. 根据父应用需要的配置进行自定义编写
   2. 本工具对于错误会抛出异常，所以该脚本需要对脚本功能进行判断。具体如何，自行判断
      1. 子应用上传信息重要，必须要同步的情况。则可不捕获异常，需要中断打包（基本这个情况）
      2. 子应用配置可上传可不上传、子应用不能影响其独立运行（作为子应用可以挂掉。但是独立运行需要是好的）。则应该捕获异常，防止中断后续步骤
3. 该脚本一般在打包前进行运行
4. 添加 npm script，用于快速变更

使用时机

子应用

• 生产环境时: 在打包前，先通过该工具进行配置上传
• 开发环境时: 如果有配置相关文件进行变更，想要在基座应用反应出来，需要再次运行上传配置脚本

基座应用

• 生产环境时: 在打包前，先通过该工具进行配置获取并生成配置文件
• 开发环境时: 如果子应用有配置文件进行变更，想要在基座应用反应出来，需要重新运行项目

API

getConfig

获取当前配置信息

声明信息

  getConfig(): Promise<any>;

使用

  import MedMicroConfig from '@medlinker/med-micro-config';

  const microConfigInstance = new MedMicroConfig();
  if (!microConfigInstance.isReady) return;

  let config = await microConfigInstance.getConfig();

addConfigItem

向配置添加一个字段，暂存状态，需调用 publishConfig 进行发布

声明信息

addConfigItem(config: {
        key: string;
        value: any;
        comment?: string;
    }): Promise<void>;

使用

  import MedMicroConfig from '@medlinker/med-micro-config';

  const microConfigInstance = new MedMicroConfig();
  if (!microConfigInstance.isReady) return;

  await microConfigInstance.addConfigItem({
    key: "name",
    value: "123",
  })
  await microConfigInstance.publishConfig();

delConfigItem

删除配置中的某一个字段，暂存状态，需调用 publishConfig 进行发布

声明信息

 delConfigItem(config: {
        key: string;
    }): Promise<void>;

使用

  import MedMicroConfig from '@medlinker/med-micro-config';

  const microConfigInstance = new MedMicroConfig();
  if (!microConfigInstance.isReady) return;

  await microConfigInstance.delConfigItem({
      key: "name",
    });
  await microConfigInstance.publishConfig();

editConfigItem

更新配置的一个字段，暂存状态，需调用 publishConfig 进行发布

声明信息

  editConfigItem(config: {
      key: string;
      value: any;
      comment?: string;
  }): Promise<void>;

使用

  import MedMicroConfig from '@medlinker/med-micro-config';

  const microConfigInstance = new MedMicroConfig();
  if (!microConfigInstance.isReady) return;

  await microConfigInstance.editConfigItem({
    key: "name",
    value: "456",
  });
  await microConfigInstance.publishConfig();

publishConfig

发布配置

声明信息

  publishConfig(): Promise<void>;

使用

  import MedMicroConfig from '@medlinker/med-micro-config';

  const microConfigInstance = new MedMicroConfig();
  if (!microConfigInstance.isReady) return;

  await microConfigInstance.editConfigItem({
    key: "name",
    value: "456",
  });
  await microConfigInstance.publishConfig();

TODO

[] webpack 插件化，适用于开发模式

[] 增减监听目录，以及监听变更响应 适用于开发模式

[] 动态监听 适用于开发模式

[] test