微前端最佳实践：Module Federation 的使用步骤详解-EW帮帮网

前言

在前端开发领域，微前端（Micro Frontends）是一种将单一前端应用拆分成多个小型、独立且可独立部署的模块的方法。这种方法不仅有助于提高应用的可维护性，还能够使不同团队独立开发和部署各自的模块。
而在众多实现微前端的方法中，Webpack 5 引入的 Module Federation 是一种非常强大的工具。

什么是 Module Federation？

Module Federation 是 Webpack 5 引入的一项新特性，它允许你在不同的应用之间共享代码和依赖。简单来说，Module Federation 使得一个应用可以从另一个应用动态加载模块，就像加载本地模块一样。这对于微前端架构来说非常有帮助，为我们解决了跨应用共享代码的难题。

使用步骤

下面，让我们一步一步来了解如何使用 Module Federation 创建一个简单的微前端应用。

1. 初始化项目

首先，我们需要创建两个独立的前端项目，分别命名为 App1 和 App2。你可以使用任意你喜欢的脚手架工具来初始化这两个项目，比如 Create React App 或 Vue CLI 等。

# 创建 App1 和 App2 项目目录
mkdir App1 App2

# 初始化 React 项目（或 Vue 等其他框架）
npx create-react-app App1
npx create-react-app App2

2. 安装 Webpack 5

接下来，我们需要确保两个项目都使用 Webpack 5。Create React App 默认使用的 Webpack 版本可能不是最新的，所以我们需要手动更新它。

在两个项目的根目录下执行以下命令：

# 安装 Webpack 5 及相关依赖
npm install --save-dev webpack@latest webpack-cli@latest webpack-dev-server@latest

3. 配置 Module Federation

在这一步，我们将配置 Module Federation。我们需要在每个项目的 Webpack 配置文件中添加 Module Federation 相关的配置。

配置 App1

首先，在 App1 项目的根目录下创建或修改 webpack.config.js 文件：

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    contentBase: './dist',
  },
  output: {
    publicPath: 'http://localhost:3001/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'App1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

在这个配置中，我们使用 ModuleFederationPlugin 来暴露 App1 的一个按钮组件（./src/components/Button）。

配置 App2

同样地，在 App2 项目的根目录下创建或修改 webpack.config.js 文件：

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

module.exports = {
  entry: './src/index.js',
  mode: 'development',
  devServer: {
    contentBase: './dist',
  },
  output: {
    publicPath: 'http://localhost:3002/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
    new ModuleFederationPlugin({
      name: 'App2',
      remotes: {
        App1: 'App1@http://localhost:3001/remoteEntry.js',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

在这个配置中，我们使用 ModuleFederationPlugin 来引用 App1 中暴露的按钮组件。

4. 使用远程模块

接下来，我们需要在 App2 中使用从 App1 动态加载的按钮组件。

首先，在 App2 项目的 src 目录下创建一个新的组件文件 RemoteButton.js：

import React from 'react';

// 动态引入来自 App1 的按钮组件
const RemoteButton = React.lazy(() => import('App1/Button'));

const App = () => (
  <div>
    <h1>App2</h1>
    <React.Suspense fallback="Loading Button...">
      <RemoteButton />
    </React.Suspense>
  </div>
);

export default App;

然后，确保在 src/index.js 中正确渲染这个组件：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './RemoteButton';

ReactDOM.render(<App />, document.getElementById('root'));

5. 启动项目

最后，我们需要启动这两个项目：

# 启动 App1
cd App1
npm start

# 启动 App2
cd ../App2
npm start

打开浏览器分别访问 http://localhost:3001 和 http://localhost:3002，你应该能够在 App2 中看到 App1 中的按钮组件了！

高级用法

1. 处理共享依赖

在微前端架构中，共享依赖的管理非常重要。Module Federation 提供了一个 shared 选项，用于指定哪些模块是共享的，并且可以在多个应用之间复用。

在前面的配置中，我们已经简单地将 react 和 react-dom 设置为共享依赖。接下来，我们进一步优化这个配置，确保共享依赖的一致性。

优化 App1 的共享依赖配置

在 App1 的 webpack.config.js 中，我们可以对共享依赖进行更细粒度的控制：

shared: {
  react: {
    singleton: true, // 确保只加载一个版本的 React
    requiredVersion: deps.react, // 使用 package.json 中指定的版本
  },
  'react-dom': {
    singleton: true,
    requiredVersion: deps['react-dom'],
  },
}

优化 App2 的共享依赖配置

同样地，在 App2 的 webpack.config.js 中进行相同的优化：

shared: {
  react: {
    singleton: true,
    requiredVersion: deps.react,
  },
  'react-dom': {
    singleton: true,
    requiredVersion: deps['react-dom'],
  },
}

通过这种方式，我们确保了在不同的应用中只加载一个版本的 react 和 react-dom，这不仅减少了重复代码，还避免了不同版本之间的冲突。

2. 实现热更新

为了提升开发体验，我们可以通过配置 Webpack Dev Server 来实现热更新（HMR: Hot Module Replacement）。这样，当你修改代码后，无需手动刷新浏览器，修改会自动生效。

在 webpack.config.js 中添加以下配置：

devServer: {
  contentBase: path.join(__dirname, 'dist'),
  hot: true, // 启用热更新
}

然后，在项目的入口文件中添加热更新代码：

if (module.hot) {
  module.hot.accept();
}

3. 部署微前端应用

在开发环境中，我们使用的是本地服务器，但在实际生产环境中，我们需要将应用部署到远程服务器上。这里有一些通用的步骤：

构建应用：使用 Webpack 生成生产环境下的静态文件。
```
npm run build
```

配置 Web 服务器：可以选择 Nginx、Apache 等 Web 服务器来托管生成的静态文件。

例如，使用 Nginx 的简单配置：

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /path/to/your/app1/dist;
        try_files $uri /index.html;
    }
}

部署远程服务器：将静态文件上传到远程服务器，你可以使用 FTP、SCP 或 CI/CD 工具来自动化这个过程。
更新远程模块路径：确保在生产环境中正确配置 publicPath 和远程模块的 URL。例如：
```
output: {
  publicPath: 'https://your-cdn.com/app1/',
},
```

通过上述步骤，你可以将微前端应用成功部署到生产环境，并实现跨应用的模块共享。

总结

通过以上步骤，我们成功使用 Webpack 5 的 Module Federation 特性实现了微前端架构中的模块共享。这个过程不仅展示了如何在不同的应用之间共享代码，还展示了如何动态加载远程模块。

微前端最佳实践：Module Federation 的使用步骤详解

前言