lhly/cloud-drive-renamer
1
0
派生 0
镜像自地址 https://github.com/lhly/cloud-drive-renamer.git 已同步 2026-10-20 05:37:47 +08:00
代码 工单 Actions 项目 版本发布 百科 动态 提交记录
dev
cloud-drive-renamer/docs/SCRIPTS.md
Zain 4b224761b6 refactor(ci): 优化 CI 流程并精简 npm scripts 
docs: 添加 SCRIPTS.md 文档说明新命令集
style: 添加代码注释说明性能指标和 polyfill 状态
ci: 合并测试步骤为单一命令并优化构建验证
2025-12-16 17:58:20 +08:00

6.5 KiB
原始文件 永久链接 Blame 文件历史

📋 NPM Scripts 使用指南

精简后的命令集：从 30 个减少到 16 个核心命令（减少 47%）

🚀 核心开发命令

npm run dev

启动开发服务器

  • 自动同步版本号
  • 启动 Vite 热更新开发服务器
  • 实时预览扩展功能
npm run dev

npm run build

完整质量检查 + 生产构建 ✨

  • ✅ 自动同步版本号
  • ✅ ESLint 代码检查
  • ✅ TypeScript 类型检查
  • ✅ 单元测试 + 覆盖率
  • ✅ 编译构建
  • 🎯 质量门控设计：确保所有质量检查通过才能构建成功
npm run build

为什么 build 包含这么多步骤？ 这是有意的质量门控（Quality Gate）设计，防止遗漏检查导致问题上线。如果需要快速测试构建，可以使用 npm run validate 预检查。

npm run preview

预览生产构建

  • 本地预览构建产物
  • 验证生产环境行为
npm run build
npm run preview

🔍 代码质量命令

npm run lint

运行 ESLint 检查

  • 检查代码规范问题
  • 不自动修复
npm run lint

npm run lint:fix

自动修复 ESLint 问题

  • 自动修复可修复的问题
  • 替代了原 format 命令
npm run lint:fix

💡 提示：建议在 IDE 中配置保存时自动运行 lint:fix

npm run typecheck

TypeScript 类型检查

  • 不生成编译产物
  • 仅检查类型错误
npm run typecheck

🧪 测试命令

npm test

交互式单元测试（开发模式）

  • Vitest 监听模式
  • 文件变化自动重跑
  • 适合开发时使用
npm test

npm run test:coverage

单元测试 + 覆盖率报告

  • 运行所有单元测试
  • 生成覆盖率报告
  • 与 test:ci 功能相同
npm run test:coverage

npm run test:ci

CI 环境测试（等同于 test:coverage）

  • 用于 CI/CD 流程
  • 生成覆盖率报告
npm run test:ci

npm run test:e2e

端到端测试（Playwright）

  • 运行 E2E 测试套件
  • 无头模式运行
npm run test:e2e

npm run test:e2e:ui

可视化 E2E 测试

  • Playwright UI 模式
  • 可视化调试测试
npm run test:e2e:ui

💡 按需使用的测试命令：

# 测试 UI 界面（按需安装）
npx vitest --ui

# E2E 调试模式（按需使用）
npx playwright test --debug

# 性能测试（暂未配置）
npx vitest run tests/performance

✅ 验证和 CI 命令

npm run validate

完整质量验证

  • Lint + TypeCheck + Test
  • 用于提交前验证
  • 比 build 更快（不实际编译）
npm run validate

npm run ci

CI/CD 完整流程

  • 运行 validate
  • 运行 build
  • 用于自动化部署
npm run ci

🖼️ 图片处理命令

npm run resize

参数化图片调整工具

替代了原来的 6 个独立命令，现在统一使用参数化调用：

# 商店截图 (1280x800)
npm run resize screenshot

# Logo (300x300)
npm run resize logo

# 小促销磁贴 (440x280)
npm run resize small-promo

# 大型促销磁贴 (1400x560)
npm run resize large-promo

# 小尺寸截图 (640x400)
npm run resize screenshot-small

# 查看所有可用预设
npm run resize

高级用法：

# 自定义输入目录
npm run resize screenshot ./my-images

# 自定义输出目录
npm run resize logo ./icons ./output

# 自定义背景颜色
npm run resize screenshot -- --background=white

# 自定义图片位置
npm run resize logo -- --position=top

🔧 工具命令

npm run sync:version

同步版本号

  • 自动同步 package.json 和 manifest.json 版本号
  • dev 和 build 会自动调用
npm run sync:version

npm run verify:release

验证发布包

  • 检查构建产物完整性
  • 发布前验证
npm run verify:release

📊 命令精简对比

类别 原有 精简后 说明
开发构建 5 3 移除 prebuild/predev hooks
代码质量 3 2 移除独立 format 命令
测试 8 5 移除重复和 YAGNI 命令
验证 2 2 保持不变
图片处理 6 1 参数化替代
其他 6 3 移除重复命令
总计 30 16 -47%

❌ 已移除的命令及替代方案

已移除 替代方案 原因
prebuild build 中自动调用 移除 npm hooks，简化流程
predev dev 中自动调用 移除 npm hooks，简化流程
build:only build 避免绕过质量检查
format lint:fix ESLint 可以处理格式化
test:ui npx vitest --ui 按需使用，无需固定命令
test:full test:coverage 功能重复
test:performance npx vitest run tests/performance YAGNI - 暂不需要
test:e2e:debug npx playwright test --debug 按需使用
validate:quick validate 功能重叠
release:check verify:release 完全重复
resize:screenshots npm run resize screenshot 参数化替代
resize:screenshots-small npm run resize screenshot-small 参数化替代
resize:logo npm run resize logo 参数化替代
resize:promo-small npm run resize small-promo 参数化替代
resize:promo-large npm run resize large-promo 参数化替代
resize:all 手动运行多次 resize 简化命令集

💡 最佳实践

开发工作流

# 1. 启动开发服务器
npm run dev

# 2. 开发过程中运行测试
npm test

# 3. 提交前验证
npm run validate

# 4. 构建前最终检查
npm run build

CI/CD 工作流

# 完整 CI 流程
npm run ci

发布工作流

# 1. 完整构建和测试
npm run build

# 2. 运行 E2E 测试
npm run test:e2e

# 3. 验证发布包
npm run verify:release

# 4. 发布到商店...

🎯 设计原则

  1. 质量门控优先 - build 命令整合所有质量检查
  2. 参数化优先 - 用参数替代多个相似命令
  3. YAGNI 原则 - 移除未来可能需要的命令
  4. 按需使用 - 低频命令使用 npx 按需调用
  5. 简化认知 - 减少命令数量，降低学习成本

📝 更新日志

2025-12-16

  • ✅ 从 30 个命令精简到 16 个核心命令
  • ✅ 保留 build 命令的质量门控设计
  • ✅ 图片处理命令参数化
  • ✅ 移除 npm hooks（prebuild/predev）
  • ✅ 移除重复和 YAGNI 命令
  • ✅ 更新开发文档