Modern.js
环境准备
Node.js
在开始使用前，你需要安装 Node.js，并保证 Node.js 版本不低于 16.2.0，我们推荐使用 Node.js 18 的 LTS 版本。
你可以通过以下命令检查当前使用的 Node.js 版本：
如果你当前的环境中尚未安装 Node.js，或是安装的版本低于 16，可以通过 nvm 或 fnm 安装需要的版本。
下面是通过 nvm 安装 Node.js 18 LTS 版本的例子：
# 安装 Node.js 18 的长期支持版本 nvm install 18 --lts # 将刚安装的 Node.js 18 设置为默认版本 nvm alias default 18 # 切换到刚安装的 Node.js 18 nvm use 18
nvm 和 fnm
nvm 和 fnm 都是 Node.js 版本管理工具。相对来说，nvm 较为成熟和稳定，而 fnm 是使用 Rust 实现的，比 nvm 提供了更好的性能。
此外，在安装 nvm 或 fnm 后，然后只要仓库根目录下有内容为 lts/hydrogen 的 .nvmrc 文件，进入这个仓库时就会自动安装或切换到正确的 Node.js 版本。
pnpm
推荐使用 pnpm 来管理依赖：
NOTE
Modern.js 同样支持使用 yarn、npm 进行依赖管理。
创建项目
Modern.js 提供了 @modern-js/create 工具来创建项目，不需要全局安装，直接使用 npx 按需运行即可。
创建消费者
npx @modern-js/create@latest modern-consumer
创建生产者
npx @modern-js/create@latest modern-provider
安装插件
Module Federation 为 Modern.js 提供了 配套的插件 @module-federation/modern-js。
pnpm add @module-federation/modern-js
设置模块联邦配置
生产者
1. 创建配置文件
在项目根目录创建 module-federation.config.ts 文件，并写入下列内容：
module-federation.config.ts
import { createModuleFederationConfig } from '@module-federation/modern-js'; export default createModuleFederationConfig({ name: 'provider', filename: 'remoteEntry.js', exposes: { './Image': './src/components/Image.tsx', }, shared: { react: { singleton: true }, 'react-dom': { singleton: true }, }, });
2. 应用插件
在 modern.config.ts 应用 @module-federation/modern-js：
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({ runtime: { router: true, }, server: { ssr: { mode: 'stream', }, port: 3006, }, plugins: [appTools(), moduleFederationPlugin()], });
3. 创建导出组件
创建文件 src/components/Image.tsx ，内容如下：
Image.tsx
import React from 'react'; import styles from './Image.module.css'; export default (): JSX.Element => ( <div id="remote-components" style={{ backgroundColor: '#1ee9c1', color: 'lightgrey', padding: '1rem', }} > <h2> <strong>remote</strong> image </h2> <button id="remote-components-button" style={{ marginBottom: '1rem' }} onClick={() => alert('[remote-components] Client side Javascript works!')} > Click me to test i'm interactive! </button> <img id="remote-components-image" src="https://module-federation.io/module-federation-logo.svg" style={{ width: '100px' }} alt="serge" /> <button className={styles['button']}>Button from remote</button> </div> );
并创建对应的样式文件，内容如下：
Image.module.css
.button { background: red; }
消费者
1. 创建配置文件
在项目根目录创建 module-federation.config.ts 文件，并写入下列内容：
module-federation.config.ts
import { createModuleFederationConfig } from '@module-federation/modern-js'; export default createModuleFederationConfig({ name: 'consumer', remotes: { remote: 'provider@http://localhost:3006/mf-manifest.json', }, shared: { react: { singleton: true }, 'react-dom': { singleton: true }, }, });
2. 应用插件
在 modern.config.ts 应用 @module-federation/modern-js：
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({ runtime: { router: true, }, server: { ssr: { mode: 'stream', }, port: 3007, }, plugins: [appTools(), moduleFederationPlugin()], });
3. 引用类型
在 tsconfig.json 添加 paths 以获取生产者的类型：
{ "compilerOptions": { "paths": { "*": ["./@mf-types/*"] } } }
4. 消费生产者
修改入口页面（src/routes/page.tsx），引用生产者提供的组件，内容如下：
page.tsx
import ProviderImage from 'remote/Image'; import './index.css'; const Index = () => ( <div className="container-box"> <ProviderImage /> </div> ); export default Index;
CSS 闪烁问题
启动项目访问 http://localhost:3007/，发现SSR 正常工作，页面可以正常渲染，但是会有样式闪烁的问题。
这是因为生产者的样式文件无法注入到对应的 html 中。
此问题可以通过使用 @module-federation/modern-js 提供的 createremotessrcomponent 解决。
修改消费者引用生产者处的代码（src/routes/page.tsx）：
page.tsx
import { getInstance } from '@module-federation/modern-js/runtime'; import { createLazyComponent } from '@module-federation/modern-js/react' import './index.css'; const RemoteSSRComponent = createLazyComponent({ instance: getInstance(), loader: () => import('remote/Image'), loading: 'loading...', export: 'default', fallback: ({ error }) => { if (error instanceof Error && error.message.includes('not exist')) { return <div>fallback - not existed id</div>; } return <div>fallback</div>; }, }); const Index = () => ( <div className="container-box"> <RemoteSSRComponent /> </div> ); export default Index;
修改后重新访问页面，可以观测返回的 html 中会自动注入生产者的样式文件，从而解决 CSS 闪烁问题。
