组件库打包发布的秘诀：Vue3-CCUI 的实战解析

超越站内九成建设组件库的文章，本文将从零到一，手把手带你搭建一个企业级前端组件库。历时一周，我们总结完善了整个流程，并提供了详细的技术栈：Vite3、Vitepress、Vitest、Vue3 和 TSX。

从零构建企业级组件库

在当今快节奏的软件开发环境中，组件库已成为构建和维护现代应用程序的必备工具。组件库提供了可重用的 UI 组件，从而减少了开发时间并提高了代码质量。

然而，构建和发布组件库可能是一项艰巨的任务，需要对构建工具、测试框架和最佳实践有深入的了解。本文将分享我们使用 Vue3、Vite、Vitepress、Vitest 和 TSX 构建和发布企业级组件库的实战经验。

技术栈

• Vue3：前端框架
• Vite：构建工具
• Vitepress：文档生成工具
• Vitest：测试框架
• TSX：TypeScript 语法扩展

构建组件库

1. 初始化项目

使用以下命令初始化一个新的 Vue3 项目：

vue create my-component-lib

2. 添加 Vitepress

Vitepress 是一个文档生成工具，可让你轻松地创建和维护组件库的文档。

cd my-component-lib
npm install -D vitepress

3. 创建组件

在 src/components 目录中创建你的组件。每个组件都应该是一个单独的文件，包含模板、样式和逻辑。

// MyComponent.vue
<template>
  <div>My Component</div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

打包发布组件库

1. 配置 Vite

在 vite.config.js 中配置 Vite，以支持组件库的构建和打包。

// vite.config.js
export default {
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'my-component-lib',
      formats: ['es', 'umd'],
    }
  }
}

2. 创建入口文件

在 src/index.js 中创建组件库的入口文件，导出所有组件。

// src/index.js
import MyComponent from './components/MyComponent.vue'

export {
  MyComponent
}

3. 打包组件库

运行以下命令打包组件库：

npm run build

打包后，组件库将输出到 dist 目录中。

发布组件库

1. 创建 npm 包

使用以下命令创建 npm 包：

npm init -y

2. 配置 package.json

编辑 package.json 文件，包括以下信息：

{
  "name": "my-component-lib",
  "version": "1.0.0",
  "main": "dist/my-component-lib.umd.js",
  "module": "dist/my-component-lib.es.js",
}

3. 发布 npm 包

运行以下命令发布 npm 包：

npm publish

结论

通过遵循本指南，你可以使用 Vue3、Vite、Vitepress、Vitest 和 TSX 构建和发布一个企业级组件库。本文提供了从零到一的详细步骤和示例，让你可以快速高效地完成组件库的构建和发布。