8

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

4

4 回答 4

4

回答是因为这个问题是谷歌搜索的热门问题CRA with Module Federation

2022 年 1 月 25 日更新 - CRA 5 已发布，因为 CRA 5 支持 Webpack 5，因此之前的答案与 2022 年无关。

我的GitHub 模板已更新到 CRA 5，只需将其用于 CRA 模块联合示例。

我已经为历史价值留下了答案

2021 年 11 月 17 日更新 - 基于此答案，我创建了一个GitHub 模板，以使其他尝试与 CRA 进行模块联合的人更容易。

试试 CRACO 的 craco-module-federation 插件

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

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

添加您的模块联合配置

如果您使用craco modulefederation.config.js-module-federation 插件，或者craco.config.js如果您在没有 craco-module-federation 插件的情况下进行配置。

意识到

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

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

于 2021-09-24T16:53:21.877 回答
1

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

与此同时，您可以使用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 之上，然后重复使用。

于 2021-05-14T03:54:52.703 回答
0

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

于 2021-12-22T04:39:43.430 回答
0

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

于 2021-05-13T19:39:13.390 回答