如何在不彈出的情況下將 Webpack 模塊聯合插件與 create-react-app 一起使用

Question

有沒有辦法在不彈出的情況下使用 create-react-app 來使用模塊聯合？ 我想將我現有的反應應用程序（使用 CRA 創建）轉換為微前端。

Answer 1

react-scripts 仍然使用 webpack 4.xx 您可以在此處跟蹤遷移。

與此同時，您可以使用CRACO ，這是一個了不起的工具，可以在 CRA 之上設置自定義配置而不會彈出。

按照如何在您的項目中設置 CRACO 的說明進行操作，非常簡單。 然后安裝 webpack 5，在嘗試yarn start或build后，你會收到 react-script 的警告，說 webpack 5 不應該安裝。 一種解決方法，因為他們 state，將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 2

不可以。為了升級 CRA 的當前 webpack 版本，您需要彈出。 此外，目前 CRA 將在 webpack v4 上，這不利於模塊聯合。 因此，您需要等到 CRA 的作者繼續使用 webpack v5 或創建自己的模板並在其中實施聯合））如果您想走上正軌，請關注https://github.com/facebook/create-react-應用程序/問題/9994

Answer 3

回答這個問題是因為這個問題是 Google 搜索CRA with Module Federation的熱門問題

試試 CRACO 的 craco-module-federation 插件

查看craco-module-federation 存儲庫，了解 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。

添加您的模塊聯合配置

如果您使用modulefederation.config.js -module-federation 插件， craco.config.js ，如果您在沒有 craco-module-federation 插件的情況下配置，則為 craco.config.js。

意識到

• 創建具有 webpack 5 支持的 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

Answer 5

我創建了一個GitHub 存儲庫來展示如何使用帶有 CRA 的 ModuleFederation 插件。

在此示例中，我僅使用了 CRA 和 CRACO，沒有其他依賴項。

您必須使用CRACO或React-App_Rewired將插件注入您的應用程序/容器中。