Plugin 构建方案

概述

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

构建配置

$3

配置文件位于 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 等标记为外部依赖

$3

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

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

构建命令

$3

`bash

在 plugin 目录下

pnpm build

或者在根目录下

pnpm build:plugin
`

$3

`bash
pnpm build:prod
`

$3

`bash
pnpm type-check
`

使用方式

$3

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

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

$3

`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 中的