标签: webpack-module-federation

我正在使用带有模块 federation 和 vue3 的 berry 版本的纱线。
当我运行这些命令来创建项目的基础时：

mkdir vue-error
yarn set version stable
yarn plugin import workspace-tools
yarn init -pw
cd packages
npx create-mf-app # body
yarn
yarn workspace body add single-spa-vue
cd body
yarn start

我收到以下错误：

[webpack-cli] Failed to load '/Users/test/Development/trash/vue-error/packages/body/webpack.config.js' config
[webpack-cli] Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
    at Object.<anonymous> (/Users/jcuzmar/Development/trash/vue-error/.yarn/__virtual__/vue-loader-virtual-8ff7836f4c/0/cache/vue-loader-npm-16.8.3-e05f7daca3-7c0566847b.zip/node_modules/vue-loader/dist/compiler.js:14:15)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.external_module_.Module._load (/Users/jcuzmar/Development/trash/vue-error/.pnp.cjs:17959:14)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18) …

我正在尝试让我相当复杂的整体应用程序与模块联合一起使用。我的 webpack 配置看起来像这样

   plugins: [
    new ModuleFederationPlugin({
        remotes: {
            "mfe1": "mfe1@http://localhost:3000/remoteEntry.js",
        },
        shared: {
          "@angular/core": { singleton: true, strictVersion: true },
          "@angular/common": { singleton: true, strictVersion: true },
          "@angular/router": { singleton: true, strictVersion: true },
          ...sharedMappings.getDescriptors()
        }
    }),
    sharedMappings.getPlugin(),
  ],

微前端方面的共享是相同的。当我尝试运行该应用程序时，我得到：

错误：共享单例模块@angular/common的版本11.2.1不满足（需要^7.2.0）

在此之前，我收到了类似的错误消息，但针对的是角度/核心。我通过重新运行纱线并修复库根据不同的角度/核心版本产生的所有警告来解决这个问题。

但由于错误 fpr Angular/common 我陷入困境。我不知道如何找出哪个库可能会产生该错误。

有没有办法使用 create-react-app 来使用模块联合而不弹出？我想将现有的 React 应用程序（使用 CRA 创建）转换为微前端。

我已经在我的 Angular 11 应用程序中成功实现了相对较新的 webpack 5 模块联合系统，因此它可以从另一个版本按需远程加载模块。

我一无所获的一件事是如何处理样式表和图像等资源。例如，联合模块中有一个菜单元素需要自己的样式：

• 将它们放入组件的样式表中会使块膨胀，编译器会抱怨这一点，而且在显示菜单之前它们不会加载
• 如果样式位于联合模块的全局样式表上，则它们根本不会加载，因为我请求的是子模块而不是主模块（我认为）
• 该样式特定于联合模块，因此不能将其放入加载应用程序中

我认为这些样式可以被编译并放入联合模块的构建资产中，但是当它在有联合和没有联合的情况下使用时，这会破坏链接。

我仍在尝试这个，但我认为最好问一下。有人遇到过这个问题吗？

我正在尝试创建最基本的webpack 模块联合概念验证示例。

主机应用程序中的 Webpack 配置：

...
  plugins: [
    new ModuleFederationPlugin({
      name: "hostApp",
      remotes: {
        libApp: `libApp@http://localhost:3000/libApp`,
      },
    }),
  ],
...

依赖应用程序中的 Webpack 配置：

...
  plugins: [
    new ModuleFederationPlugin({
      name: "libApp",
      filename: "libApp.js",
      exposes: {
        "./moduleA": "./src/moduleA",
        "./moduleB": "./src/moduleB",
      }
    })
  ],
...

这是复制仓库

这个配置有什么问题吗？

另外，是否可以设置依赖项应用程序来导出包含所有公开模块的单个js文件（作为单个 webpack 模块）？

事实上，这里的问题完全相同，但有不同的上下文：\n How to mock notinstalled npm package in jest?

我参与了一个项目，其中使用了 webpack 中的新模块联合。基本上，我有一个主机应用程序，它使用远程应用程序。我在这里对路由做同样的事情：\n https://github.com/module-federation/module-federation-examples/tree/master/shared-routes2

我的主机应用程序导入远程应用程序的路由类似\n（我从 module-federation 存储库中获取此示例：https://github.com/module-federation/module-federation-examples/blob/master/shared-routes2 /app1/src/App.js）

// app1/src/App.js\n\nimport React from "react";\nimport { BrowserRouter, Route, Switch } from "react-router-dom";\n\n\nimport localRoutes from "./routes";\nimport remoteRoutes from "app2/routes";\n\nconst routes = [...localRoutes, ...remoteRoutes];\n\nconst App = () => (\n  <BrowserRouter>\n    <div data-test-id="App-navigation">\n      <h1>App 1</h1>\n      <React.Suspense fallback={<div>Loading...</div>}>\n        <Switch>\n          {routes.map((route) => (\n            <Route\n              key={route.path}\n              path={route.path}\n              component={route.component}\n              exact={route.exact}\n            />\n          ))}\n        </Switch>\n      </React.Suspense>\n    </div>\n  </BrowserRouter>\n);\n\n

我的这个组件的测试文件如下所示：

// app1/src/App.test.js\n\nimport React from \'react\';\nimport { …

我正在研究动态仪表板的架构，其中的组件使用 webpack 5 模块联合从不同的远程反应包中提取。我确实有不同的库，这些库在其中一些远程包之间共享。这些包是可摇树的。因此，每个远程捆绑包将具有来自同一包的不同代码。如果我将这些包作为单例共享，当两个具有相同依赖关系的组件在运行时加载到 DOM 时，webpack 是否可以从两个包中合并 lib 代码？或者我们是否有必要在这样的共享库中禁用摇树？（共享库是指 npm 包）

有人有使用Nextjs和模块联合来创建可部署的MFE的经验吗？

我可以看到存在一些限制，在这种情况下我们将失去SSR，例如使用模块联合和 nextjs 部署微前端，或者我们必须使用不是免费的nextjs-mf 。

最近是否有其他方法来实现它，以便我们可以将其部署到生产环境而不受这些限制？

我一直在研究这个模块联合示例，其中设置相对简单 - 主机正在使用具有共享反应依赖项的远程模块。在本地运行时，我注意到尽管主机和远程都有相同的react/react-dom版本，但远程的版本始终是下载的版本。

根据我的研究，模块联合似乎会选择共享依赖项的“最佳”版本，但令我惊讶的是，在两者具有相同版本的情况下，将选择远程版本。这个决定是如何做出的？在这种情况下有没有办法强制使用主机的版本？

使用 React useContexthooks 时，当前需要从树中更高的组件导入才能传入对象Context。举例来说：

// index.jsx
export const MyContext = React.useContext('1')

export function MyApp(props){
  return (
    <MyContext.Provider value='1'>
        <ChildComponent />
    </MyContext.Provider>
  )
}

// ChildComponent.jsx
import {MyContext} from './index';

export function ChildComponent(props){
  const context = useContext(MyContext);
  return (<p> {context} </p>)
}

但如果子组件是联合的，它将单独位于一个单独的存储库中，并且无法从'./index'.

在该MyApp级别，我可以导入ChildComponent：

const ChildComponent= React.lazy(() => import('federatedApp/ChildComponent'))

前提是在 Webpack 配置中，被federatedApp命名为远程，并且 HTML 文档包含远程模块入口点 .js。但我怎样才能给MyContext遥控器federatedApp呢？

猜测答案：我需要将两个组件分成index.jsx两个文件并分别公开它们吗？