# component-pack

**Repository Path**: vrx/component-pack

## Basic Information

- **Project Name**: component-pack
- **Description**: 自用快速搭建组件库工具
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-23
- **Last Updated**: 2025-08-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# @vrx/cp

为 使用.tsx,.ts,.vue 方案的 vue3 组件库进行打包

> 该包处于实验阶段，API 不稳定

## 特性

- 生成.d.ts 文件
- 生成 components.d.ts
- 生成 web-types.json

## 简单使用
```
pnpm exec vrx-cp build
```

## 组件信息配置文件

> 用于覆盖自动组件信息解析时遗漏或解析错误的配置

```ts
import { defineGenDoc } from '@vrx/cp'

export default defineGenDoc([
  {
  name: 'Progress',
  props: {
    percent: {
      type: 'number',
      desc: '百分比 0.1 形式',
    },
    title: {
      type: 'string',
      desc: '标题',
    },
  },
  events: {
    click: {
      desc: '点击事件',
    },
  },
  slots: {
    label: {
      name: 'label',
      desc: '标题',
    },
  },
}
])
```

## 配置文件

- vrx-cp.config.{ts,js}
- vrx-cp.{toml,yaml,yml,jsonc,json5,json}
- package.json#vrx-cp

> ⚠️ 由于[vite5.0废弃了cjs module](https://vitejs.dev/guide/migration.html#deprecate-cjs-node-api)的原因，配置文件在使用 js/ts编写时只能使用esm格式

```ts
import { defineConfig } from '@vrx/cp'

export default defineConfig({
  // 入口文件 默认 src/index.ts
  entry: 'src/index.ts',
})
```


## autoprefixer 样式

可以 根据 [.browserslistrc](https://browsersl.ist/) 文件自动添加浏览器前缀

```
# Browsers that we support

last 1 version
> 1%
not dead # no browsers without security updates
```

## 试验性功能


### watch mode

监听 源码目录，当文件发生改变时，重新执行打包操作

```shell
pnpm exec vrx-cp build --watch
# or
pnpm exec vrx-cp watch
```