#Modern.js 接入概览

Modern.js 是一个基于 React 的渐进式 Web 开发框架。在字节跳动内部，Modern.js 支撑了数千个 Web 应用的研发。

Module Federation 团队与 Modern.js 团队紧密合作，并提供 @module-federation/modern-js-v3 和 @module-federation/modern-js 两个插件来帮助用户在 Modern.js 中使用 Module Federation。

推荐升级到 Modern.js v3，并优先使用 @module-federation/modern-js-v3。

#支持

• Modern.js v3：推荐使用 @module-federation/modern-js-v3
• Modern.js v2.56.1 及以上：使用 @module-federation/modern-js
• 包含服务器端渲染（SSR）

强烈推荐参考下列应用，它提供了 Modern.js 与 Module Federation 结合的最佳实践：

• 服务端渲染（SSR）
• 组件级别数据获取

#快速开始

#安装

如果使用 Modern.js v3，安装 @module-federation/modern-js-v3：

npm add @module-federation/modern-js-v3 --save

yarn add @module-federation/modern-js-v3 --save

pnpm add @module-federation/modern-js-v3 --save

bun add @module-federation/modern-js-v3 --save

如果仍在使用 Modern.js v2，安装 @module-federation/modern-js：

npm add @module-federation/modern-js --save

yarn add @module-federation/modern-js --save

pnpm add @module-federation/modern-js --save

bun add @module-federation/modern-js --save

#应用插件

下面以 Modern.js v3 为例。如果你仍在使用 Modern.js v2，将示例中的 @module-federation/modern-js-v3 替换为 @module-federation/modern-js。

在 modern.config.ts 的 plugins 中应用此插件：

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js-v3';

export default defineConfig({

  // moduleFederationPlugin 是 modern.js 的插件，可以对构建/运行时做一定的修改
  plugins: [appTools(), moduleFederationPlugin()],
});

随后创建 module-federation.config.ts 文件，并写入需要的配置：

import { createModuleFederationConfig } from '@module-federation/modern-js-v3';
export default createModuleFederationConfig({
  name: 'host',
  remotes: {
    remote: 'remote@http://localhost:3006/mf-manifest.json',
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true },
  },
});

#服务端渲染（SSR）

在 SSR 场景与 CSR 场景中使用 Module Federation 没有任何区别，开发者保持按照原有的开发行为即可。

#组件级别数据获取

参考数据获取。

在 Modern.js v3 中，组件级别数据获取的功能已经被内置在 @module-federation/modern-js-v3 插件中，不需要额外安装 @module-federation/bridge-react 来使用组件级别数据获取的功能了。

所有数据获取的 API 都被放在了 @module-federation/modern-js-v3/data-fetch 中，你可以从这个路径下引入并使用它们。

#Runtime API

所有 Module Federation 的 Runtime 相关 API 都被放在了 @module-federation/modern-js-v3/runtime 中，你可以从这个路径下引入并使用它们。

#createRemoteComponent 废弃

createRemoteComponent 参数和 createLazyComponent 完全一致，区别在于 createLazyComponent 需要注册插件后，通过实例调用。

- import { createRemoteComponent } from '@module-federation/modern-js-v3/runtime';
+ import { getInstance } from '@module-federation/modern-js-v3/runtime';
+ import { lazyLoadComponentPlugin } from '@module-federation/modern-js-v3/data-fetch';

const instance = getInstance();
// 注册 lazyLoadComponentPlugin 插件后，instance 会自动添加 createLazyComponent API
instance.registerPlugins([lazyLoadComponentPlugin()]);

- const LazyComponent = createRemoteComponent({
+ const LazyComponent = instance.createLazyComponent({
  loader: () => import('remote/Image'),
  loading: <div>loading...</div>,
  fallback: ({ error }) => {
    console.error(error)
    return <div>fallback</div>;
  },
});

const App: FC = () => {
  return <>
    <LazyComponent />
  </>;
};
export default App;

#createRemoteSSRComponent 废弃

迁移方式同 createRemoteComponent。

#配置

#ssr

• 类型：false
• 是否必填：否
• 默认值：undefined

@module-federation/modern-js-v3 会根据 modern.js config 中的 server.ssr 来自动添加 SSR 相关的构建预设。

如果当前项目仅需要在 CSR 加载 MF ，那么可以设置 ssr: false 来帮助渐进式迁移。

import { appTools, defineConfig } from '@modern-js/app-tools';
import { moduleFederationPlugin } from '@module-federation/modern-js-v3';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  server: {
    ssr: {
      mode: 'stream',
    },
  },
  plugins: [
    appTools(),
    moduleFederationPlugin({ ssr: false })
  ],
});

#fetchServerQuery

• 类型：Record<string, unknown>
• 是否必填：否
• 默认值：undefined

如果发生降级，那么会向服务端发送一个 http 请求，此时可以通过此配置来添加请求的 query。

#Modern.js v2

我们推荐使用 Modern.js v3 版本，因为它提供了更好的性能和更完善的功能，但我们也提供了 @module-federation/modern-js 插件，用于在 Modern.js v2 项目中使用 Module Federation。