如何在不弹出 create-react-app 的情况下使用 Webpack 模块联邦插件

Question

有没有不需要eject的方式在create-react-app中使用模块联邦（module federation）？ 我想将已有的使用CRA创建的React应用程序转换为微前端。

- Harish V

Answer 1

因为这个问题在谷歌搜索中排名靠前，所以我来回答一下“CRA with Module Federation”。

2022年1月25日更新 - CRA 5已发布，之前的答案在2022年不再适用，因为CRA 5支持Webpack 5。

我的GitHub模板已更新到CRA 5，请使用它作为CRA模块联邦的示例。

我保留了我的答案以供历史参考。

2021年11月17日更新 - 基于这个答案，我创建了一个GitHub模板，以便其他人更轻松地尝试使用CRA进行模块联邦。

尝试CRACO的craco-module-federation插件

查看craco-module-federation存储库，了解CRA与模块联邦的示例。

要支持模块联邦，您需要craco-module-federation CRACO插件（或编写自己的CRACO配置）来覆盖CRA webpack配置。

您还需要运行alpha版本的react-scripts，并更新任何依赖项。

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，并安装alpha版本的react-scripts。然后解决任何依赖项问题。

安装CRACO

npm install @craco/craco --save

更改您的package.json脚本以运行craco：

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

使用CRACO配置覆盖webpack配置

您可以安装craco-module-federation插件，或编写自己的CRACO配置来覆盖webpack的配置以添加ModuleFederationPlugin。

添加您的Module Federation配置

如果您使用craco-module-federation插件，则将其添加到modulefederation.config.js中；如果您不使用craco-module-federation插件，则将其添加到craco.config.js中。

请注意

• Create React App 5支持webpack 5，但仍处于Alpha测试版，可能会遇到问题。

• craco-module-federation目前还不适用于生产环境。

- DalSoft

---

我正在按照您更新的示例进行操作。但是在主机应用程序端，我一直收到“Uncaught TypeError: Cannot read properties of undefined (reading 'call')” 的错误提示。远程似乎已经正确创建了RemoteEntry.js文件。 - JamesTBennett

模板已经完美地运作了很多人。提出一个 GitHub 问题，并说明重现的步骤，我会尝试帮助你。 - DalSoft

Answer 2

react-scripts仍然使用webpack 4.x.x。你可以在这里跟踪迁移进度。

与此同时，你可以使用CRACO，这是一个非常棒的工具，可以在不弹出的情况下设置自定义配置。

按照说明在你的项目中设置CRACO非常简单。 然后安装webpack 5，在尝试yarn start或build之后，你会收到来自react-script的警告，说不应该安装webpack 5。他们提供了一个解决办法，将SKIP_PREFLIGHT_CHECK=true添加到一个.env文件中。 这是CRA团队升级期间的临时解决方法，我强烈建议稍后删除它。但继续使用CRACO完全没有问题。 以下是一个基本的.craco.js文件示例：

const { ModuleFederationPlugin } = require("webpack").container;
const allDeps = require("../package.json").dependencies;

module.exports = ({ env }) => ({
  plugins: [
    {
      plugin: ModuleFederationPlugin,
      options: {
        shared: {
          ...allDeps,
          'styled-components': {
            singleton: true
          }
        }
      }
    }
  ],
});

记得更改你的 package.json 脚本以运行 craco：

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

您甚至可以创建一个自定义插件，将其放在CRA之上并进行重用。

- Luis Martinez

---

你好，上面你展示的例子能正常运行吗？我在你的代码中遇到了一些错误。谢谢。 - OriEng

Answer 3

你可以使用一个叫做craco-plugin-micro-frontend的插件。

npm install --save-dev craco-plugin-micro-frontend

并在您的craco.config.js中使用它

const microFrontedPlugin = require('craco-plugin-micro-frontend');

module.exports = {
  plugins: [
    {
      plugin: microFrontedPlugin,
      options: {
        orgName: 'my-org',
        fileName: 'my-app.js', // should same as package main
        entry: 'src/index.injectable.js', //defaults to src/index.injectable.js,
        orgPackagesAsExternal: false, // defaults to false. marks packages that has @my-org prefix as external so they are not included in the bundle
        reactPackagesAsExternal: true, // defaults to true. marks react and react-dom as external so they are not included in the bundle
        externals: ['react-router', 'react-router-dom'], // defaults to []. marks the specified modules as external so they are not included in the bundle
        minimize: false, // defaults to false, sets optimization.minimize value
        libraryTarget: 'commonjs2', // defaults to umd
        outputPath: 'dist',
        customJestConfig: {}, // custom jest configurations
      },
    },
  ],
};

你的 package.json

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "build:lib": "REACT_APP_INJECTABLE=true craco build",
    ...
   }

更多信息可以在这里阅读：https://github.com/m-nathani/craco-plugin-micro-frontend#readme

- Murtaza Hussain

Answer 4

不行。为了将CRA当前的webpack版本升级，您需要执行eject命令。此外，目前CRA使用的是webpack v4，这对于模块联邦来说不好。因此，您需要等待CRA的作者们转向webpack v5，或者创建自己的模板并将联邦功能集成到其中。如果您想跟上最新进展，请访问https://github.com/facebook/create-react-app/issues/9994。

- Coderbit