🚀 FeatNPM - 功能级依赖管理器


中文 | English

> 功能级依赖管理器（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
`

🚀 快速开始

$3

`bash


查看所有可用的 Feature

featnpm search

或

featnpm features

搜索特定功能

featnpm search vue
featnpm search ui
`

$3

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

$3

`bash


查看 Feature 的详细信息

featnpm info element-plus
featnpm show axios

JSON 格式输出

featnpm info element-plus --json
`

$3

`bash


显示所有依赖包的详细信息（描述、文档URL等）

featnpm packages
featnpm deps

JSON 格式输出

featnpm packages --json
`

$3

`bash
featnpm doctor
`

$3

`bash


交互式确认

featnpm remove element-plus
featnpm rm element-plus

强制移除（跳过确认）

featnpm remove element-plus --force
`

📖 使用指南

$3

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

$3

- --dry-run - 显示将要执行的操作，但不实际执行
- --force - 强制执行，忽略冲突检查
- --json - 以 JSON 格式输出
- --long - 显示详细信息

📦 可用的 Feature 模块

FeatNPM 内置了 50+ 常用 Feature 模块，涵盖以下类别：

$3


- element-plus - Vue3 UI 组件库
- naive-ui - Vue 3 组件库，使用 TypeScript 开发
- reka-ui - 基于 Radix UI 的 Vue 组件库

$3

- canvas-confetti - 彩纸动画效果
- number-flow - 数字流动画组件
- vue-sonner - 优雅的 Toast 通知
- lucide-icons - 精美的图标库
- embla-carousel - 轻量级轮播图组件
- medium-zoom - 图片缩放查看器

$3

- axios - 基于 Promise 的 HTTP 客户端
- ky - 基于 Fetch 的轻量级 HTTP 客户端
- ofetch - 基于 Fetch 的更好的 HTTP 客户端（Nuxt 官方推荐）

$3

- echarts - 百度开源的强大图表库
- chartjs - 简单灵活的 JavaScript 图表库

$3

- vxe-table - Vue 表格解决方案，功能强大

$3

- 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 快照工具

$3

- zod - TypeScript 优先的模式验证库
- tsx - TypeScript 执行器，无需编译即可运行 TS/TSX
- typescript - JavaScript 的超集，添加了静态类型

$3

- vitest - 基于 Vite 的快速单元测试框架
- jest - JavaScript 测试框架，零配置

$3

- vee-validate-zod - Vue 表单验证库（VeeValidate + Zod）

$3

- disable-devtool - 禁用开发者工具
- watermark - 页面水印工具

$3

- pinia - Vue 官方状态管理库

$3

- vue-router - Vue.js 官方路由管理器

$3

- vue-i18n - Vue.js 国际化插件

$3

- gsap - 专业级 JavaScript 动画库
- nprogress - 页面加载进度条
- motion-v - Vue 动画库

$3

- 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，只需提供配置信息即可！

$3

在 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 管理

$3

1. Fork 本项目
2. 在 src/features/ 目录下创建新文件，例如 my-package.ts
3. 按照上面的格式编写配置
4. 提交 Pull Request

$3

直接在 src/features/ 目录下创建配置文件，参考 src/features/example-simple.ts 示例。

$3

- 简化配置指南 - 推荐阅读，最简单的添加方式
- 完整开发指南 - 需要自定义安装逻辑时使用

$3

`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 开发指南 - 如何创建和发布 Feature 模块
- 贡献指南 - 如何参与项目开发

🤝 贡献

欢迎贡献！请阅读 CONTRIBUTING.md 了解如何参与项目。

📝 License

MIT License - 查看 LICENSE 文件了解详情

🔗 相关链接

- 📖 GitHub 仓库
- 📝 贡献指南
- 📋 变更日志
- 🔒 安全政策

🙏 致谢

感谢所有为这个项目做出贡献的开发者和用户！

---

Made with ❤️ by FeatNPM Contributors