1

我通过三个项目尝试模块联合：shell、app1 和 app2。shell 的 webpack 配置是这样的：

 new ModuleFederationPlugin({
        name: ‘she’ll,
        library: { type: 'var', name: ‘she’ll },
        filename: 'remoteEntry.js',
        exposes: {
          './util': './src/common/utils',
          './Hello': './src/components/test/HelloWorld',
          './MicroApp': './src/shared/MicroApp',
        },
        shared: ['react', 'react-dom']
      }),

app1 和 app2 的配置如下：

      new ModuleFederationPlugin({
        name: 'app1',
        remotes: {
          Shell: `shell@${sharedModuleAddress}/remoteEntry.js`
        },
        shared: ['react', 'react-dom']
      }),

shell负责根据路由加载app1和app2。打开页面app1（或app2）时，就可以了。但是如果从一个应用程序导航到另一个应用程序，它将引发异常：容器初始化失败，因为它已经使用不同的共享范围进行了初始化。

我发现当打开一个应用页面时，比如 app1 页面，它会发送一个范围对象，包括 react 和 react-dom 到 share 模块的 init 方法。但是当导航到 app2 时，app2 创建的另一个作用域对象也将被发送到共享模块的 init 方法。共享模块会比较这两个共享范围，如果不一样，就会异常。

我不确定这是一个错误，或者我缺少一些配置。我尝试查找与模块联合相关的文档，但未找到与共享范围相关的有用信息。有没有人知道这件事？顺便说一句，我也试过

       shared: {
          react: {
            singleton: true
           },
           'react-dom': {
             singleton: true
         }
         }

它也不起作用。

问候

4

1 回答 1

1

就我而言，当webpack 条目名称与 ModuleFederationPlugin 名称相同时，会发生错误。

  entry: {
    admin: path.join(__dirname, 'src/index.js'),
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'admin', // same with entry name
      ...
    })
  ]
于 2021-03-12T08:00:32.430 回答