在没有 CDN 的微前端包之间共享反应

问题描述

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

我有：

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

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

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

谢谢！

解决方法

在 "Getting Started: Quick start" guide 中，我们介绍了如何添加共享依赖项，示例中具体展示了将 React 和 ReactDOM 添加到导入映射中。

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

,

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

反应

您可以将 CDN 用于静态文件。 （图像、字体、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);