#模块联邦

import { 
const pluginModuleFederation: (moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS) => RsbuildPluginpluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { 
const pluginReact: (options?: PluginReactOptions) => RsbuildPluginpluginReact } from '@rsbuild/plugin-react';
import { 
function defineConfig(config: RslibConfig): RslibConfig (+3 overloads)
This function helps you to autocomplete configuration types.
It accepts a Rslib config object, or a function that returns a config.defineConfig } from '@rslib/core';

export default 
function defineConfig(config: RslibConfig): RslibConfig (+3 overloads)
This function helps you to autocomplete configuration types.
It accepts a Rslib config object, or a function that returns a config.defineConfig({
  
RslibConfig.lib: LibConfig[]lib: [
    // ... 其他 format
    {
      
LibConfig.format?: Format | undefined
Output format for the generated JavaScript files.
@defaultValue'esm'@seehttps://rslib.rs/config/lib/formatformat: 'mf',
      
LibConfig.output?: RslibOutputConfig | undefined
Options for build outputs.
@inheritdocoutput: {
        
OutputConfig.distPath?: string | DistPathConfig | undefined
Set the directory of the output files.
Rsbuild will emit files to the specified subdirectory according to the file type.

string: Set the root output directory to a specific path, equivalent to distPath.root.
object: Set the output directory for each file type.
distPath: './dist/mf',
        // production 时, 在这里使用线上 assetPrefix
        
OutputConfig.assetPrefix?: LiteralUnion<"auto", string> | undefined
When using CDN in the production,
you can use this option to set the URL prefix of static assets,
similar to the output.publicPath config of Rspack.
auto means use a relative path based on file location.
@defaultserver.baseassetPrefix: 'http://localhost:3001/mf',
      },
      // Storybook 在 dev 下使用
      
EnvironmentConfig.dev?: Pick<DevConfig, AllowedEnvironmentDevKeys> | undefined
Options for local development.dev: {
        
assetPrefix?: boolean | LiteralUnion<"auto", string> | undefined
Set the URL prefix of static assets in development mode,
similar to the output.publicPath
config of Rspack.
@defaultserver.baseassetPrefix: 'http://localhost:3001/mf',
      },
      
EnvironmentConfig.plugins?: RsbuildPlugins | undefined
Configure Rsbuild plugins.plugins: [
        
function pluginModuleFederation(moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS): RsbuildPluginpluginModuleFederation(
          {
            
ModuleFederationPluginOptions.name?: string | undefined
The name of the container.name: 'rslib_provider',
            
ModuleFederationPluginOptions.exposes?: Exposes | undefined
Modules that should be exposed by this container. When provided, property name is used as public name, otherwise public name is automatically inferred from request.exposes: {
              // 这里添加 expose
            },
            // 此处无法添加 "remote"，因为你可能会在一次构建中构建 "esm" 或 "cjs" 产物。
            // 如果你希望 Rslib 包使用远程模块，请参考下面。
            
ModuleFederationPluginOptions.shared?: Shared | undefined
Modules that should be shared in the share scope. When provided, property names are used to match requested modules in this compilation.shared: {
              
react: {
    singleton: true;
}
react: {
                
SharedConfig.singleton?: boolean | undefined
Allow only a single version of the shared module in share scope (disabled by default).singleton: true,
              },
              'react-dom': {
                
SharedConfig.singleton?: boolean | undefined
Allow only a single version of the shared module in share scope (disabled by default).singleton: true,
              },
            },
          },
          {},
        ),
      ],
    },
  ],
  // Storybook 在 dev 下使用
  
RsbuildConfig.server?: ServerConfig | undefined
Options for the Rsbuild server,
will take effect during local development and preview.server: {
    
ServerConfig.port?: number | undefined
Specify a port number for Rsbuild server to listen.
@default3000port: 3001,
  },
  
RslibConfig.output?: RslibOutputConfig | undefined
Options for build outputs.
@inheritdocoutput: {
    
RslibOutputConfig.target?: RsbuildTarget | undefined
Setting the build target for Rsbuild.
@override@default'node'target: 'web',
  },
  
EnvironmentConfig.plugins?: RsbuildPlugins | undefined
Configure Rsbuild plugins.plugins: [
function pluginReact(options?: PluginReactOptions): RsbuildPluginpluginReact()],
});

import { 
const pluginModuleFederation: (moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS) => RsbuildPluginpluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { 
function defineConfig(config: RsbuildConfig): RsbuildConfig (+3 overloads)
This function helps you to autocomplete configuration types.
It accepts a Rsbuild config object, or a function that returns a config.defineConfig } from '@rsbuild/core';
import { 
const pluginReact: (options?: PluginReactOptions) => RsbuildPluginpluginReact } from '@rsbuild/plugin-react';

export default 
function defineConfig(config: RsbuildConfig): RsbuildConfig (+3 overloads)
This function helps you to autocomplete configuration types.
It accepts a Rsbuild config object, or a function that returns a config.defineConfig({
  
EnvironmentConfig.plugins?: RsbuildPlugins | undefined
Configure Rsbuild plugins.plugins: [
    
function pluginReact(options?: PluginReactOptions): RsbuildPluginpluginReact(),
    
function pluginModuleFederation(moduleFederationOptions: ModuleFederationOptions, rsbuildOptions?: RSBUILD_PLUGIN_OPTIONS): RsbuildPluginpluginModuleFederation(
      {
        
ModuleFederationPluginOptions.name?: string | undefined
The name of the container.name: 'rsbuild_host',
        
ModuleFederationPluginOptions.remotes?: Remotes | undefined
Container locations and request scopes from which modules should be resolved and loaded at runtime. When provided, property name is used as request scope, otherwise request scope is automatically inferred from container location.remotes: {
          
rslib: stringrslib: 'rslib@http://localhost:3001/mf/mf-manifest.json',
        },
        
ModuleFederationPluginOptions.shared?: Shared | undefined
Modules that should be shared in the share scope. When provided, property names are used to match requested modules in this compilation.shared: {
          
react: {
    singleton: true;
}
react: {
            
SharedConfig.singleton?: boolean | undefined
Allow only a single version of the shared module in share scope (disabled by default).singleton: true,
          },
          'react-dom': {
            
SharedConfig.singleton?: boolean | undefined
Allow only a single version of the shared module in share scope (disabled by default).singleton: true,
          },
        },
        // 开启这个当 Rslib 产物为 'production' 模式， 但是宿主应用是 'development' 模式。
        // 参考链接: https://rslib.rs/guide/advanced/module-federation#faqs
        
ModuleFederationPluginOptions.shareStrategy?: SharedStrategy | undefined
load shared strategy(defaults to 'version-first').shareStrategy: 'loaded-first',
      },
      {},
    ),
  ],
});

import { dirname, join } from 'node:path';
import type { StorybookConfig } from 'storybook-react-rsbuild';

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  framework: {
    name: getAbsolutePath('storybook-react-rsbuild'),
    options: {},
  },
  addons: [
    {
      name: getAbsolutePath('storybook-addon-rslib'),
      options: {
        rslib: {
          include: ['**/stories/**'],
        },
      },
    },
    {
      name: '@module-federation/storybook-addon/preset',
      options: {
        // 在添加 rslib module manifest 给 storybook dev
        // 我们在上面已经设置了 dev.assetPrefix 和 server.port 到 3001 在 rslib.config.ts
        remotes: {
          'rslib-module':
            //还可以在这里添加 storybook 的 shared
            // shared: {}
            'rslib-module@http://localhost:3001/mf/mf-manifest.json',
        },
      },
    },
  ],
};

export default config;

import React from 'react';
// 在这里加载远程模块，Storybook 相当于宿主应用.
import { Counter } from 'rslib-module';

const Component = () => <Counter />;

export default {
  title: 'App Component',
  component: Component,
};

export const Primary = {};

import { init, loadRemote } from '@module-federation/enhanced/runtime';
import { Suspense, createElement, lazy } from 'react';

init({
  name: 'rslib_provider',
  remotes: [
    {
      name: 'mf_remote',
      entry: 'http://localhost:3002/mf-manifest.json',
    },
  ],
});

export const Counter: React.FC = () => {
  return (
    <div>
      <Suspense fallback={<div>loading</div>}>
        {createElement(
          lazy(
            () =>
              loadRemote('mf_remote') as Promise<{
                default: React.FC;
              }>,
          ),
        )}
      </Suspense>
    </div>
  );
};

pluginModuleFederation({
  // ...
  shareStrategy: 'loaded-first',
}, {}),

export default defineConfig({
  lib: [
    {
      format: 'mf',
      // ...
      tools: {
        rspack(config) {
          config.experiments = {
            outputModule: true,
          };
        },
      },
    },
  ],
});