打包成 UMD，通过 CDN静态资源共享：微前端项目中跨项目共享公共组件的最佳实践

🛠 打包成 UMD，通过 CDN/静态资源共享：微前端项目中跨项目共享公共组件的最佳实践

一、引言：为什么要通过 CDN/静态资源共享公共组件？

在微前端架构中，主应用和子应用是独立的项目，但它们之间往往需要共享一些公共组件，如 卡片组件、按钮组件、表单组件 等。这些公共组件的复用不仅能提高开发效率，避免重复劳动，还能保证统一的样式和功能。

但是，子应用并不能直接访问主应用的代码，所以我们需要一种跨项目共享公共组件的方式。而 通过打包成 UMD 格式并通过 CDN 或静态资源共享，是一种非常快速且简便的解决方案。

为什么选择 UMD 格式和 CDN 共享？

1. 无需 npm 管理
   通过 CDN 引用，不需要额外的 npm 安装和版本管理，快速方便。
2. 减少依赖问题
   无论是哪个子应用，只要通过 CDN 引用公共组件库，就无需担心不同项目间的依赖问题。
3. 即插即用
   通过 UMD 格式打包的组件库，子应用只需在 HTML 中引入 <script> 标签，即可直接使用。

---

二、UMD 格式介绍

什么是 UMD？

UMD (Universal Module Definition) 是一种 JavaScript 模块定义格式，它支持多种使用场景：

• AMD (Asynchronous Module Definition)，适用于浏览器端加载。
• CommonJS，适用于 Node.js 环境。
• 全局变量，当不使用模块加载器时，直接挂载到全局对象上。

UMD 格式的组件库非常适合用在微前端中，因为它可以兼容不同的环境和加载方式。

---

三、如何打包成 UMD 格式并通过 CDN/静态资源共享？

1. 创建组件库项目

首先，初始化一个 Vue 项目，并在项目中封装好你需要共享的组件。我们以 Card.vue 组件为例。

封装一个简单的卡片组件 Card.vue

<!-- Card.vue -->
<template><div class="card" :style="{ backgroundColor: color }"><h3>{{ title }}</h3><p>{{ content }}</p></div>
</template><script>
export default {name: 'Card',props: {title: {type: String,required: true,},content: {type: String,required: true,},color: {type: String,default: '#fff',},},
};
</script><style scoped>
.card {padding: 16px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>

2. 配置打包工具：Vite

为了将 Vue 组件打包成 UMD 格式，我们可以使用 Vite 作为打包工具。下面是如何配置 vite.config.js 来生成一个 UMD 格式的组件库。

配置 vite.config.js

// vite.config.js
import { defineConfig } from 'vite';export default defineConfig({build: {lib: {entry: 'src/index.js', // 入口文件name: 'CommonUI', // 库的名字fileName: 'common-ui', // 打包后的文件名formats: ['umd'], // 输出格式},rollupOptions: {// 确保外部依赖不被打包external: ['vue'],output: {globals: {vue: 'Vue', // UMD 格式中需要定义 Vue 为全局变量},},},},
});

3. 入口文件 src/index.js

在 src/index.js 中，导出你的公共组件，这样其他子应用就可以通过 import { Card } from 'common-ui' 使用该组件。

// src/index.js
import Card from './components/Card.vue';export { Card };

4. 打包组件库

执行 npm run build 命令来生成 UMD 格式的文件：

npm run build

此时，dist/ 目录下会生成一个 common-ui.umd.js 文件。

---

四、如何在子应用中使用通过 CDN 引用的 UMD 组件库？

1. 上传组件库到 CDN 或静态资源服务器

将打包好的 common-ui.umd.js 文件上传到 CDN 或静态资源服务器，确保所有子应用都可以通过 URL 引用。

例如，上传到主应用的静态资源目录或第三方 CDN 上：

http://localhost:8080/common-ui.umd.js

2. 在子应用中引用组件库

子应用只需要在 HTML 文件中引入 CDN 的 <script> 标签，或者直接在 JavaScript 中引用组件。

方法 1：通过 <script> 标签引入（最简单）

在子应用的 index.html 中，添加以下 script 标签来引入公共组件库：

<!-- 子应用 index.html -->
<script src="http://localhost:8080/common-ui.umd.js"></script>

然后在 main.js 中使用全局的 Card 组件：

// 子应用 main.js
import { createApp } from 'vue';
import App from './App.vue';// 从全局对象 window 中获取 Card 组件
const Card = window.CommonUI.Card;const app = createApp(App);// 注册公共组件
app.component('Card', Card);app.mount('#child-app');

方法 2：通过 import 引入（使用模块）

如果你的项目支持 ES 模块，也可以直接通过 import 来引用组件：

// 子应用 main.js
import { createApp } from 'vue';
import App from './App.vue';// 通过 UMD 格式的 `window` 引用组件
import { Card } from 'http://localhost:8080/common-ui.umd.js';const app = createApp(App);// 注册公共组件
app.component('Card', Card);app.mount('#child-app');

---

五、优势与挑战

优势：

优势	说明
无需 npm 管理	不需要通过 npm 安装和管理依赖，直接通过 CDN 引用即可。
快速落地	配置简单，直接在 HTML 文件中引入 script 标签即可实现组件共享。
兼容性强	通过 UMD 格式，支持多种模块加载方式，兼容不同的项目和环境。
节省带宽	通过 CDN 引用，子应用可以共享缓存，避免重复加载同一个组件。

挑战：

挑战	说明
升级困难	由于每个子应用都引用的是一个静态的 CDN 文件，升级时需要手动替换文件版本。
不易调试	当多个子应用使用相同的公共组件时，可能会存在调试上的困难，特别是版本不一致时。

---

六、示意图

[主应用] --------------------> [CDN/静态资源服务器]|                                    ||-----------------> [子应用A] <--------||-----------------> [子应用B] <--------||-----------------> [子应用C] <--------|

通过 CDN 引用公共组件库，子应用可以像“客户端”一样轻松获取并使用主应用提供的组件。

---

七、结语

打包成 UMD 格式并通过 CDN/静态资源共享，是微前端架构中解决跨项目共享组件的一种非常便捷的方式。
通过这种方式，子应用只需要通过简单的 <script> 标签或 import 来获取公共组件，从而实现 即插即用，快速共享组件，避免了 npm 安装和依赖管理的复杂性。

小白金句：

一个 UMD 格式的组件库，多个子应用共享，零配置，快速启动！ 🎉

---

这篇文章涵盖了如何通过 UMD 格式和 CDN 共享公共组件，希望你能理解这个方法的核心思想和使用场景。如果有任何疑问，欢迎随时提问！