简体中文

Modern.js

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

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

支持

modern.js ^2.56.1
包含服务器端渲染（SSR）

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

快速开始

安装

你可以通过如下的命令安装插件：

npm

yarn

pnpm

bun

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

应用插件

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

modern.config.ts

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

export default defineConfig({
  dev: {
    port: 3005,
  },
  runtime: {
    router: true,
  },
  // moduleFederationPlugin 是 modern.js 的插件，可以对构建/运行时做一定的修改
  plugins: [appTools(), moduleFederationPlugin()],
});

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

module-federation.config.ts

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

服务端渲染（SSR）

注意

为更好的性能体验，Module Federation X Modern.js SSR 仅支持 stream SSR 。

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

组件级别数据获取

参考数据获取。

其中 Modern.js 插件在 @module-federation/modern-js/react 重导出了 @module-federation/bridge-react ，因此你不需要额外安装。

API

@module-federation/modern-js 在子路径 runtime 重导出了 @module-federation/modern-js/runtime ，你可以使用 @module-federation/modern-js/runtime 来获取 MF Runtime。

配置

ssr

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

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

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

modern.config.ts

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

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

fetchServerQuery

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

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

#Modern.js

#支持

#快速开始

#安装

#应用插件

#服务端渲染（SSR）

#组件级别数据获取

#API

#配置

#ssr

#fetchServerQuery