0

好的，首先是一个关于原因的简短故事。

我们有一个复杂的项目，其中混合了 razorViews、reactViews 和 react 组件。剥离这个单体的一个步骤是开始做 mfe。

我在这方面做得很好，但遇到了一些我似乎找不到好的答案的问题。

我们需要在全球范围内公开不同的包，如 moment、react、jQuery 等，以便 razorviews 和第三方库正常工作。我们在 webpack 配置中有几个这样的入口文件。所有这些看起来都像这样：

import "core-js/stable";
import "regenerator-runtime/runtime";
import "expose-loader?exposes=React!react";
import "expose-loader?exposes=ReactDOM!react-dom";
import "expose-loader?exposes=moment!moment"; 
import "expose-loader?exposes=Tours!./tours.js";

window.onpopstate = function (event) {
    window.location.reload();
};

由于“Shared module is not available for eager consumption”错误，我根据文档将所有这些入口文件移动到引导文件中。

然后我的mfe开始工作，一切都很好。直到我导航到我们的一个razorViews。使用 boostrap 方法不再定义所有暴露的包。试图将其改回并再次起作用。我猜引导程序如何以更动态的方式与服务包一起工作是它不起作用的原因，但我可能是错的。

当像这样使用expose-loader并进行模块联合时，有没有人遇到过类似的情况？

编辑：

好的，这是对此的更新，我认为当我只恢复引导方法时它会起作用。但我仍然收到未定义包的错误：“ Uncaught ReferenceError: jQuery is not defined”

我还需要删除的是 ModuleFederationPlugin 的配置，然后一切正常。奇怪的..

new ModuleFederationPlugin({
            name: "app1",
            remotes: {
                buttonTest: "buttonTest@http://localhost:5001/remoteEntry.js",
            },
            shared: {
                ...deps,
                react: {
                    eager: false,
                    singleton: false,
                    requiredVersion: ">=16.14.0 <=17.0.2"
                },
                "react-dom": {
                    eager: false,
                    singleton: false,
                    requiredVersion: ">=16.14.0 <=17.0.2"
                },
            }
        }),
4

0 回答 0