Module Federation 运行时源码剖析

2024-01-06 13:28:50

Module Federation：揭开微前端应用程序的神秘面纱

简介

在构建现代网络应用程序时，微前端架构已成为一种流行且强大的模式。它允许开发人员将应用程序分解为独立的模块，这些模块可以独立开发和部署。Module Federation 是 Webpack 中一项出色的功能，可让您在不同的应用程序之间共享这些模块。

基本概念

Module Federation 的核心概念包括：

共享包： 包含共享代码的软件包。
联邦模块： 使用共享包的应用程序。

当联邦模块加载时，它将从共享包中拉取共享代码。

运行时源码解析

Module Federation 的运行时源码位于 webpack/lib/container/ModuleFederationPlugin.js 文件中。此文件定义了 Module Federation 插件类，该类将共享包和联邦模块连接起来。

关键方法包括：

apply 方法： 将共享包和联邦模块添加到 Webpack 构建图中。
createRemoteType 方法： 创建表示共享包中模块的远程类型。
shareScopeFactory 方法： 创建管理共享包中模块的共享作用域模块。

使用示例

以下示例展示了如何使用 Module Federation 连接两个应用程序：

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: {
          singleton: true,
        },
      },
    }),
  ],
};