# Plugin 构建方案

## 概述

`@touchvue/plugin` 使用 Vite 进行独立构建，生成 ES 模块和 CommonJS 两种格式，并自动生成 TypeScript 类型声明文件。

## 构建配置

### Vite 配置文件

配置文件位于 `packages/plugin/vite.config.ts`，包含以下特性：

- **Vue 组件编译**: 使用 `@vitejs/plugin-vue` 编译 Vue SFC 文件
- **类型声明生成**: 使用 `vite-plugin-dts` 自动生成 `.d.ts` 文件
- **样式处理**: 支持 LESS、SCSS 预处理器
- **路径别名**: 配置 `@` 指向 `src` 目录，`@touchvue/utils` 和 `@touchvue/hooks` 指向对应工作区包
- **外部依赖**: 将 `vue`、`echarts`、`echarts-gl`、`tinymce` 等标记为外部依赖

### 构建输出

构建完成后，输出目录结构如下：

```
dist/
├── index.js          # ES 模块入口
├── index.cjs         # CommonJS 入口
├── index.d.ts        # 类型声明文件
├── components/       # 组件输出
│   ├── echarts-bar/
│   ├── echarts-map/
│   ├── echarts-pie/
│   ├── editor/
│   ├── step-tree/
│   └── watermark/
└── style/            # 样式文件
```

## 构建命令

### 基础构建

```bash
# 在 plugin 目录下
pnpm build

# 或者在根目录下
pnpm build:plugin
```

### 生产环境构建

```bash
pnpm build:prod
```

### 类型检查

```bash
pnpm type-check
```

## 使用方式

### 完整引入

```typescript
import { createApp } from 'vue'
import TouchVuePlugin from '@touchvue/plugin'

const app = createApp()
app.use(TouchVuePlugin)
```

### 按需引入组件

```typescript
import { ToEditor, ToWatermark } from '@touchvue/plugin'
```

## 技术栈

- **构建工具**: Vite 4.x
- **Vue 版本**: Vue 3.3+
- **TypeScript**: 5.x
- **样式预处理**: LESS、SCSS
- **类型声明**: vite-plugin-dts

## 注意事项

1. **外部依赖**: `vue`、`echarts`、`echarts-gl`、`tinymce` 作为 peerDependencies，需要在使用方项目中安装
2. **样式处理**: Vue SFC 中的 `<style>` 标签会被自动提取并处理
3. **类型声明**: 构建时会自动生成类型声明文件，无需手动维护
4. **工作区依赖**: `@touchvue/utils` 和 `@touchvue/hooks` 通过 workspace 协议引用