{"_id":"@51jbs/webpack-spec-plugin","name":"@51jbs/webpack-spec-plugin","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.4":{"name":"@51jbs/webpack-spec-plugin","version":"1.0.4","description":"Webpack plugin for checking code specifications including naming, performance, and best practices","main":"dist/index.js","types":"dist/index.d.ts","keywords":["webpack","plugin","spec","lint","performance","code-quality"],"author":{"name":"Chuanjing Li"},"license":"MIT","peerDependencies":{"webpack":"^5.0.0"},"dependencies":{"chalk":"^4.1.2","fast-glob":"^3.3.2","fs-extra":"^11.2.0","image-size":"^1.1.1","simple-git":"~3.15.1"},"devDependencies":{"@types/node":"^20.11.5","typescript":"^5.3.3","vitest":"^1.2.0","webpack":"^5.89.0"},"publishConfig":{"access":"public"},"scripts":{"build":"tsc","dev":"tsc --watch","test":"vitest","test:coverage":"vitest --coverage"},"_id":"@51jbs/webpack-spec-plugin@1.0.4","_integrity":"sha512-378IqhpXmfYhPObQRHJfpaKCPStB6HyvucmOae2M4lkgL+i++b4bY4mjlc43i8gJVLJUVdYp71bE3VfeLp0j1A==","_resolved":"/tmp/64621862a1be03dc720811ab03e4c345/51jbs-webpack-spec-plugin-1.0.4.tgz","_from":"file:51jbs-webpack-spec-plugin-1.0.4.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-378IqhpXmfYhPObQRHJfpaKCPStB6HyvucmOae2M4lkgL+i++b4bY4mjlc43i8gJVLJUVdYp71bE3VfeLp0j1A==","shasum":"db869ab5cbcecd19dc12cdae614e681d852129cc","tarball":"https://registry.npmjs.org/@51jbs/webpack-spec-plugin/-/webpack-spec-plugin-1.0.4.tgz","fileCount":53,"unpackedSize":241990,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIE+85QQgZp5rSeOb1CaXXAWLd1lk9k6jwP1SmhycFRmqAiEAsFuJRfRSPS6kZVGFpwWxdzxPDbr2flV3ZdowYpuj29U="}]},"_npmUser":{"name":"chuanjing729","email":"chuanjing729@gmail.com"},"directories":{},"maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/webpack-spec-plugin_1.0.4_1766022837612_0.2269369174634439"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-18T01:53:57.530Z","1.0.4":"2025-12-18T01:53:57.777Z","modified":"2025-12-18T01:53:58.063Z"},"maintainers":[{"name":"chuanjing729","email":"chuanjing729@gmail.com"}],"description":"Webpack plugin for checking code specifications including naming, performance, and best practices","keywords":["webpack","plugin","spec","lint","performance","code-quality"],"author":{"name":"Chuanjing Li"},"license":"MIT","readme":"# @51jbs/webpack-spec-plugin\n\n> Webpack 插件，用于自动检查代码规范、性能和安全问题，并生成详细的 HTML 报告\n\n[![npm version](https://img.shields.io/npm/v/@51jbs/webpack-spec-plugin.svg)](https://www.npmjs.com/package/@51jbs/webpack-spec-plugin)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n---\n\n## ✨ 特性\n\n### 📝 **代码规范检查** - 57 项全面检查\n- 🎨 **Vue2 规范检查** - 13 项专项检查（组件命名、Props、生命周期等）\n- 🔧 **JavaScript 规范检查** - 8 项语法检查（禁用 var、严格相等、模板字符串等）\n- 📁 **文件命名规范** - 5 项检查（Vue 组件、JS 文件、测试文件等）\n- 🔤 **变量命名检查** - 6 项检查（常量、变量、类名、布尔值等）\n- 📥 **导入规范检查** - 6 项检查（循环依赖、未使用导入、重复导入等）\n- 📝 **注释规范检查** - 3 项检查（JSDoc、TODO/FIXME、大段注释代码）\n- 🎭 **事件规范检查** - 9 项专项检查（Vue2 事件、JavaScript 事件）\n- 🛡️ **空指针防护检查** - 9 项安全检查（属性访问、数组、API 响应）\n- 🎯 **边界处理规范检查** - 11 项边界检查（循环、递归、除零、分页等）\n- 🔥 **最佳实践检查** - 10 项检查（深拷贝、console、var、Promise链等）\n- 📧 **消息提示一致性** - 7 项检查（统一消息提示用法）\n- 🔒 **接口安全检查** - 8 项检查（错误处理、响应校验、超时设置等）\n- ✅ **表单验证检查** - 9 项检查（验证规则、必填项、提交检查等）\n- 📦 **依赖检查** - 6 项检查（重复导入、未使用导入、路径优化等）\n\n### ⚡ **性能与安全检查**\n- ⚡ **性能检查** - 图片/JS/CSS 文件大小预算\n- 🔒 **安全检查** - XSS 风险、eval 使用、敏感信息泄露\n- 💧 **内存泄漏检查** - 定时器、事件监听器、全局变量污染\n\n### 📊 **报告与工具**\n- 📊 **HTML 报告** - 详细的修复方案 + 代码对比 + 优先级标签\n- 🚀 **增量检查** - 只检查 Git 变更文件，提高效率\n- 💾 **文件缓存** - MD5 哈希缓存，避免重复检查\n- 🎯 **Git Hooks** - pre-commit 自动检查\n\n---\n\n## 📚 文档\n\n- **[👋 快速开始](./docs/guides/quick-start.md)** - 5 分钟上手\n- **[✨ 功能特性](./docs/guides/features.md)** - 完整功能列表\n- **[📖 Vue2 开发规范](../../docs/specs/coding/vue2-guide.md)** - 1160 行详细指南\n- **[📖 JavaScript 开发规范](../../docs/specs/coding/javascript-typescript-guide.md)** - 1200 行详细指南\n- **[🎭 事件规范](../../docs/specs/coding/event-specification.md)** - 9 项事件处理规范\n- **[🛡️ 空指针防护规范](../../docs/specs/coding/null-safety-specification.md)** - 9 项防空检查\n- **[📊 HTML 报告](./docs/reports/html-report-guide.md)** - 报告功能详解\n- **[✅ 真实项目验证](./docs/reports/real-project-validation.md)** - 生产项目验证报告\n- **[🧪 生产环境评估](./docs/reports/final-validation.md)** - 综合评分 94.05/100\n- **[📝 更新日志](./docs/guides/changelog.md)** - 版本更新记录\n\n---\n\n## 📦 安装\n\n```bash\nnpm install @51jbs/webpack-spec-plugin --save-dev\n```\n\n---\n\n## ⚙️ 快速配置\n\n### webpack.config.js\n\n```javascript\nconst SpecPlugin = require('@51jbs/webpack-spec-plugin')\n\nmodule.exports = {\n  plugins: [\n    new SpecPlugin({\n      // 检查模式：'incremental' | 'full'\n      mode: 'incremental',\n      \n      // 严格程度：'normal' | 'strict'\n      severity: 'normal',\n      \n      // 启用的规则\n      rules: {\n        naming: true,              // 文件命名检查\n        comments: true,            // 注释规范检查\n        performance: true,         // 性能检查\n        imports: true,             // 导入规范检查\n        variableNaming: true,      // 变量命名检查\n        memoryLeak: true,          // 内存泄漏检查\n        security: true,            // 安全检查\n        vue: true,                 // Vue2 规范检查（13 项）\n        javascript: true,          // JavaScript 规范检查（8 项）\n        event: true,               // 事件规范检查（9 项）\n        nullSafety: true,          // 空指针防护检查（9 项）\n        boundary: true,            // 边界处理规范检查（11 项）\n        bestPractice: true,        // 最佳实践检查（10 项）\n        messageConsistency: true,  // 消息提示一致性（7 项）\n        apiSafety: true,           // 接口安全检查（8 项）\n        formValidation: true,      // 表单验证检查（9 项）\n        dependencyCheck: true      // 依赖检查（6 项）\n      },\n      \n      // 性能预算\n      performanceBudget: {\n        maxImageSize: 500,  // KB\n        maxJsSize: 300,\n        maxCssSize: 100\n      },\n      \n      // HTML 报告（生成在 .spec-cache 目录）\n      htmlReport: true,\n      reportPath: '.spec-cache/spec-report.html'\n    })\n  ]\n}\n```\n\n---\n\n## 🚀 快速使用\n\n### 1. 本地开发\n\n```bash\nnpm run dev\n# 自动检查变更文件\n```\n\n### 2. 查看报告\n\n```bash\nopen .spec-cache/spec-report.html\n```\n\n### 3. 生产构建\n\n```bash\nnpm run build\n# 全量检查 + 生成报告\n```\n\n---\n\n## 📊 报告示例\n\n### v2.0 增强版报告\n\n报告包含：\n\n1. **📝 整体总结** - 检查概览 + 问题分类 + 优先级建议\n2. **🏷️ 优先级标签** - P0/P1/P2 明确标识\n3. **🔧 详细修复方案** - 分步骤修复指导\n4. **💡 代码对比** - 修改前/修改后对比展示\n5. **📊 统计图表** - 规则分布可视化\n\n**支持的问题类型**：\n- ✅ 内存泄漏（定时器/全局变量）\n- ✅ 安全风险（XSS 攻击）\n- ✅ 性能问题（图片过大）\n- ✅ 导入规范（缺少扩展名）\n- ✅ Vue2 规范（组件命名/Props/生命周期）\n- ✅ JavaScript 规范（var/严格相等/模板字符串）\n- ✅ 事件规范（事件命名/监听器清理）\n- ✅ 空指针防护（属性访问/API响应/DOM操作）\n- ✅ 边界处理（循环/递归/除零/分页）\n- ✅ 最佳实践（深拷贝/console/var等）\n- ✅ 消息提示一致性\n- ✅ 接口安全检查\n- ✅ 表单验证检查\n- ✅ 依赖检查\n\n---\n\n## ✅ 真实项目验证\n\n### mall-portal-front 项目\n\n**项目规模**：\n- 总文件数：1,452 个\n- JavaScript/Vue：633 个\n- 代码规模：~50,000 行\n\n**发现问题**：\n- 错误：8 个\n- 警告：20 个\n- 总计：**28 个**\n\n**问题分类**：\n- 内存泄漏：6 个\n- 安全风险：1 个\n- 性能问题：9 个\n- 导入规范：12 个\n\n**优化价值**：\n- 图片优化：8-10 MB (减少 67-75%)\n- 加载速度：提升 50-70%\n- 首屏时间：8s → 2-3s\n\n[查看完整验证报告](./docs/reports/real-project-validation.md)\n\n---\n\n## 📝 修复示例\n\n### 内存泄漏 - 定时器\n\n**问题代码**：\n```vue\nexport default {\n  mounted() {\n    setInterval(() => {\n      this.updateTime()\n    }, 1000)\n  }\n}\n```\n\n**修复方案**：\n```vue\nexport default {\n  data() {\n    return { timer: null }\n  },\n  mounted() {\n    this.timer = setInterval(() => {\n      this.updateTime()\n    }, 1000)\n  },\n  beforeUnmount() {\n    if (this.timer) {\n      clearInterval(this.timer)\n      this.timer = null\n    }\n  }\n}\n```\n\n[查看更多示例](./docs/mall-portal-front规范检查详细报告.html)\n\n### Vue2 规范 - 组件命名\n\n**问题代码**：\n```vue\n<script>\nexport default {\n  name: 'Todo'  // ❌ 单个单词，与 HTML 元素易冲突\n}\n</script>\n```\n\n**修复方案**：\n```vue\n<script>\nexport default {\n  name: 'TodoItem'  // ✅ 多个单词，符合规范\n}\n</script>\n```\n\n### JavaScript 规范 - 禁止 var\n\n**问题代码**：\n```javascript\nvar userName = 'Alice'  // ❌ 使用 var，有变量提升问题\n```\n\n**修复方案**：\n```javascript\nconst userName = 'Alice'  // ✅ 使用 const，更安全\n```\n\n### 接口安全检查\n\n**问题代码**：\n```javascript\n// ❌ 缺少错误处理\naxios.get('/api/user').then(res => {\n  this.user = res.data\n})\n```\n\n**修复方案**：\n```javascript\n// ✅ 添加错误处理\naxios.get('/api/user')\n  .then(res => {\n    this.user = res.data\n  })\n  .catch(err => {\n    console.error('获取用户信息失败:', err)\n    this.$message.error('获取用户信息失败')\n  })\n```\n\n[查看完整规范文档](../../docs/specs/coding/vue2-guide.md)\n\n---\n\n## 🎯 特色功能\n\n### 1. 不污染项目目录\n\n所有生成文件都在 `.spec-cache` 目录中：\n```\n.spec-cache/\n  ├── spec-report.html    # HTML 报告\n  └── check-cache.json    # 检查缓存\n```\n\n已自动添加到 `.gitignore`，不影响版本控制。\n\n### 2. 智能缓存机制\n\n- 基于 MD5 哈希缓存\n- 未变更文件跳过检查\n- 提高检查效率 ~85%\n\n### 3. 优先级系统\n\n- **P0** - 立即修复（错误级别）\n- **P1** - 尽快修复（安全、内存）\n- **P2** - 计划修复（规范问题）\n\n---\n\n## 🛠️ 开发\n\n```bash\n# 安装依赖\nnpm install\n\n# 编译 TypeScript\nnpm run build\n\n# 运行测试\nnpm test\n```\n\n---\n\n## 📝 许可证\n\nMIT © 2025\n\n---\n\n## 👥 贡献\n\n欢迎提交 Issue 和 Pull Request！\n\n---\n\n## 🔗 相关链接\n\n- [📚 文档中心](./docs/)\n- [🚀 快速开始](./docs/guides/quick-start.md)\n- [✅ 真实验证](./docs/reports/real-project-validation.md)\n- [📊 HTML 报告](./docs/reports/html-report-guide.md)","readmeFilename":"README.md","_rev":"1-be1c400fb00ab2e061121558980a6946"}