Craft-X 组件库项目依赖解析
📌 项目描述
- 名称: Craft-X
- 类型: Vue 3 组件库
- 构建工具: Vite
- 文档: VitePress
- 模块格式: ESM & UMD
- 目标: 让使用者可以直接使用，不需要额外安装相同的依赖
📌 依赖优化
- 将
dependencies 中仅用于开发的依赖移动到 devDependencies - 组件库核心功能所需的依赖保留在
dependencies - 确保使用者不需要重复安装组件库的核心依赖
📌 dependencies（运行时依赖 - 用户安装组件库后仍需要）
这些依赖 会被打包到组件库的最终产物中，使用者无需再次安装。
🚀 1. Vue 相关
| 依赖 | 作用 |
|---|
vue | Vue 3 核心库，组件库必须依赖 Vue 运行。 |
🚀 2. 核心功能
| 依赖 | 作用 |
|---|
tinycolor2 | 颜色处理库，用于计算颜色渐变、转换颜色格式等。 |
autoprefixer | CSS 预处理工具，根据 目标浏览器列表 自动添加 浏览器前缀（如 -webkit-、-moz-、-ms-）以提高 CSS 兼容性。 |
crypto-js | 加密库，提供 MD5、SHA256、AES 等加密功能。 |
dayjs | 轻量级日期处理库，代替 Moment.js，处理时间格式化等。 |
lodash-es | Lodash 的 ES 模块版本，提供高性能的工具函数。 |
mitt | 轻量级事件总线（Event Bus），用于组件间通信。 |
sass | SASS/SCSS 预处理器，用于样式管理。 |
semver | 语义化版本管理工具，用于解析版本号。 |
ssh2-sftp-client | SSH/SFTP 客户端库，用于自动化文件上传等。 |
📌 devDependencies（开发依赖 - 仅用于开发，不会被打包）
这些依赖 仅在开发时使用，不会包含在最终的组件库中，因此 使用者无需安装它们。
🚀 1. Vite & 构建工具
| 依赖 | 作用 |
|---|
vite | 前端构建工具，用于本地开发和打包组件库。 |
vitepress | Vite 官方的文档生成工具，用于编写组件库文档。 |
@vitejs/plugin-vue | Vue 3 的官方 Vite 插件，让 Vite 正确编译 .vue 组件。 |
@vitejs/plugin-vue-jsx | Vue 3 JSX 支持，让 Vue 组件可以使用 JSX 语法。 |
🚀 2. TypeScript & 类型支持
| 依赖 | 作用 |
|---|
typescript | TypeScript 编译器，让组件库支持 TS。 |
@types/crypto-js | CryptoJS 的 TypeScript 类型，保证 crypto-js 代码有类型提示。 |
@types/lodash-es | Lodash-ES 的 TypeScript 类型。 |
@types/node | Node.js API 的类型定义，确保 fs、path 这些 API 有类型提示。 |
🚀 3. Vue 生态 & 组件增强
| 依赖 | 作用 |
|---|
@vueuse/core | VueUse 核心库，提供丰富的 Vue 组合式 API（如 useDark()、useLocalStorage()）。 |
@vueuse/head | VueUse 的 useHead() 插件，用于动态修改 <head> 标签，如 <title> 和 <meta> 信息。 |
unplugin-auto-import | 自动导入 Vue API（如 ref、computed，无需手动 import）。 |
unplugin-vue-components | 自动注册 Vue 组件，不需要手动 import 组件。 |
🚀 4. CLI & 开发工具
| 依赖 | 作用 |
|---|
inquirer | CLI 交互工具，用于创建 CLI 命令交互。 |
markdown-it-container | Markdown 解析扩展，用于解析 Markdown 代码块。 |
📌 修正后的 package.json
{
"name": "craft-x",
"private": true,
"version": "0.0.0",
"author": "conorg@162.com",
"description": "",
"type": "module",
"main": "lib/index.umd.js",
"scripts": {
"dev": "vite",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
"build": "node scripts/build-lib.js"
},
"exports": {
".": {
"import": "./lib/index.es.js",
"require": "./lib/index.umd.js"
},
"./styles": {
"import": "./lib/index.css",
"require": "./lib/index.css"
}
},
"files": ["lib", "README.md", "LICENSE"],
"dependencies": {
"tinycolor2": "^1.6.0",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.13",
"lodash-es": "^4.17.21",
"mitt": "^3.0.1",
"sass": "^1.77.8",
"semver": "^7.7.1",
"ssh2-sftp-client": "^11.0.0",
"vue": "^3.4.29"
},
"devDependencies": {
"autoprefixer": "^10.4.21",
"vite": "^6.0.2",
"vitepress": "^1.6.3",
"@vitejs/plugin-vue": "^5.1.2",
"@vitejs/plugin-vue-jsx": "^4.0.1",
"typescript": "^5.2.2",
"@types/crypto-js": "^4.2.2",
"@types/lodash-es": "^4.17.12",
"@types/node": "^20.16.5",
"@vueuse/core": "^11.0.3",
"@vueuse/head": "^2.0.0",
"unplugin-auto-import": "^0.18.0",
"unplugin-vue-components": "^0.27.3",
"inquirer": "^12.4.2",
"markdown-it-container": "^4.0.0"
}
}