是否用NX构建React+Module Federation微前端？及创建CSR应用方法

是否应该选用NX？ #

绝对推荐。原因如下：

• NX对Module Federation有原生且深度的支持，无需额外配置复杂的Webpack脚本就能实现微前端模块共享、远程加载。
• 作为成熟的monorepo工具，它能帮你统一管理多个微前端应用、共享库，内置的缓存机制、任务并行执行能大幅提升开发和构建效率。
• 你已经有NX实现SSR的经验，继续使用NX能保持技术栈一致，降低学习和维护成本，团队协作也更顺畅。
• NX提供了丰富的代码生成器、linting、测试工具链，能规范微前端项目的代码质量和开发流程。

如何用NX创建客户端渲染（CSR）应用？ #

假设你已经有一个NX工作区（如果没有，先执行npx create-nx-workspace@latest初始化，选择react相关预设即可），按以下步骤操作：

1. 创建React CSR应用 #

在工作区根目录执行命令：

npx nx g @nx/react:app my-csr-app --style=css --routing --bundler=webpack

• my-csr-app是你的应用名称，可替换成实际名称
• --style指定样式方案（可选css/scss/less等）
• --routing如果需要路由就加上，不需要可省略
• --bundler=webpack确保用Webpack，因为Module Federation依赖Webpack

2. 配置Module Federation #

NX已经内置了Module Federation的配置能力，你可以通过两种方式配置：

• 方式一：用NX原生配置
  在应用的project.json的targets.build.options里添加相关配置：

{
  "targets": {
    "build": {
      "options": {
        "mf": {
          "type": "host", // 或"remote"，根据你的微前端角色设置
          "name": "myCsrApp",
          "remotes": ["remote-app-name"], // 作为host时，填写远程应用名称
          "shared": {
            "react": { "singleton": true, "strictVersion": true },
            "react-dom": { "singleton": true, "strictVersion": true }
          }
        }
      }
    }
  }
}

• 方式二：修改Webpack配置文件
  直接修改应用根目录的webpack.config.js，添加Module Federation插件：

const { composePlugins, withNx } = require('@nx/webpack');
const { withReact } = require('@nx/react');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = composePlugins(withNx(), withReact(), (config) => {
  config.plugins.push(
    new ModuleFederationPlugin({
      name: 'myCsrApp',
      filename: 'remoteEntry.js',
      exposes: {
        // 作为remote应用时，暴露需要共享的组件/模块
        './Button': './src/lib/Button.tsx'
      },
      remotes: {
        // 作为host应用时，引入远程应用的入口文件
        remoteApp: 'remoteApp@http://localhost:4201/remoteEntry.js'
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.2.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.2.0' }
      }
    })
  );
  return config;
});

3. 启动应用 #

执行命令启动CSR应用：

npx nx serve my-csr-app

如果是远程应用，启动后会生成remoteEntry.js，供host应用加载。

4. 验证Module Federation #

• 如果是host应用，在组件中引入远程模块：

import { lazy, Suspense } from 'react';

const RemoteButton = lazy(() => import('remoteApp/Button'));

export function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <RemoteButton />
    </Suspense>
  );
}

• 运行后检查是否能正常加载远程组件，确认Module Federation配置生效。

内容的提问来源于stack exchange，提问作者sheida