一、准备事项

安装依赖

# 使用npm安装依赖
npm i @cvte/resource-center-sdk@1.7.28
# 或使用yarn安装依赖
yarn add @cvte/resource-center-sdk@1.7.28

如果CSB工程中

@cvte/cir-antdframe < 3.1.0-28
@cvte/cir-framework < 3.0.1-1
@cvte/cir-tools < 2.5.10-56

则请升级低于上述版本的依赖包

初始化应用资源

将当前CSB工程当作「应用资源」传至资源中心，如果之前已将该资源当作普通资源上传过资源中心，则跳过此步骤

若不了解如何用脚手架将现有工程改造为资源工程，请参考资源开发-将已有工程改造为资源

其中需注意！⚠️
「应用资源」名称应以「-app」结尾，命名格式参考：${业务域名称简写}-${应用系统名称简写}-app

二、修改webpack

修改csb工程下webpack_override.js内容

// ...其他代码
const webpack = require('webpack');

function override(_config = {}) {
  const config = {
    ..._config,
  };

  // ...其他代码

  if (!config.experiments) {
    config.experiments = {};
  }
  config.experiments.topLevelAwait = true;

  if (!config.plugins) {
    config.plugins = [];
  }
  config.plugins.push(
    new webpack.container.ModuleFederationPlugin({
      name: 'csb',
      shared: {
        '@cvte/cir-framework': {
          eager: true,
          singleton: true,
        },
        '@cvte/wuli-antd':{
          eager:true,
          singleton:true,
        },
        'ag-grid-react': {
          eager: true,
          singleton: true,
        },
        antd: {
          eager: true,
          singleton: true,
        },
        axios: {
          eager: true,
          singleton: true,
        },
        mobx: {
          eager: true,
          singleton: true,
        },
        react: {
          eager: true,
          singleton: true,
        },
        'react-dom': {
          eager: true,
          singleton: true,
        },
      },
    })
  );
  return config;
}

module.exports = override;

三、配置环境

增加鲸云容器环境变量

增加ENV的变量名

值需要根据环境填写【DEV,FAT,UAT,PRO】

修改server.js

修改csb工程下config/server.js内容

module.exports = {
    // ...其他代码
     injectData: [
        // ...其他代码 
        { key: 'ENV', value: process.env.ENV || 'fat' },
    ]
};

配置根应用

修改csb工程下app/modules/App/global.js内容

其中需要确认@cvte/resource-center-sdk依赖版本是否>=1.7.2

import { GlobalRootApp } from '@cvte/resource-center-sdk';

GlobalRootApp.setRootApp({
  name: '当前应用资源工程的资源名称',
});

四、加载资源

CSB业务模块载入示例

在CSB工程需使用远程资源的地方进行载入操作

import loadComp from '@cvte/cir-tools/comps/LoadComp';
import Loader from '@cvte/resource-center-sdk';

const config = { };

const loader = new Loader({
  appName: '【选填】资源宿主对应在资源中心中的资源名称',
  name: '资源名称可在资源管理系统中获得，具体操作可见下文【资源管理系统】',
  env: `${document.getElementById('ENV')?.getAttribute('value')}`,
});

const Component = loadComp({
  loader: () =>
    loader.load('导出名可在资源管理系统中查看，具体操作可见下文【资源管理系统】；一般业务模块入口为Router', {
      useShared: true,
      mode: 'page',
    }),
});
export { Component, config };