文章目录
- [🛠 抽成独立组件库：微前端架构下公共组件共享的最佳实践](#🛠 抽成独立组件库：微前端架构下公共组件共享的最佳实践)
-
- 一、引言：为什么要抽成独立组件库？
- 二、组件库的构建流程
-
- [1. 准备工作：组件库的设计](#1. 准备工作：组件库的设计)
- [2. 封装一个简单的卡片组件](#2. 封装一个简单的卡片组件)
- [3. 配置打包工具](#3. 配置打包工具)
- 三、如何在子应用中使用组件库
-
- [1. 发布到 npm（或 CDN）](#1. 发布到 npm（或 CDN）)
-
- [方法一：发布到 npm](#方法一：发布到 npm)
- [方法二：上传到 CDN](#方法二：上传到 CDN)
- [2. 子应用中引用](#2. 子应用中引用)
-
- [方法一：通过 npm 引入](#方法一：通过 npm 引入)
- [方法二：通过 CDN 引入](#方法二：通过 CDN 引入)
- 四、优势与挑战
- 五、示意图
- 六、结语
🛠 抽成独立组件库：微前端架构下公共组件共享的最佳实践
一、引言：为什么要抽成独立组件库？
假设你正在做一个大型的前端项目，涉及到多个子应用，每个子应用可能是由不同的团队开发的。
每个子应用都需要一个 卡片组件 Card.vue，而且这个组件需要保证样式统一、功能一致，但每个子应用又不能"直接"共享主应用的代码。
此时，公共组件库 就显得至关重要了。
它将卡片组件 、按钮组件 、列表组件 等封装成一个独立的、可复用的库，让不同子应用通过 npm 共享和使用，解决了多个子应用之间 组件复用 的问题。
公共组件库的优势：
- 统一样式和功能
所有子应用都使用同一个组件库，确保风格一致，避免出现不同团队之间风格不统一的问题。 - 代码复用
一次开发、多处使用，避免重复的开发工作，提高开发效率。 - 易于维护
组件库的更新只需在一个地方进行，子应用直接更新npm包即可，减少了多个子应用间的同步问题。 - 版本控制
可以轻松管理组件的版本，解决了不同版本的组件库问题。
二、组件库的构建流程
1. 准备工作：组件库的设计
在构建独立组件库之前，我们首先需要考虑以下几个方面：
- 组件的通用性 ：确保每个组件具有良好的通用性，避免写死的样式和功能。组件应能接收外部参数（如
props）进行灵活配置。 - 依赖管理 ：避免引入不必要的依赖，尽量使用 Vue 自带的功能。对于需要的外部库，可以通过
peerDependencies管理。 - 打包工具 ：选择适合的打包工具来生成组件库的最终产物。通常使用
Vite或Webpack来打包 Vue 组件库。
2. 封装一个简单的卡片组件
让我们从封装一个最简单的 卡片组件 Card.vue 开始：
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>这个组件非常简单，它接受三个 props：
title：卡片的标题。content：卡片的内容。color：卡片的背景颜色。
3. 配置打包工具
我们以 Vite 为例，来配置打包工具生成一个可以被其他项目引用的库。
步骤 1：初始化组件库
首先，创建一个新项目并初始化 Vite：
bash
npm create vite@latest common-ui --template vue
cd common-ui
npm install步骤 2 ：配置 vite.config.js
在 vite.config.js 文件中，配置打包选项，生成一个 UMD 格式的组件库。
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',
},
},
},
},
});步骤 3：添加组件导出文件
创建一个 src/index.js 文件，导出你的组件库中的所有组件。
js
// src/index.js
import Card from './components/Card.vue';
export { Card };步骤 4：打包
现在，使用 Vite 打包你的组件库：
bash
npm run build这会在 dist/ 目录下生成 common-ui.umd.js 文件，这是一个可供其他项目引用的 UMD 格式的文件。
三、如何在子应用中使用组件库
1. 发布到 npm（或 CDN）
方法一：发布到 npm
你可以将打包后的 common-ui.umd.js 上传到 npm，然后其他子应用通过 npm 安装：
bash
npm publish方法二：上传到 CDN
如果你不想发布到 npm，可以将文件上传到 CDN 或主应用的静态目录，并提供一个 URL 供子应用引用。
2. 子应用中引用
在子应用中，通过 npm 或 <script> 标签引入公共组件库，然后使用其中的组件：
方法一：通过 npm 引入
bash
# 子应用中安装公共组件库
npm install common-ui
// 子应用 main.js
import { createApp } from 'vue';
import App from './App.vue';
import { Card } from 'common-ui'; // 引入公共组件
const app = createApp(App);
// 全局注册公共组件
app.component('Card', Card);
app.mount('#child-app');方法二：通过 CDN 引入
html
<!-- 子应用 index.html -->
<script src="http://localhost:8080/common-ui.umd.js"></script>
// 子应用 main.js
const Card = window.CommonUI.Card; // 从全局对象取出 Card
app.component('Card', Card);四、优势与挑战
优势：
| 优势 | 说明 |
|---|---|
| 统一性 | 保证所有子应用使用相同版本的组件，统一风格和功能。 |
| 易于维护 | 公共组件只需要更新一次，所有子应用通过更新 npm 包即可获得新功能。 |
| 版本控制 | 可以通过 npm 或其他包管理工具管理不同版本的组件库，避免版本不一致的问题。 |
| 代码复用 | 一次开发，多处使用，节省开发时间和成本。 |
挑战：
| 挑战 | 说明 |
|---|---|
| 发布与管理 | 需要定期发布和更新组件库，可能需要搭建自己的 npm 私服。 |
| 依赖管理 | 公共组件库可能依赖某些外部库，需要在多个子应用中统一版本。 |
五、示意图
[主应用] --------------------> [npm 仓库/公共组件库]
| |
|-----------------> [子应用A] <------|
|-----------------> [子应用B] <------|
|-----------------> [子应用C] <------|主应用通过 npm 发布组件库，子应用通过 npm install 安装并使用。
六、结语
封装成独立组件库，是微前端项目中解决 组件共享 问题的最佳实践之一。
它通过统一风格、提高代码复用率、简化维护工作，为开发团队提供了高效、规范的开发流程。无论是通过 npm 还是通过 CDN，公共组件库都能保证跨项目、跨仓库的共享使用。
小白金句：
一个组件库，多个子应用，风格统一，开发高效！
以上就是关于如何在 qiankun 微前端架构 中通过 抽成独立组件库 进行跨项目组件共享的详细介绍。
如果有任何问题或需要更深入的帮助，请随时向我提问！ 😊