Webpack模块联邦-由导入复制的模块实例

Question

我正在使用模块联合构建一个带有插件支持的React应用程序：

• 它由一个主机应用程序和多个插件(远程应用)组成。
• 插件被动态导入到主机应用程序中。
• 主机应用程序将其部分功能公开给插件。

// host app config
new ModuleFederationPlugin({
   name: "host",
   exposes: {
       // Host API used by plugins
       ".": "./src/api"
   },
   // ...
}

现在，我可以在插件中导入API。

import {FooBar} from "host";

我还可以在主机应用程序中导入相同的内容：

import {FooBar} from "./src/api";

问题是，--这些导入--不是作为一个单例来解决的。主机应用程序和插件接收每个导入模块的独特实例。这个问题是因为：

• 我需要通过API访问全局状态。
• 如果有一个通过API共享的类，那么它在主机/插件中创建的实例是不相等的(就instanceof操作符而言)。

插件：

import {FooBar} from "host";

export const fooBar = new FooBar;

主机应用程序：

import {FooBar} from "./src/api";

import("plugin").then(plugin => {
    plugin.fooBar instanceof FooBar; // false
});

问：如何配置模块联合以使其工作？或者这种行为是一个bug?

我也在这个储存库上复制了它。

编辑：经过一些调查，原因似乎是主机应用程序的main.js块和remoteEntry.js有单独的__webpack_module_cache__进行模块解析。

Answer 1

我编写了一个自定义webpack插件，通过在main.js块和remoteEntry.js之间创建共享模块缓存来修复所描述的行为。

import webpack, {RuntimeGlobals} from "webpack";
import {ConcatSource, OriginalSource} from "webpack-sources";

const {Template} = webpack;
const {JavascriptModulesPlugin} = webpack.javascript;

const PLUGIN_NAME = "SharedModuleCachePlugin";

export default class SharedModuleCachePlugin {
    constructor(options = {}) {
        this.cacheVar = options.cacheVar || "__shared_module_cache__";
    }

    apply(compiler) {
        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
            const compilationHooks = JavascriptModulesPlugin.getCompilationHooks(compilation);
            compilationHooks.renderStartup.tap(PLUGIN_NAME, startupSource => {
                const cacheCode = Template.asString([
                    "if (typeof window !== 'undefined') {",
                    Template.indent([
                        `if (!window.${this.cacheVar}) {`,
                        Template.indent(`window.${this.cacheVar} = {};`),
                        "}",
                        "",
                        `__webpack_module_cache__ = window.${this.cacheVar};`,
                        `${RuntimeGlobals.moduleCache} = window.${this.cacheVar};`,
                    ]),
                    "}",
                ]);
                const cacheSource = new OriginalSource(cacheCode, "webpack/shared-module-cache");
                return new ConcatSource(cacheSource, startupSource);
            });
        });
    }
}

这需要只用于主机应用webpack的配置。