# 🚀 FeatNPM - 功能级依赖管理器 [![npm version](https://img.shields.io/npm/v/featnpm.svg)](https://www.npmjs.com/package/featnpm) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Node.js Version](https://img.shields.io/node/v/featnpm.svg)](https://nodejs.org/) [![CI](https://github.com/featnpm/featnpm/workflows/CI/badge.svg)](https://github.com/featnpm/featnpm/actions) **中文** | [English](./README_EN.md) > 功能级依赖管理器（Feature-Level Dependency Manager）—— 让前端项目功能管理变得简单而优雅 > Feature-Level Dependency Manager - Making frontend project feature management simple and elegant FeatNPM 是一个基于"功能模块（Feature）"的前端项目增强工具。它不仅用于初始化项目，更能在项目完整生命周期中使用，帮助你按需添加和移除功能，告别臃肿的项目依赖。 FeatNPM is a feature-based frontend project enhancement tool. It's not just for project initialization, but can be used throughout the entire project lifecycle, helping you add and remove features on-demand, saying goodbye to bloated project dependencies. ## ✨ 核心特性 - 🎯 **按需添加功能** - 不再需要一次性安装所有依赖 - 🔄 **可逆操作** - 安全地添加和移除功能，项目始终保持整洁 - 🏥 **依赖治理** - 自动检查项目健康状态，发现未管理的依赖 - 🔌 **插件化架构** - 支持自定义 Feature 模块，灵活扩展 - 🎨 **多框架支持** - Vue、React、Angular（规划中） - 📦 **丰富的 Feature 库** - 内置 50+ 常用 Feature 模块 - 🔧 **npm 兼容** - 命令与 npm 保持一致，零学习成本 ## 📦 安装 ```bash # npm npm install -g featnpm # yarn yarn global add featnpm # pnpm pnpm add -g featnpm ``` ## 🚀 快速开始 ### 1. 搜索功能模块 ```bash # 查看所有可用的 Feature featnpm search # 或 featnpm features # 搜索特定功能 featnpm search vue featnpm search ui ``` ### 2. 安装功能模块 ```bash # 安装 UI 组件库（交互式选择） featnpm install ui featnpm i ui # 直接安装特定 Feature featnpm install element-plus featnpm i axios ``` ### 3. 查看已安装的功能 ```bash # 简单列表 featnpm list featnpm ls # JSON 格式输出 featnpm list --json # 详细信息 featnpm list --long ``` ### 4. 查看包详细信息 ```bash # 查看 Feature 的详细信息 featnpm info element-plus featnpm show axios # JSON 格式输出 featnpm info element-plus --json ``` ### 5. 查看项目依赖包信息 ```bash # 显示所有依赖包的详细信息（描述、文档URL等） featnpm packages featnpm deps # JSON 格式输出 featnpm packages --json ``` ### 6. 检查项目健康状态 ```bash featnpm doctor ``` ### 7. 移除功能模块 ```bash # 交互式确认 featnpm remove element-plus featnpm rm element-plus # 强制移除（跳过确认） featnpm remove element-plus --force ``` ## 📖 使用指南 ### 命令兼容性 FeatNPM 的命令与 npm 保持一致，如果你熟悉 npm，就可以直接使用： | featnpm | npm | 说明 | |---------|-----|------| | `featnpm install ` | `npm install ` | 安装功能模块 | | `featnpm i ` | `npm i ` | 安装（短别名） | | `featnpm uninstall ` | `npm uninstall ` | 卸载功能模块 | | `featnpm remove ` | `npm remove ` | 卸载（别名） | | `featnpm rm ` | `npm rm ` | 卸载（短别名） | | `featnpm list` | `npm list` | 列出已安装的功能 | | `featnpm ls` | `npm ls` | 列出（短别名） | | `featnpm search ` | `npm search ` | 搜索功能模块 | | `featnpm info ` | `npm view ` | 显示包详细信息 | | `featnpm show ` | `npm show ` | 显示（别名） | | `featnpm packages` | - | 显示项目依赖包信息（FeatNPM 特有） | | `featnpm doctor` | `npm doctor` | 检查项目健康状态 | 详细兼容性说明请查看 [CLI_COMPATIBILITY.md](./CLI_COMPATIBILITY.md) ### 常用选项 - `--dry-run` - 显示将要执行的操作，但不实际执行 - `--force` - 强制执行，忽略冲突检查 - `--json` - 以 JSON 格式输出 - `--long` - 显示详细信息 ## 📦 可用的 Feature 模块 FeatNPM 内置了 50+ 常用 Feature 模块，涵盖以下类别： ### UI 框架 (3) - `element-plus` - Vue3 UI 组件库 - `naive-ui` - Vue 3 组件库，使用 TypeScript 开发 - `reka-ui` - 基于 Radix UI 的 Vue 组件库 ### UI 组件 (6) - `canvas-confetti` - 彩纸动画效果 - `number-flow` - 数字流动画组件 - `vue-sonner` - 优雅的 Toast 通知 - `lucide-icons` - 精美的图标库 - `embla-carousel` - 轻量级轮播图组件 - `medium-zoom` - 图片缩放查看器 ### HTTP 客户端 (3) - `axios` - 基于 Promise 的 HTTP 客户端 - `ky` - 基于 Fetch 的轻量级 HTTP 客户端 - `ofetch` - 基于 Fetch 的更好的 HTTP 客户端（Nuxt 官方推荐） ### 图表库 (2) - `echarts` - 百度开源的强大图表库 - `chartjs` - 简单灵活的 JavaScript 图表库 ### 表格组件 (1) - `vxe-table` - Vue 表格解决方案，功能强大 ### 工具库 (19) - `vueuse` - Vue 组合式函数工具集 - `dayjs` - 轻量级日期处理库 - `lodash` - 现代 JavaScript 实用工具库 - `immer` - 通过不可变数据结构创建下一个状态 - `tanstack-query` - 强大的异步状态管理和数据获取库 - `mermaid` - 从文本生成图表和流程图 - `clsx` + `class-variance-authority` - 条件类名和类变体管理 - `defu` - 对象深度合并工具 - `qs` - 查询字符串解析工具 - `es-toolkit` - 现代化的工具库集合 - `filesize` - 文件大小格式化工具 - `pinyin-pro` - 中文转拼音工具库 - `ua-parser` - 用户代理解析工具 - `path-to-regexp` - 路径匹配和生成工具 - `scule` - 字符串大小写转换工具 - `tailwind-merge` - Tailwind CSS 类名合并工具 - `mitt` - 轻量级事件总线 - `hotkeys-js` - 快捷键管理库 - `zumer-snapdom` - DOM 快照工具 ### TypeScript 工具 (3) - `zod` - TypeScript 优先的模式验证库 - `tsx` - TypeScript 执行器，无需编译即可运行 TS/TSX - `typescript` - JavaScript 的超集，添加了静态类型 ### 测试框架 (2) - `vitest` - 基于 Vite 的快速单元测试框架 - `jest` - JavaScript 测试框架，零配置 ### 验证 (1) - `vee-validate-zod` - Vue 表单验证库（VeeValidate + Zod） ### 安全 (2) - `disable-devtool` - 禁用开发者工具 - `watermark` - 页面水印工具 ### 状态管理 (1) - `pinia` - Vue 官方状态管理库 ### 路由 (1) - `vue-router` - Vue.js 官方路由管理器 ### 国际化 (1) - `vue-i18n` - Vue.js 国际化插件 ### 动画 (3) - `gsap` - 专业级 JavaScript 动画库 - `nprogress` - 页面加载进度条 - `motion-v` - Vue 动画库 ### 交互 (2) - `v-wave` - Vue 水波纹点击效果 - `sortablejs` - 拖拽排序库 完整的 Feature 列表请运行 `featnpm search` 查看。 ## 🏗️ 项目结构 安装 Feature 后，FeatNPM 会在项目根目录创建 `features.json` 来追踪已安装的 Feature： ```json { "version": "1.0.0", "framework": "vue", "packageManager": "pnpm", "projectRoot": "/path/to/project", "features": { "element-plus": { "id": "element-plus", "version": "^2.4.0", "installedAt": "2024-01-15T10:00:00Z", "dependencies": ["element-plus", "@element-plus/icons-vue"], "files": ["src/plugins/element-plus.ts", "src/styles/element-plus.scss"] } } } ``` ## 🛠️ 开发 ```bash # 克隆仓库 git clone https://github.com/featnpm/featnpm.git cd featnpm # 安装依赖 pnpm install # 开发模式运行 pnpm run dev # 构建 pnpm run build # 类型检查 pnpm run type-check # 测试 pnpm test # 代码检查 pnpm run lint # 代码格式化 pnpm run format ``` ## 📚 Feature 模块开发 FeatNPM 支持**简化配置**方式，让第三方厂商在 GitHub 上轻松添加 Feature，只需提供配置信息即可！ ### 🚀 最简单的方式（推荐） 在 `src/features/` 目录下创建一个 `.ts` 文件，提供配置信息即可： ```typescript import type { SimpleFeatureConfig } from "../types/feature-config.js"; const config: SimpleFeatureConfig = { meta: { id: "my-package", name: "My Package", desc: "我的包描述", category: "utils", dependencies: ["my-package"], framework: ["vue", "react"] as const, version: "^1.0.0", github: "https://github.com/example/my-package", }, install: { // 可选：生成文件 files: [ { path: "src/utils/my-util.ts", content: `import { myUtil } from 'my-package'; export function useMyUtil() { return myUtil(); } `, }, ], }, uninstall: { files: ["src/utils/my-util.ts"], }, }; export default config; ``` **就这么简单！** 系统会自动处理： - ✅ 依赖安装和卸载 - ✅ 文件生成和删除 - ✅ 配置文件合并 - ✅ features.json 管理 ### 在 GitHub 上添加 Feature 1. Fork 本项目 2. 在 `src/features/` 目录下创建新文件，例如 `my-package.ts` 3. 按照上面的格式编写配置 4. 提交 Pull Request ### 直接在 GitHub 上提交 直接在 `src/features/` 目录下创建配置文件，参考 `src/features/example-simple.ts` 示例。 ### 详细文档 - [简化配置指南](./docs/SIMPLE_FEATURE_GUIDE.md) - **推荐阅读**，最简单的添加方式 - [完整开发指南](./docs/FEATURE_DEVELOPMENT.md) - 需要自定义安装逻辑时使用 ### Feature 模块示例 ```typescript import type { FeatureModule, FeatureContext } from '../../types/index.js'; export const meta = { id: 'my-feature', name: 'My Feature', desc: '功能描述', category: 'category', dependencies: ['package-name'], conflicts: [], framework: ['vue'] as const, docs: 'https://example.com/docs', }; export async function apply(context: FeatureContext): Promise { const { projectRoot, packageManager } = context; // 1. 安装依赖 // 2. 生成文件 // 3. 更新配置 // 4. 更新 features.json } export async function remove(context: FeatureContext): Promise { // 1. 卸载依赖 // 2. 清理文件 // 3. 恢复配置 } export async function check(context: FeatureContext) { // 检查冲突和前置条件 return { canApply: true }; } const myFeature: FeatureModule = { meta, apply, remove, check }; export default myFeature; ``` 详细的开发指南请查看： - [Feature 开发指南](./docs/FEATURE_DEVELOPMENT.md) - 如何创建和发布 Feature 模块 - [贡献指南](./CONTRIBUTING.md) - 如何参与项目开发 ## 🤝 贡献 欢迎贡献！请阅读 [CONTRIBUTING.md](./CONTRIBUTING.md) 了解如何参与项目。 ## 📝 License MIT License - 查看 [LICENSE](./LICENSE) 文件了解详情 ## 🔗 相关链接 - 📖 [GitHub 仓库](https://github.com/featnpm/featnpm) - 📝 [贡献指南](./CONTRIBUTING.md) - 📋 [变更日志](./CHANGELOG.md) - 🔒 [安全政策](./SECURITY.md) ## 🙏 致谢 感谢所有为这个项目做出贡献的开发者和用户！ --- **Made with ❤️ by FeatNPM Contributors**