功能级依赖管理器(Feature-Level Dependency Manager)
npm install 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 保持一致,零学习成本
``bashnpm
npm install -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 lsJSON 格式输出
featnpm list --json详细信息
featnpm list --long
`$3
`bash
查看 Feature 的详细信息
featnpm info element-plus
featnpm show axiosJSON 格式输出
featnpm info element-plus --json
`$3
`bash
显示所有依赖包的详细信息(描述、文档URL等)
featnpm packages
featnpm depsJSON 格式输出
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';,
},
],
}, 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 了解如何参与项目。
MIT License - 查看 LICENSE 文件了解详情
- 📖 GitHub 仓库
- 📝 贡献指南
- 📋 变更日志
- 🔒 安全政策
感谢所有为这个项目做出贡献的开发者和用户!
---
Made with ❤️ by FeatNPM Contributors