javascript - 如何在不弹出的情况下使用带有 create-react-app 的 Webpack Module Federation 插件

Question

有没有办法在不弹出的情况下使用 create-react-app 来使用模块联合？
我想将我现有的 react 应用程序(使用 CRA 创建)转换为微前端。

Answer 1

Answering because this question is top for Google searches CRA with Module Federation

2022 年 1 月 25 日更新 - CRA 5 已发布，因为 CRA 5 支持 Webpack 5，因此之前的答案与 2022 年无关。
我的 GitHub template已更新到 CRA 5，只需将其用于 CRA 模块联合示例。
我已经为历史值(value)留下了答案
2021 年 11 月 17 日更新-基于此答案，我创建了 GitHub template让其他尝试与 CRA 进行模块联合的人更容易。
试试 CRACO 的 craco-module-federation 插件
看看 craco-module-federation用于 CRA 与模块联合工作的示例的 repo。
要支持模块联合，您需要 craco-module-federation CRACO 插件(或编写您自己的 CRACO 配置)以覆盖 CRA webpack 配置。
您还需要运行 react-scripts 的 alpha 版本。 ，并更新任何依赖项。
craco-module-federation是 CRACO 的插件完成所需的繁重工作。
使 CRA 和模块联合工作的步骤是:
使用支持 webpack 5 的 Create React App 5 npx create-react-app@next --scripts-version=@next --template=cra-template@next my-js-app更多信息在这里 https://github.com/facebook/create-react-app/discussions/11278
对于现有应用删除 node_modules，并安装 react-scripts 的 alpha 版本.然后解决任何依赖问题。
安装 CRACO npm install @craco/craco --save更改您的 package.json 脚本以运行 craco:

"scripts": {
  "start": "craco start",
  "build": "craco build"
}

使用 CRACO 配置覆盖 webpack 配置
要么安装 craco-module-federation 插件，要么编写自己的 CRACO 配置来覆盖 webpack 的配置以添加 ModuleFederationPlugin。
添加您的模块联合配置
要么到 modulefederation.config.js如果您使用 craco-module-federation 插件，或到 craco.config.js如果您在没有 craco-module-federation 插件的情况下进行配置。
意识到

创建具有 webpack 5 支持的 React App 5 处于 Alpha 阶段，您可能会遇到问题。

craco-module-federation 尚未准备好生产