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

Question

有没有办法使用 create-react-app 来使用模块联合而不弹出？ 我想将我现有的 React 应用程序（使用 CRA 创建）转换为微前端。

Answer 1

没有。为了提升 CRA 当前 webpack 的版本，您需要退出。此外，目前 CRA 将在 webpack v4 上，这不利于模块联合。所以你需要等到 CRA 的作者继续使用 webpack v5 或者创建你自己的模板并在其中实现联合 )) 如果你想走上正轨，请关注https://github.com/facebook/create-react-app/issues/9994

Answer 2

react-scripts 仍然使用 webpack 4.x.x。您可以跟踪迁移here。

与此同时，您可以使用CRACO，这是一个在 CRA 之上设置自定义配置而不弹出的神奇工具。

按照有关如何在项目中设置 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 之上，然后重复使用。

Answer 3

回答是因为这个问题在 Google 搜索中排名第一 CRA with Module Federation

根据这个答案在 2021 年 11 月 17 日更新，我创建了一个 GitHub template，以便其他尝试与 CRA 进行模块联合的人更容易。

试试 CRACO 的 craco-module-federation 插件

查看craco-module-federation repo，了解 CRA 与 Module Federation 合作的示例。

要支持模块联合，您需要 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。

添加您的模块联合配置

如果您使用 craco-module-federation 插件，则发送至 modulefederation.config.js，如果您在不使用 craco-module-federation 插件的情况下进行配置，则发送至 craco.config.js。

注意

• 支持 webpack 5 的 Create React App 5 处于 Alpha 阶段，您可能会遇到问题。

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

Answer 4

您可以使用名为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