微前端:导入外部远程

Question

使用Webpack的微前端架构的Module Federation插件，如何从不同的存储库导入远程？

Answer 1

在主机上，配置主机，例如：

// webpack.config.js
plugins: [
    new ModuleFederationPlugin({
        remotes: {
            foo: 'foo@http://localhost:3002/remoteEntry.js',
        },
    })
]

// index.js
import('foo/Bar').then(({default: Bar}) => console.log(Bar))

在遥控器：

output: {
    publicPath: 'http://localhost:3002/', // make sure you run on the specified port
},
plugins: [
    new ModuleFederationPlugin({
        name: 'foo',
        filename: 'remoteEntry.js',
        exposes: {
            './Bar': './src/Bar',
        },
    })
]

当然，您需要配置一些共享的依赖项等。我建议您在https://github.com/module-federation/module-federation-examples上浏览一下示例

此外，一旦您开始共享一些常见的依赖项，您将希望在应用程序的根目录中使用异步边界。像这样的https://github.com/webpack/webpack/blob/master/examples/module-federation/src/index.js