@touchvue/plugin 1.0.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +93 -0
- package/package.json +29 -0
package/README.md
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
# Plugin 构建方案
|
|
2
|
+
|
|
3
|
+
## 概述
|
|
4
|
+
|
|
5
|
+
`@touchvue/plugin` 使用 Vite 进行独立构建，生成 ES 模块和 CommonJS 两种格式，并自动生成 TypeScript 类型声明文件。
|
|
6
|
+
|
|
7
|
+
## 构建配置
|
|
8
|
+
|
|
9
|
+
### Vite 配置文件
|
|
10
|
+
|
|
11
|
+
配置文件位于 `packages/plugin/vite.config.ts`，包含以下特性：
|
|
12
|
+
|
|
13
|
+
- **Vue 组件编译**: 使用 `@vitejs/plugin-vue` 编译 Vue SFC 文件
|
|
14
|
+
- **类型声明生成**: 使用 `vite-plugin-dts` 自动生成 `.d.ts` 文件
|
|
15
|
+
- **样式处理**: 支持 LESS、SCSS 预处理器
|
|
16
|
+
- **路径别名**: 配置 `@` 指向 `src` 目录，`@touchvue/utils` 和 `@touchvue/hooks` 指向对应工作区包
|
|
17
|
+
- **外部依赖**: 将 `vue`、`echarts`、`echarts-gl`、`tinymce` 等标记为外部依赖
|
|
18
|
+
|
|
19
|
+
### 构建输出
|
|
20
|
+
|
|
21
|
+
构建完成后，输出目录结构如下：
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
dist/
|
|
25
|
+
├── index.js # ES 模块入口
|
|
26
|
+
├── index.cjs # CommonJS 入口
|
|
27
|
+
├── index.d.ts # 类型声明文件
|
|
28
|
+
├── components/ # 组件输出
|
|
29
|
+
│ ├── echarts-bar/
|
|
30
|
+
│ ├── echarts-map/
|
|
31
|
+
│ ├── echarts-pie/
|
|
32
|
+
│ ├── editor/
|
|
33
|
+
│ ├── step-tree/
|
|
34
|
+
│ └── watermark/
|
|
35
|
+
└── style/ # 样式文件
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## 构建命令
|
|
39
|
+
|
|
40
|
+
### 基础构建
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
# 在 plugin 目录下
|
|
44
|
+
pnpm build
|
|
45
|
+
|
|
46
|
+
# 或者在根目录下
|
|
47
|
+
pnpm build:plugin
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### 生产环境构建
|
|
51
|
+
|
|
52
|
+
```bash
|
|
53
|
+
pnpm build:prod
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### 类型检查
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
pnpm type-check
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
## 使用方式
|
|
63
|
+
|
|
64
|
+
### 完整引入
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { createApp } from 'vue'
|
|
68
|
+
import TouchVuePlugin from '@touchvue/plugin'
|
|
69
|
+
|
|
70
|
+
const app = createApp()
|
|
71
|
+
app.use(TouchVuePlugin)
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### 按需引入组件
|
|
75
|
+
|
|
76
|
+
```typescript
|
|
77
|
+
import { ToEditor, ToWatermark } from '@touchvue/plugin'
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## 技术栈
|
|
81
|
+
|
|
82
|
+
- **构建工具**: Vite 4.x
|
|
83
|
+
- **Vue 版本**: Vue 3.3+
|
|
84
|
+
- **TypeScript**: 5.x
|
|
85
|
+
- **样式预处理**: LESS、SCSS
|
|
86
|
+
- **类型声明**: vite-plugin-dts
|
|
87
|
+
|
|
88
|
+
## 注意事项
|
|
89
|
+
|
|
90
|
+
1. **外部依赖**: `vue`、`echarts`、`echarts-gl`、`tinymce` 作为 peerDependencies，需要在使用方项目中安装
|
|
91
|
+
2. **样式处理**: Vue SFC 中的 `<style>` 标签会被自动提取并处理
|
|
92
|
+
3. **类型声明**: 构建时会自动生成类型声明文件，无需手动维护
|
|
93
|
+
4. **工作区依赖**: `@touchvue/utils` 和 `@touchvue/hooks` 通过 workspace 协议引用
|
package/package.json
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@touchvue/plugin",
|
|
3
|
+
"version": "1.0.0-beta.1",
|
|
4
|
+
"description": "Vue3 Plugin Library",
|
|
5
|
+
"private": false,
|
|
6
|
+
"type": "module",
|
|
7
|
+
"main": "./index.cjs",
|
|
8
|
+
"module": "./index.mjs",
|
|
9
|
+
"types": "./index.d.ts",
|
|
10
|
+
"exports": {
|
|
11
|
+
".": {
|
|
12
|
+
"import": "./index.mjs",
|
|
13
|
+
"require": "./index.cjs",
|
|
14
|
+
"types": "./index.d.ts"
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"."
|
|
19
|
+
],
|
|
20
|
+
"scripts": {},
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"echarts": "^5.0.0",
|
|
23
|
+
"echarts-gl": "^2.0.0",
|
|
24
|
+
"tinymce": "^4.9.11",
|
|
25
|
+
"vue": "^3.3.0"
|
|
26
|
+
},
|
|
27
|
+
"dependencies": {},
|
|
28
|
+
"devDependencies": {}
|
|
29
|
+
}
|