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/            # 样式文件

构建命令

基础构建

# 在 plugin 目录下
pnpm build

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

生产环境构建

pnpm build:prod

类型检查

pnpm type-check

使用方式

完整引入

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

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

按需引入组件

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 协议引用