一、准备事项

1. 安装依赖

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

2. 初始化应用资源

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

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

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

二、共享依赖

1. 查看目标资源需要的共享依赖

进入资源管理系统

选择目标资源，进入详情页后，选择已发版的版本，点击「查看版本声明」，其中「shared」键名对应的值就是目标资源分享的依赖及其版本信息。

若没有指定版本，则会直接使用宿主分享的依赖。

2. 共享本地依赖

以react、mobx2个共享依赖为例

2.1 版本>=1.8.0示例

2.1.1 生成共享上下文

import { ShareScopeGenerator } from '@cvte/resource-center-sdk'
import React from 'react';
import ReactPackage from 'react/package.json';
import * as Mobx from 'mobx';
import MobxPackage from 'mobx/package.json';

const shareScopeGen = new ShareScopeGenerator({
    webpackAppName: 'resource-center-root-app',
});
shareScopeGen.addDependency({
    key: 'react',
    version: ReactPackage.version,
    dependency: React
});
shareScopeGen.addDependency({
    key: 'mobx',
    version: MobxPackage.version,
    dependency: Mobx
})

export default shareScopeGen;

2.1.2 使用共享依赖

import { ReactRemoteLoaderComponent, Loader } from '@cvte/resource-center-sdk'
import shareScopeGen from './shareScopeGen'

const Detail = ReactRemoteLoaderComponent<any, any>(
    new Loader({
        appName: 'cir-lcp-sdk',
        name: 'cir-csb-generator',
        env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
    }),
    'Detail',
    {
        useShared: true,
        mode: 'page',
        sharedScope: shareScopeGen.toShareScope(),
    }
);

2.2 版本<1.8.0示例

2.2.1 生成共享上下文

import React from 'react';
import ReactPackage from 'react/package.json';
import * as Mobx from 'mobx';
import MobxPackage from 'mobx/package.json';

export const generateSharedScope = (config?: {
    /**
     * 当前工程的工程名称，小写英文、数字、中横线组成；
    */
    webpackAppName?: string;
}) => {
    const { webpackAppName:from = 'resource-center-root-app' } = config || {};
    return {
        react: {
            [ReactPackage.version]: {
              from,
              eager: true,
              loaded: 1,
              get: () =>
                Promise.resolve(() => ({
                  ...React,
                  // 须导出default键名，外部直接调用
                  default: React,
                })),
            },
        },
        mobx: {
            [MobxPackage.version]: {
              from,
              eager: true,
              loaded: 1,
              get: () =>
                Promise.resolve(() => ({
                  ...Mobx,
                  default: Mobx,
                })),
            },
        },
    }
}

2.2.2 使用共享依赖

import { ReactRemoteLoaderComponent, Loader, initSharedScope, loadSharedScope } from '@cvte/resource-center-sdk'
import { generateSharedScope } from './shareScopeGen'

const Detail = ReactRemoteLoaderComponent<any, any>(
    new Loader({
        appName: 'cir-lcp-sdk',
        name: 'cir-csb-generator',
        env: `${document.getElementById('ENV')?.getAttribute('value') as ILoaderResourceEnv}`,
    }),
    'Detail',
    {
        useShared: true,
        mode: 'page',
        sharedScope: async () => {
            // 获取宿主工程共享上下文域
            await loadSharedScope('default');
            const wpScope = initSharedScope('default');

            const sharedScope = generateSharedScope({
                webpackAppName: 'resource-center-root-app',
            })

            return {
                ...(wpScope||{}),
                ...(sharedScope||{}),
            }
        },
    }
);

三、配置环境

1. 增加鲸云容器环境变量

增加ENV的变量名

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

同时工程的入口文件或引导文件中，需要在页面中增加一个隐藏的input标签，存放node运行环境中的ENV变量值

示例代码：

const insertEnvELement = (env?: string) => {
    const envValue = env || `pro`;
    const envElm = document.createElement('input');
    envElm.id = `ENV`;
    envElm.value = envValue;
    envElm.setAttribute('value', envValue);
    envElm.setAttribute('type', 'hidden');
    document.body.append(envElm);
    return envElm;
}

// 调用方法
insertEnvELement(process.env.ENV);

2. 配置根应用

工程的入口文件或引导文件中，需要在页面中增加如下设置根应用的逻辑

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

示例代码：

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

const setResourceCenterRootApp = (appName: string) => {
    if (!appName) return;
    GlobalRootApp.setRootApp({
        name: appName,
    })
}

// 调用方法
setResourceCenterRootApp(`此处填写接入工程对应的应用资源名称`)

四、加载资源

与支持了webpack5的工程接入不同的是，需要在每个资源导出点加载配置中，增加sharedScope配置，将本地共享上下文（详见上文「共享本地依赖」内容）导入进加载点中。

示例代码：

sharedScope: async () => {
    // 获取宿主工程共享上下文域
    await loadSharedScope('default');
    const wpScope = initSharedScope('default');
    const localScope = generateSharedScope() // 详见上文「共享本地依赖」内容
    return {
    ...(wpScope || {}),
    ...(localScope || {}),
    }
}

普通资源载入示例

import Loader from '@cvte/resource-center-sdk';

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

const { default: expose } = awiat loader.load('导出名可在资源管理系统中查看，具体操作可见下文【资源管理系统】', {
    useShared: true,
    mode: 'page',
    sharedScope: async () => {
        // 获取宿主工程共享上下文域
        await loadSharedScope('default');
        const wpScope = initSharedScope('default');
        const localScope = generateSharedScope() // 详见上文「共享本地依赖」内容
        return {
        ...(wpScope || {}),
        ...(localScope || {}),
        }
    }
})

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',
      sharedScope: async () => {
        // 获取宿主工程共享上下文域
        await loadSharedScope('default');
        const wpScope = initSharedScope('default');
        const localScope = generateSharedScope() // 详见上文「共享本地依赖」内容
        return {
            ...(wpScope || {}),
            ...(localScope || {}),
        }
      }
    }),
});
export { Component, config };