3

我正在使用带有 Single-Spa 框架的微前端架构构建应用程序。

我有：

  • 根配置 Web 应用程序：定义应用程序的布局并将每个微前端作为 NPM 依赖项包含在内
  • N 微前端：加载到根配置应用程序中的反应应用程序。

因为每个微前端都在使用 React，所以我不想每次都捆绑它。相反，我想让根配置应用程序将 React 指定为依赖项，然后每个微前端都可以加载它。

我已经将 react 和 react-dom 声明为 webpack 外部，因此它们没有被捆绑，但我认为这只有在我的根配置应用程序的 index.html 中包含来自 CDN 的 React 时才有效。有没有办法配置 webpack，以便它将 React 包含在根配置中并使其可用于每个微前端？我不能在我的公司中使用公共 CDN。

谢谢！

4

3 回答 3

0

是的，我们不仅可以为React包做到这一点，还可以为所有依赖项做到这一点，并在所有微前端应用程序之间共享它们。

Webpack 5 提供了支持ModuleFederationPlugin，您可以在其中定义包列表。例子：-

在 Webpack 配置中导入 Package.json 并添加以下插件

const packageJson = require('../package.json');

{
   plugins: [
    new ModuleFederationPlugin({
            name: <AppName>,
            filename: 'remoteEntry.js',
            exposes: {
                './App': <PathToFile>,
            },
            shared: {
                ...packageJson.dependencies,
            }
        }),
  ],
}

您可以仅显式定义要共享的包名称。

查看有关ModuleFederationPlugin的更多信息

于 2021-05-21T06:17:44.887 回答
0

如果你想在微前端有灵活性，即如果你想让每个微前端相互独立部署，你可以使用客户端集成。

反应

您可以将 CDN 用于静态文件。(image, fonts, pdf, doc) Webpack 模块联合可用于客户端集成。

配置示例 webpack 和模块联合。

我们将 webpack 配置文件分为 3 个部分。用于共同、开发、生产

webpack.common.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-react', '@babel/preset-env'],
            plugins: ['@babel/plugin-transform-runtime'],
          },
        },
      },
    ],
  },
};

webpack.dev.js

const { merge } = require('webpack-merge');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const commonConfig = require('./webpack.common');
const packageJson = require('../package.json');

const devConfig = {
  mode: 'development',
  output: {
    publicPath: 'http://localhost:8082/',
  },
  devServer: {
    port: 8082,
    historyApiFallback: {
      index: 'index.html',
    },
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'auth',
      filename: 'remoteEntry.js',
      exposes: {
        './AuthApp': './src/bootstrap',
      },
      shared: packageJson.dependencies,
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
};

module.exports = merge(commonConfig, devConfig);
于 2021-07-06T18:31:05.787 回答
0

在“入门：快速入门”指南中，我们介绍了如何添加共享依赖项，并且该示例具体展示了将 React 和 ReactDOM 添加到导入映射中。

你不应该尝试将 React 捆绑到根配置中，因为 Webpack 捆绑到应用程序中的模块是命名空间的，而不是全局共享的。相反，根据您的要求，您可以将这些 React 文件托管在您自己的 CDN 中，甚至可以通过根配置在本地提供它们，因为最终会有静态文件。加载这些文件的位置与 SystemJS 无关，只要它可以加载它们。这意味着您可以像在本地复制这些文件并从 root-config 服务器提供它们一样简单，也可以像设置自己的 unpkg 服务器一样复杂。

于 2021-02-23T07:24:27.543 回答