Vite+TS打造Vue组件库

2023-09-29 08:05:16

引言

大家好，欢迎来到本期教程。上一节，我们使用pnpm搭建好了项目库，本节，我们将开始创建一个Vue组件库。我们将使用Vite和TypeScript，并对组件库进行打包、单元测试，最后发布至npm。让我们开始吧！

1. 使用Vite和TypeScript创建UI组件库

首先，让我们创建一个新的Vite项目。为此，我们可以使用以下命令：

pnpm create vite-vue-component-library

进入新创建的项目目录后，我们可以安装必要的依赖项：

pnpm add vite @vitejs/plugin-vue @vue/compiler-sfc typescript

接下来，我们需要创建一个新的组件。为此，我们可以使用以下命令：

pnpm run generate component Button

这将在src/components目录中创建一个新的Button.vue文件。

接下来，我们需要在vite.config.ts文件中配置Vite。我们可以使用以下配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'VueComponentLibrary',
      fileName: 'vue-component-library',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

现在，我们可以通过运行以下命令来启动Vite开发服务器：

pnpm run dev

这将在http://localhost:3000上启动开发服务器。

2. 编写测试用例

在开始之前，我们需要安装必要的依赖项：

pnpm add @vue/test-utils jest

接下来，我们需要在package.json文件中配置Jest。我们可以使用以下配置：

{
  "scripts": {
    "test": "jest",
    "test:watch": "jest --watch"
  },
  "jest": {
    "transform": {
      "^.+\\.vue$": "@vue/vue3-jest"
    }
  }
}

现在，我们可以通过运行以下命令来运行测试：

pnpm run test

3. 发布至npm

在发布组件库之前，我们需要进行构建。我们可以通过运行以下命令来构建组件库：

pnpm run build

这将在dist目录中生成一个新的vue-component-library目录。

接下来，我们需要在package.json文件中添加以下内容：

{
  "name": "vue-component-library",
  "version": "1.0.0",
  "main": "dist/vue-component-library/index.js",
  "module": "dist/vue-component-library/index.esm.js",
  "typings": "dist/vue-component-library/index.d.ts",
  "files": [
    "dist/vue-component-library"
  ],
  "scripts": {
    "build": "pnpm run build",
    "test": "pnpm run test",
    "publish": "pnpm run build && npm publish dist/vue-component-library"
  },
  "keywords": [
    "vite",
    "vue",
    "component library",
    "ui components"
  ],
  "author": "Your Name",
  "license": "MIT"
}