前端研发工作台

#跨端

目录

1. 总结

  • 一站式平台：集成整合前端开发过程中的一切
    • 图片重复度分析
    • 图片压缩
    • 静态资源上传CDN功能
    • 取色器
    • base64转码
    • URL 编解码
    • 运行环境：ts/es等
    • 前端业务的交付质量和效率
    • 团队及个人大盘
    • 公司系统集成等等
      • 物料平台
      • 业务组件库等
  • ==项目质量分==
    • 与工程最佳实践的对比度？
    • 安全分：扫描
    • 代码规范度：eslist 准守程度
    • 可维护度：
      • 文件扫描
      • 长文件、大文件、图片压缩等等等
    • 重复度：jscpd

2. 核心定位和目标

  • 提供一站式的前端开发环境和工具集成
  • 提升开发效率，规范开发流程
  • 降低开发门槛，支持低代码到全代码的开发模式
  • 确保代码质量和最佳实践的落地

3. 度量：5 个维度

  • 最佳实践：
    • 分析当前工程特征与对应工程最佳实践
  • 安全实践：
    • 扫码代码检测工程中可能存在的安全风险
      • 包含 url 、敏感成词、明文账密信息及 npm 包证书检测，降低项目安全风险，守卫项目安全。
  • 代码规范：
    • 这一维度主要反馈开发人员对于 eslint 开发规约的遵守程度
  • 可维护度：
    • 通过 typhonjs-escomplex 对文件进行扫码，得出每个文件的可维护度，可读性及复杂度评分。
    • 针对得分较差的文件可以进行深度分析帮助开发者更好的重构复杂代码。
  • 重复度：
    • 通过 jscpd 计算重复出现的代码区块占比

根据上述 5 个维度通过加权平均的方式计算项目质量分，并根据木桶效应，在计算得分的过程中加大了最低分的权重，得出最终项目质量评分。

4. 前端研发框架：脑暴点

  • 开箱即用的研发框架
    • 内置工程配置、状态管理、数据请求、权限管理以及后端应用集成 等最佳实践
      • 让开发者可以更加专注于业务逻辑
  • 研发流程标准化
    • eslint/stylelint
    • git flow规范
    • code review 规范
    • npm包约定，写死版本
    • ci/cd规范等
  • 优先考虑团队
    • 团队已有的沉淀或者熟悉的技术栈
  • 研发体验及工具
    • dev
    • UI / UI 校对工具
  • ==联调平台==
  • 图片重复度
  • 为了让这些规则不像 eslint 可以在本地轻易跳过，采取了服务器下发的方式
    • 比如不能使用除 dva、use model 之外的数据流方案
    • 不能无理由使用 eval、new Function
    • 不能混用 cjs 和 esm 模块规范，
    • 组件代码==不能超过 600 行==
      • 最好是 300 行
    • 不能使用 resolution 锁定一方库和二方库版本
  • 前端研发工作台
    • 集成开发环境，包括Node版本管理、Git 配置、维护的工程目录，及常用的可配置的导航功能
    • 前端开发工具箱
      • 静态资源上传CDN功能 , unpkg功能 ， 前端物料托管平台
      • 常用 CDN 地址，避免打包
      • 图片压缩功能
      • 取色器
      • 代码生成器
      • base64 转码
      • URL 编解码
      • typescript、es运行环境等
    • VS Code插件集合
      • 样板代码一键生成
      • 工程代码配置
      • 集成代码提交
      • 代码片段
    • 代码质量分：
    • 长文件、大文件、图片压缩等等等
    • 整合物料库、UI库及业务组件库
    • 团队及个人大盘
      • 提交代码多少，代码质量如何
    • 公司系统集成等等
  • 前端业务的交付质量和效率
  • 产品工程质量
  • 持续优化项目
  • 做工程治理
  • 解决开发流程中的各种痛点