Federation Runtime#

type InitOptions {
    //当前消费者的名称
    name: string;
    // 依赖的远程模块列表
    // 使用 version 内容的时候需要配合 snapshot 使用，该内容还在施工中
    remotes: Array<RemoteInfo>;
    // 当前消费者需要共享的依赖项列表
    // 当使用构建插件时，用户可以在构建插件中配置需要共享的依赖项，而构建插件会将需要共享的依赖项注入到运行时共享配置中
    // Shared 在运行时传入时必须在版本实例引用中手动传入，因为它不能在运行时直接传入。
    shared?: {
      [pkgName: string]: ShareArgs | ShareArgs[];
    };
  };

type ShareArgs =
  | (SharedBaseArgs & { get: SharedGetter })
  | (SharedBaseArgs & { lib: () => Module });

type SharedBaseArgs = {
  version: string;
  shareConfig?: SharedConfig;
  scope?: string | Array<string>;
  deps?: Array<string>;
  strategy?: 'version-first' | 'loaded-first';
};

type SharedGetter = (() => () => Module) | (() => Promise<() => Module>);

type RemoteInfo = (RemotesWithEntry | RemotesWithVersion) & {
   alias?: string;
};

interface RemotesWithVersion {
   name: string;
   version: string;
}

interface RemotesWithEntry {
   name: string;
   entry: string;
}

type ShareInfos = {
   // 依赖的包名、依赖的基本信息和共享策略
   [pkgName: string]: Share;
};

type Share = {
   // 共享依赖的版本
   version: string;
   // 当前依赖再被哪些模块消费
   useIn?: Array<string>;
   // 共享依赖来自哪个模块?
   from?: string;
   // 获取共享依赖实例的工厂函数。当没有其他已经存在的依赖，将加载它自己的共享依赖项。
   lib: () => Module;
   // 共享策略，将使用什么策略来决定依赖项是否复用
   shareConfig?: SharedConfig;
   // 共享依赖项所在的作用域下，默认值为 default
   scope?: string | Array<string>;
};

import { init, preloadRemote } from '@module-federation/enhanced/runtime';

init({
  name: '@demo/preload-remote',
  remotes: [
    {
      name: '@demo/sub1',
      entry: 'http://localhost:2001/vmok-manifest.json',
    },
    {
      name: '@demo/sub2',
      entry: 'http://localhost:2002/vmok-manifest.json',
    },
    {
      name: '@demo/sub3',
      entry: 'http://localhost:2003/vmok-manifest.json',
    },
  ],
});

// Preload @demo/sub1 模块
// 过滤资源名称中包含 ignore 的资源信息
// 只预加载子依赖的 @demo/sub1-button 模块
preloadRemote([
  {
    nameOrAlias: '@demo/sub1',
    filter(assetUrl) {
      return assetUrl.indexOf('ignore') === -1;
    },
    depsRemote: [{ nameOrAlias: '@demo/sub1-button' }],
  },
]);

// Preload @demo/sub2 模块
// 预加载 @demo/sub2 下的所有 expose
// 预加载 @demo/sub2 的同步和异步资源
preloadRemote([
  {
    nameOrAlias: '@demo/sub2',
    resourceCategory: 'all',
  },
]);

// 预加载 @demo/sub3 模块的 add expose
preloadRemote([
  {
    nameOrAlias: '@demo/sub3',
    resourceCategory: 'all',
    exposes: ['add'],
  },
]);

import { init, registerRemotes } from '@module-federation/enhanced/runtime';

init({
  name: '@demo/register-new-remotes',
  remotes: [
    {
      name: '@demo/sub1',
      entry: 'http://localhost:2001/mf-manifest.json',
    },
  ],
});

// 添加新的远程 @demo/sub2
registerRemotes([
  {
    name: '@demo/sub2',
    entry: 'http://localhost:2002/mf-manifest.json',
  },
]);

// 覆盖以前的远程 @demo/sub1
registerRemotes([
  {
    name: '@demo/sub1',
    entry: 'http://localhost:2003/mf-manifest.json',
  },
], { force: true });

import { registerPlugins } from '@module-federation/enhanced/runtime'
import runtimePlugin from 'custom-runtime-plugin.ts';

registerPlugins([runtimePlugin()]);