用 ModuleFederationPlugin 实现轻松搞定 Vue 项目跨应用共享代码！

## 前言

随着前端应用的蓬勃发展和微服务的兴起，模块化变得越来越重要。在不同的项目中，往往有很多功能相似甚至完全相同的代码，这使得跨应用的代码共享尤为重要。

传统上，我们处理这种问题往往采用以下几种方式：

* **直接复制粘贴：**  这种方式简单粗暴，但容易导致代码冗余和难以维护。
* **使用 NPM 包：**  这种方式可以实现代码的共享，但会增加项目的依赖关系，而且难以控制不同项目的代码版本一致性。
* **使用 Git 子模块：**  这种方式可以实现代码的共享和版本控制，但操作起来相对复杂。

以上这些方法都有各自的优缺点，但都不尽如人意。

## ModuleFederationPlugin 横空出世

Webpack 5 中引入了一个新的特性——ModuleFederationPlugin，它为我们提供了一种全新的跨应用代码共享方案。ModuleFederationPlugin 可以将多个 webpack 构建产物组合成一个单一的应用程序，从而实现不同应用之间的代码共享。

## Vue 项目初体验

接下来，让我们通过一个 Vue 项目来体验一下如何使用 ModuleFederationPlugin 实现跨应用代码共享。

### 1. 创建两个 Vue 项目

首先，我们需要创建两个 Vue 项目，一个作为主应用（host），另一个作为子应用（remote）。

### 2. 安装 ModuleFederationPlugin

在主应用和子应用中，分别安装 ModuleFederationPlugin：

npm install webpack webpack-dev-server @module-federation/webpack -D

### 3. 配置 webpack

在主应用和子应用的 webpack 配置文件中，分别配置 ModuleFederationPlugin：

**主应用 webpack 配置** 

module.exports = {
// ...
plugins: [
// ...
new ModuleFederationPlugin({
// ...
remotes: {
// ...
'remote-app': 'http://localhost:8081/remoteEntry.js',
},
// ...
}),
],
// ...
};

**子应用 webpack 配置** 

module.exports = {
// ...
plugins: [
// ...
new ModuleFederationPlugin({
// ...
name: 'remote-app',
exposes: {
// ...
'./ComponentA': './src/components/ComponentA.vue',
},
// ...
}),
],
// ...
};

### 4. 运行项目

分别运行主应用和子应用：

npm run serve

### 5. 跨应用共享代码

现在，我们可以在主应用中使用子应用暴露的组件了：

## 总结

通过以上步骤，我们就轻松实现了 Vue 项目之间的跨应用代码共享。ModuleFederationPlugin 为我们提供了一种简单而强大的方式来共享代码，从而提高代码的复用率和可维护性。

## 扩展阅读

* [Webpack 5 Module Federation Documentation](https://webpack.js.org/concepts/module-federation/)
* [Vue.js Module Federation Documentation](https://vuejs.org/guide/advanced/module-federation.html)
* [Examples of Using Module Federation with Vue.js](https://github.com/vuejs/rfcs/blob/module-federation/active-rfcs/0000-module-federation.md)

## 版权声明

本文首发于「技术小栈」，版权所有，转载请注明出处。