抽成独立组件库：微前端架构下公共组件共享的最佳实践

文章目录

[🛠 抽成独立组件库：微前端架构下公共组件共享的最佳实践](#🛠 抽成独立组件库：微前端架构下公共组件共享的最佳实践)
- 一、引言：为什么要抽成独立组件库？
- - 公共组件库的优势：
- 二、组件库的构建流程
- - [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 微前端架构 中通过 抽成独立组件库 进行跨项目组件共享的详细介绍。

如果有任何问题或需要更深入的帮助，请随时向我提问！ 😊