标签: webpack-module-federation

使用 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两个文件并分别公开它们吗？

我正在Webpack 5 模块联盟的世界中寻找自己的出路。有很多很好的材料和例子，比如这个和这个。

然而，我发现的所有示例都是在单个 Git 存储库中构建的，通常使用npm 工作区和/或嵌套的 package.json 文件。

由于我要在多个 Git 存储库之间实现模块联合，因此我希望看到一个完全实现这一点的示例。有人发现这样的例子吗？

我假设这项工作是在遥控器的定义中完成的；我见过一些通过 URL 定义远程的情况，但在我的情况下，所有远程都将在构建时已知，所以我认为 URL 是多余的。我对吗？

我正在使用 webpack 5 的模块联合插件构建一个具有微前端的应用程序。一切都很好，直到我开始将反应挂钩添加到我的远程应用程序中。当时我收到了有关“挂钩使用无效”的错误，即我发现我加载了两个版本的 React，一个来自远程，另一个来自使用远程的应用程序。

shared通过在我的 webpack 配置中将 React 标记为单例的部分添加一个键解决了这个问题ModuleFederationPlugin。现在一切都编译好了并且似乎运行得很好。

然而，webpack 编译器现在向我发出一些恼人的警告。其曰：

No required version specified and unable to automatically determine one. Unable to find required version for "react" in description file (/Users/myComputer/Development/myapp/node_modules/@apollo/client/react/context/package.json). It need to be in dependencies, devDependencies or peerDependencies.

这是我的 webpack 配置（在远程）当前的样子：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')

const deps = require('./package.json').dependencies

module.exports = {
  mode: 'development',
  devServer: { port: 3001 },
  entry: './src/index.tsx',
  output: {
    path: __dirname + '/dist/',
  },
  module: …

我的 shell 和微前端有单独的存储库，我想在 shell 和微前端之间共享身份验证服务数据。

我使用下面的文章“第 5 步：共享 Monorepo 的库”来创建 AuthService 共享库，但由于我的不是 Monorepo，所以我将该库发布到 npm 中：

https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md

我的 AuthLibrary 的 npm：https://www.npmjs.com/package/@vijender1256/auth-lib

我将 npm 包安装到我的 shell 和微前端中。我正在 shell 应用程序中设置登录值，并希望在多个微前端中共享用户信息，我想使用此库进行跨 shell 和微前端的 AuthService 状态管理。

shell webpack.config.js

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' }),
    ...sharedMappings.getDescriptors()
  },
  sharedMappings: ['@vijender1256/auth-lib'],
});

微前端 webpack.config.js：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'itemMfe',

  exposes: {
    './ItemModule': …

我目前有多个 React v17 应用程序，它们利用 Webpack 5 中的模块联合。我希望我的 MUI 5 主题能够在所有这些微前端之间共享，而不需要在ThemeProvider每个公开的组件周围都有自己的主题。目前，APP 1（Shell）在 MUI 中添加了自定义主题ThemeProvider，并且所有 Micro UI 都作为子项延迟加载。自定义主题适用于容器组件，但不适用于微前端组件。我遵循具有以下配置的微前端架构：

1. APP 1（Shell） - 主要角色是管理身份验证、包装主题并使用来自其他微前端的页面组件。
2. APP 2（主页） - 公开页面组件并依赖 shell 的主题渲染。
3. APP 3（另一个页面等..） - 公开页面组件并依赖于 shell 的主题渲染。

...对于所有其他微前端等等。

APP 1 - 模块联合配置：

const { ModuleFederationPlugin } = require('webpack').container
const { shared } = require('./shared/shared')

const homePage = 'https://localhost:8084';

var moduleFedConfig = new ModuleFederationPlugin({
    name: 'container',
    filename: 'remoteEntry.js',
    remotes: {
        homePage: `homePage@${homePage}/remoteEntry.js`,
    },
    shared: shared,
});

APP 2 - 模块联合配置：

const { …

我正在使用 webpack5 和 CLI11 开发模块联合原型，主要如下所述：https ://www.angulararchitects.io/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/ 。

基本上，我有一个主机应用程序，它从页面 b 加载共享模块。那么该共享模块应该在主机中使用。它设置了一个RouterModule.forChild()并通过 webpack 公开共享。到目前为止，这有效。

现在我添加了我们的一个组件，它在内部使用动画，但事情正在崩溃。使用 BrowserAnimationsModule 或任何与平台相关的模块（例如 BrowserModule 或 NoopAnimationsModule 本身）导入到我的共享模块中，主机应用程序将不再工作。每次我导航到路由器时，路由器都会将我的共享内容的新副本添加到另一个副本下面。我假设它每次加载模块时都会创建一个新平台，但我怎样才能防止这种情况发生呢？

我还尝试在应用程序和主机之间共享@angular/platform-b​​rowser/animations，但没有运气。

我知道 webpack 5 不是当前 CLI 的官方部分，但我想知道是否有人已经偶然发现了这一点。我认为这作为一个用例并不少见。

我已经设置了一个存储库来重现该问题：https://github.com/paad/module-federation

它已经是一个已知问题了吗？也许有人有建议？

我正在尝试使用 Module Federation 来使用 gatsby 的微前端应用程序。当我尝试调用在 localhost:3001 运行的组件时，出现 CORS 错误。知道如何解决这个问题吗？

这是我的gatsby-node.js

const packageJsonDeps = require('./package.json').dependencies;
const { ModuleFederationPlugin } = require("webpack").container;

exports.onCreateWebpackConfig = ({
                                     stage,
                                     rules,
                                     loaders,
                                     plugins,
                                     actions,
                                 }) => {
    actions.setWebpackConfig({
        plugins: [
            new ModuleFederationPlugin( {
                name: "app2",
                remotes: {
                    app1: "app1@http://localhost:3001/remoteEntry.js",
                },
                shared: {
                    ...packageJsonDeps,
                    react: { singleton: true, eager: true, requiredVersion: packageJsonDeps.react },
                    "react-dom": { singleton: true, eager: true, requiredVersion: packageJsonDeps["react-dom"] },
                    "styled-components": { singleton: true, eager: true, requiredVersion: packageJsonDeps["styled-components"] },
                    "gatsby":{singleton: true, eager: true, …

为主机和远程应用程序实现了模块联合。对于远程应用程序，联合模块上传到 CDN 上。在本地主机上访问联合模块时，主机应用程序工作正常，但在使用 CDN 链接访问模块时出现错误。联合模块延迟加载期间存在错误：

未捕获的 ChunkLoadError：加载块 531 失败。

以下是我在 webpack（主机应用程序）中的模块联合配置：

**new ModuleFederationPlugin({
            name: 'common',
            filename: 'common',
            remotes: {
sampleAppModule: sampleApp@http://CDN-link/remoteEntry.js
// sampleAppModule: sampleApp@http://localhost:8000/remoteEntry.js (this works fine)
            },
            shared: [sharedDependencies],
        })**

直接访问CDN链接即可看到联邦模块。另外，在获取remoteEntry.js 文件时成功获得200 状态，但在延迟加载远程模块时出现错误。

我收到此错误消息：ScriptExternalLoadError：加载脚本失败。

（缺少：http://localhost:3005/remoteEntry.js）。

当尝试从开发中的容器应用程序加载远程应用程序时。

我有这个优化（当我把它们放在评论中时一切正常）：

optimization:{
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: module => (module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/) || [])[1]
      }
    }
  },

发生的情况是，我通过模块联合使用微前端，但即使使用 React.Lazy，捆绑包 (remoteEntry) 也会在应用程序启动时加载，而无需访问导入组件的路径。

要模拟该场景，您可以访问存储库并按照描述的步骤操作。单击此处访问。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const webpack = require('webpack');
const dependencies = require('./package.json').dependencies;
const ModuleFederationPlugin =
  require('webpack').container.ModuleFederationPlugin;
const path = require('path');
const dotenv = require('dotenv');

module.exports = (_, args) => {
  return {
    mode: args.mode,
    entry: './src/index.js',
    output: {
      filename:
        process.env.NODE_ENV === 'development'
          ? 'main.js'
          : 'main.[contenthash].js',
      publicPath: process.env.NODE_ENV === 'development' ? '/' : '/app/',
      path: path.resolve(__dirname, 'build')
    },
    devServer: {
      static: {
        directory: …