featnpm

v0.2.29

Published

4 months ago

功能级依赖管理器（Feature-Level Dependency Manager）

0High
0Medium
0Low

xionglilong

featnpm feature dependency-manager cli vue react scaffold project-management feature-modules frontend-tools

🚀 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 保持一致，零学习成本

📦 安装

# npm
npm install -g featnpm

# yarn
yarn global add featnpm

# pnpm
pnpm add -g featnpm

🚀 快速开始

1. 搜索功能模块

# 查看所有可用的 Feature
featnpm search
# 或
featnpm features

# 搜索特定功能
featnpm search vue
featnpm search ui

2. 安装功能模块

# 安装 UI 组件库（交互式选择）
featnpm install ui
featnpm i ui

# 直接安装特定 Feature
featnpm install element-plus
featnpm i axios

3. 查看已安装的功能

# 简单列表
featnpm list
featnpm ls

# JSON 格式输出
featnpm list --json

# 详细信息
featnpm list --long

4. 查看包详细信息

# 查看 Feature 的详细信息
featnpm info element-plus
featnpm show axios

# JSON 格式输出
featnpm info element-plus --json

5. 查看项目依赖包信息

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

# JSON 格式输出
featnpm packages --json

6. 检查项目健康状态

featnpm doctor

7. 移除功能模块

# 交互式确认
featnpm remove element-plus
featnpm rm element-plus

# 强制移除（跳过确认）
featnpm remove element-plus --force

📖 使用指南

命令兼容性

FeatNPM 的命令与 npm 保持一致，如果你熟悉 npm，就可以直接使用：

| featnpm | npm | 说明 | |---------|-----|------| | featnpm install <feature> | npm install <package> | 安装功能模块 | | featnpm i <feature> | npm i <package> | 安装（短别名） | | featnpm uninstall <feature> | npm uninstall <package> | 卸载功能模块 | | featnpm remove <feature> | npm remove <package> | 卸载（别名） | | featnpm rm <feature> | npm rm <package> | 卸载（短别名） | | featnpm list | npm list | 列出已安装的功能 | | featnpm ls | npm ls | 列出（短别名） | | featnpm search <query> | npm search <query> | 搜索功能模块 | | featnpm info <feature> | npm view <package> | 显示包详细信息 | | featnpm show <feature> | npm show <package> | 显示（别名） | | featnpm packages | - | 显示项目依赖包信息（FeatNPM 特有） | | featnpm doctor | npm doctor | 检查项目健康状态 |

详细兼容性说明请查看 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：

{
  "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"]
    }
  }
}

🛠️ 开发

# 克隆仓库
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 文件，提供配置信息即可：

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

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

直接在 GitHub 上提交

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

详细文档

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

Feature 模块示例

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<void> {
  const { projectRoot, packageManager } = context;
  // 1. 安装依赖
  // 2. 生成文件
  // 3. 更新配置
  // 4. 更新 features.json
}

export async function remove(context: FeatureContext): Promise<void> {
  // 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 文件了解详情

🔗 相关链接

🙏 致谢

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

Made with ❤️ by FeatNPM Contributors