构建复杂组件并发布到 NPM：基于 Vite + Vue 3.2 的指南

2023-10-16 16:23:27

前言

随着前端开发的不断发展，使用 UI 组件库来构建复杂的 Web 应用程序变得越来越普遍。组件可以提高开发效率、保持代码的一致性并简化维护。本指南将向您展示如何使用 Vite 和 Vue 3.2 构建和发布您的前端组件。

创建组件

首先，让我们创建一个新的 Vite 项目：

npm create vite@latest my-component-lib --template vue

这将创建一个新的 Vite 项目，使用 Vue 3.2 作为框架。

接下来，在 src 目录中创建两个组件：Button.vue 和 Input.vue。以下是 Button.vue 的示例代码：

<template>
  <button class="button" :class="{ 'button--primary': primary }">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button',
  props: {
    primary: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

编写单元测试

在继续进行之前，让我们先编写一些单元测试。在 tests/unit 目录中创建一个 Button.spec.js 文件，并添加以下内容：

import { shallowMount } from '@vue/test-utils';
import Button from '@/components/Button.vue';

describe('Button', () => {
  it('renders a button with the correct class', () => {
    const wrapper = shallowMount(Button, { props: { primary: true } });
    expect(wrapper.classes()).toContain('button--primary');
  });
});

这将测试 Button 组件是否渲染了一个带有正确 class 的按钮。

配置 Vite 和 Rollup

接下来，我们需要配置 Vite 和 Rollup 以进行生产构建。在 vite.config.js 中添加以下内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vuetify from '@vuetify/vite-plugin';

export default defineConfig({
  plugins: [vue(), vuetify()],
  build: {
    rollupOptions: {
      output: {
        format: 'umd',
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});