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

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

一、引言：为什么要抽成独立组件库？

假设你正在做一个大型的前端项目，涉及到多个子应用，每个子应用可能是由不同的团队开发的。
每个子应用都需要一个 卡片组件 Card.vue，而且这个组件需要保证样式统一、功能一致，但每个子应用又不能“直接”共享主应用的代码。

此时，公共组件库就显得至关重要了。
它将卡片组件、按钮组件、列表组件等封装成一个独立的、可复用的库，让不同子应用通过 npm 共享和使用，解决了多个子应用之间 组件复用 的问题。

公共组件库的优势：

1. 统一样式和功能
   所有子应用都使用同一个组件库，确保风格一致，避免出现不同团队之间风格不统一的问题。
2. 代码复用
   一次开发、多处使用，避免重复的开发工作，提高开发效率。
3. 易于维护
   组件库的更新只需在一个地方进行，子应用直接更新 npm 包即可，减少了多个子应用间的同步问题。
4. 版本控制
   可以轻松管理组件的版本，解决了不同版本的组件库问题。

二、组件库的构建流程

1. 准备工作：组件库的设计

在构建独立组件库之前，我们首先需要考虑以下几个方面：

• 组件的通用性：确保每个组件具有良好的通用性，避免写死的样式和功能。组件应能接收外部参数（如 props）进行灵活配置。
• 依赖管理：避免引入不必要的依赖，尽量使用 Vue 自带的功能。对于需要的外部库，可以通过 peerDependencies 管理。
• 打包工具：选择适合的打包工具来生成组件库的最终产物。通常使用 Vite 或 Webpack 来打包 Vue 组件库。

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

让我们从封装一个最简单的 卡片组件 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>

这个组件非常简单，它接受三个 props：

• title：卡片的标题。
• content：卡片的内容。
• color：卡片的背景颜色。

3. 配置打包工具

我们以 Vite 为例，来配置打包工具生成一个可以被其他项目引用的库。

步骤 1：初始化组件库

首先，创建一个新项目并初始化 Vite：

npm create vite@latest common-ui --template vue
cd common-ui
npm install

步骤 2：配置 vite.config.js

在 vite.config.js 文件中，配置打包选项，生成一个 UMD 格式的组件库。

// 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 文件，导出你的组件库中的所有组件。

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

export { Card };

步骤 4：打包

现在，使用 Vite 打包你的组件库：

npm run build

这会在 dist/ 目录下生成 common-ui.umd.js 文件，这是一个可供其他项目引用的 UMD 格式的文件。

三、如何在子应用中使用组件库

1. 发布到 npm（或 CDN）

方法一：发布到 npm

你可以将打包后的 common-ui.umd.js 上传到 npm，然后其他子应用通过 npm 安装：

npm publish

方法二：上传到 CDN

如果你不想发布到 npm，可以将文件上传到 CDN 或主应用的静态目录，并提供一个 URL 供子应用引用。

2. 子应用中引用

在子应用中，通过 npm 或 <script> 标签引入公共组件库，然后使用其中的组件：

方法一：通过 npm 引入

# 子应用中安装公共组件库
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 引入

<!-- 子应用 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 仓库/公共组件库]
    |                                  |
    |-----------------> [子应用A] <------|
    |-----------------> [子应用B] <------|
    |-----------------> [子应用C] <------|

主应用通过 npm 发布组件库，子应用通过 npm install 安装并使用。

六、结语

封装成独立组件库，是微前端项目中解决 组件共享 问题的最佳实践之一。
它通过统一风格、提高代码复用率、简化维护工作，为开发团队提供了高效、规范的开发流程。无论是通过 npm 还是通过 CDN，公共组件库都能保证跨项目、跨仓库的共享使用。

小白金句：

一个组件库，多个子应用，风格统一，开发高效！

以上就是关于如何在 qiankun 微前端架构 中通过 抽成独立组件库 进行跨项目组件共享的详细介绍。
如果有任何问题或需要更深入的帮助，请随时向我提问！ 😊