个人中心
gpt4 book ai didi

javascript - Webpack 模块联合不适用于急切的共享库

转载 作者：行者123 更新时间：2023-12-04 00:51:32 28 4
gpt4 key购买 nike

我正在研究 Webpack 5 模块联合功能，但在理解为什么我的代码不起作用时遇到了一些麻烦。
这个想法与标准模块联合示例所做的非常相似:app1 - 是主机应用程序app2 - 是将整个应用程序暴露给 app1 的 Remote
(app1 呈现标题和水平线，app2 应在其下方呈现)
两个app1和 app2声明 react和 react-dom作为它们在 weback.config.js 中共享的、单例的、急切的依赖关系:

// app1 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app1",
      remotes: {
        app2: `app2@//localhost:2002/remoteEntry.js`,
      },
      shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
    }),
    ...
  ],
};
// app2 webpack.config.js
module.exports = {
  entry: path.resolve(SRC_DIR, './index.js');,
  ...
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      library: { type: "var", name: "app2" },
      filename: "remoteEntry.js",
      exposes: {
        "./App": "./src/App",
      },
      shared: { react: { singleton: true, eager: true }, "react-dom": { singleton: true, eager: true } },
    }),
    ...
  ],
};
在 App1 index.js 我有下一个代码: 
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";


ReactDOM.render(<App />, document.getElementById("root"));
应用程序1 App.js组件是下一个: 
import React, { Suspense } from 'react';

const RemoteApp2 = React.lazy(() => import("app2/App"));

export default function App() {
  return (
    <div>
      <h1>App 1</h1>
      <p>Below will be some content</p>
      <hr/>
      <Suspense fallback={'Loading App 2'}>
        <RemoteApp2 />
      </Suspense>
    </div>
  );
}
但是当我启动应用程序时，我得到下一个错误: 
Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?1bb3
    at Object.__webpack_modules__.<computed> (consumes:133)
    at __webpack_require__ (bootstrap:21)
    at fn (hot module replacement:61)
    at Module../src/index.js (main.bundle.a8d89941f5dd9a37d429.js:239)
    at __webpack_require__ (bootstrap:21)
    at startup:4
    at startup:6
如果我从 index.js 中提取所有内容至 bootstrap.js在 index.js会做 
import('./bootstrap');
一切正常。
这让我感到困惑 official docs和 blog posts从创作者说你可以做 bootstrap.js方式或将依赖项声明为急切的依赖项。
如果没有 bootstrap.js，将不胜感激任何帮助/见解。图案。
这是我正在构建的完整 GitHub 沙箱的链接: https://github.com/vovkvlad/webpack-module-fedaration-sandbox/tree/master/simple

最佳答案

只是为了让那些可能错过对最初答案的评论的人清楚:
最初失败的主要原因似乎是 remoteEntry.js文件是在实际运行主机应用程序的代码之后加载的。
两个bootstrap.js接近并添加直接脚本<script src="http://localhost:2002/remoteEntry.js"></script>到<head></head>标签具有完全相同的结果-它们使remoteEntry.js被加载和解析之前 主应用程序的代码。
在引导的情况下，顺序是下一个:

  • main_bundle已加载
  • 因为主要代码被提取到bootstrap.js文件 - remoteEntry.js已加载
  • bootstrap.js已加载实际运行主应用程序

    • enter image description here
    由 Oleg Vodolazsky 提议的变体事件顺序是下一个:
  • remoteEntry.js首先加载，因为它直接添加到 html文件和 webpack 的 main_bundle正在附加到 <head></head>在remoteEntry链接后
  • main_bundle已加载并运行应用程序

    • enter image description here
    如果只是尝试在没有 Bootstrap 且没有硬编码脚本的情况下运行 <head></head> 中的应用程序 main_bundle在 remoteEntry.js 之前加载和 main_bundle尝试实际运行该应用程序，但失败并出现错误:
    enter image description here

    关于javascript - Webpack 模块联合不适用于急切的共享库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66123283/

    28 4 0
    文章推荐： Java Native Interface 偷偷摸摸的 fork 行为
    文章推荐： tensorflow - ML 初学者的 MNIST - 为什么 "one-hot"向量长度为​​ 11？
    文章推荐： wpf - 有没有办法在 WPF 中对控件进行逻辑分组
    文章推荐： shell - Shell中如何获取一个字符串在另一个字符串中的行号
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com