前端组件库构建之旅：Vue3、TypeScript、pnpm、rollup/gulp 强强联合

2023-12-31 13:33:29

踏上构建组件库的进阶之旅，我们将一起探索如何将 Vue3、TypeScript、pnpm、rollup/gulp 等强大工具组合起来，创造出高效、可扩展、文档齐全的前端组件库。

1. 工程环境搭建：Vue3、TypeScript、pnpm 的强强联合

首先，让我们为组件库搭建一个稳固的工程环境。我们将使用 Vue3 作为组件开发框架，TypeScript 作为类型检查工具，以及 pnpm 作为包管理工具。

安装 Vue3 CLI

npm install -g @vue/cli

创建一个新的 Vue3 项目

vue create my-component-library

集成 TypeScript

vue add typescript

安装 pnpm

npm install -g pnpm

使用 pnpm 管理依赖项

在 package.json 文件中将 npm 替换为 pnpm。

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A collection of reusable Vue3 components",
  "main": "dist/index.js",
  "scripts": {
    "dev": "pnpm run serve",
    "build": "pnpm run build",
    "serve": "vue-tsc --noEmit --watch --mode=development src/index.ts",
    "build": "vue-tsc --noEmit src/index.ts"
  },
  "dependencies": {
    "typescript": "^4.7.4",
    "vue": "^3.2.33"
  },
  "devDependencies": {
    "@vue/cli-plugin-typescript": "~0.20.0",
    "pnpm": "^7.21.0",
    "vue-tsc": "^0.32.12"
  }
}

2. 构建组件库：rollup/gulp 助力自动化

接下来，我们将使用 rollup 或 gulp 来构建我们的组件库。这两个工具都非常适合组件库的构建，它们可以帮助我们自动执行打包、压缩、代码分割等任务。

安装 rollup 或 gulp

npm install -D rollup
# 或
npm install -D gulp

创建构建配置文件

在 package.json 文件中添加以下脚本：

{
  "scripts": {
    "build:lib": "rollup -c rollup.config.js",
    # 或
    "build:lib": "gulp build"
  }
}

编写构建配置

根据您选择的工具，编写相应的构建配置。

rollup.config.js

import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'es'
  },
  plugins: [
    terser()
  ]
};

gulpfile.js

const { src, dest } = require('gulp');
const terser = require('gulp-terser');

function build() {
  return src('src/index.ts')
    .pipe(terser())
    .pipe(dest('dist'));
}

exports.build = build;

构建组件库

npm run build:lib

3. 文档编写：vitepress 赋能组件理解

组件库的文档是必不可少的，它可以让开发者快速了解和使用组件。我们将使用 vitepress 来编写组件文档。

安装 vitepress

npm install -D vitepress

在项目中创建一个 docs 目录。

初始化 vitepress

npx vitepress init

编写文档

在 docs 目录中编写组件文档。

构建文档

npm run docs:build

4. 开源与发布：让组件库走向世界

最后，我们将组件库开源并发布到 npm 上，以便其他开发者可以轻松使用。

在 GitHub 上创建仓库

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/your-username/my-component-library.git
git push -u origin main