• 如何让刚入职的前端同学最快的熟悉项目, 能最快上手新需求的开发;
• 当因为组织结构调整或者人员流动, 项目需要交接时, 如何在最短的时间内高质量的完成交接;
• 如何避免因历史项目迭代中未知的风险而引起的线上事故;
• 如何提高人效, 动态调整各个项目的开发人员;
• 如何实现项目描述文档的持续集成

这些都是前端开发组面临和需要解决的实际问题, 对此, 分享一下我在我们组推广落地的All In Docs方案, 只需一个眼神, 即可愉快的完成项目的交接

All In Docs方案用大白话可以理解成加强版的readme.md, 所有与项目背景需求, 开发测试部署等相关的资料都可以在文档里查询到, 在实践中, All In Docs方案看似花费时间, 但实际上它不仅提高了交接效率, 也提高了我们平时的开发效率, 其由如下文档组成

项目基础信息base.md

• 项目背景
• 仓库地址
• 访问入口
• 适配的设备, 端, APP和OS版本
• Nginx配置链接
• Jenkins链接
• Agile链接
• configuration链接, cdn等配置文件
• 监控平台链接
• 埋点管理链接
• sentry链接

项目迭代信息changelog.md

• 每次迭代的MENBER, 包括PM, UI, UE, FE, BE, QA
• 每次迭代的JIRA, PRD WIKI, 蓝湖, API WIKI, Swagger UI
• 每次迭代的flow链接, 以便追踪Code Review, Merge Request与Tag

如何运行项目how_to_run.md

• 配置npm start一键启动, webpack-dev-server自动打开浏览器并配置打开的页面的必要的queryString
• 如果需要切源, 配置.npmrc文件, 或者在npm scripts里添加npm install --registry=http://registry.xxx.com.cn
• 如果需要种植cookie, 附cookie的key-value, 安利edit this coookie插件
• 如果接口需要鉴权, 附登录链接和各个环境的用户账号密码
• 如果需要配置/ect/hosts, 附如何配置
• 如果需要用charles, 附如何配置
• 如果需要自定义的UserAgent信息, 附如何配置, 安利User-Agent Switcher插件

各个环境的访问链接links.md

• 包括dev, test, pre, prod环境下拼上必要queryString的完整链接
• 如有后台管理系统, 附各个环境的后台管理链接, 相应账号, 附如何开通权限
• 各个环境的可访问账号密码
• 如果有用到某些sdk, 附上sdk的文档和相关各个环境的appId

项目的文件目录结构dir.md

用tree和注释对项目的文件目录结构进行描述

带截图的项目各个页面以及业务流程doc.xmind

一图胜百文, 用带截图和文字的的xmind描述项目的整体流程

坑holes.md

• 开发测试过程中以及线上遇到的各种坑, 花费了比较长的时间才解决的, 或者有可能造成线上事故的坑

问题修复记录fixlog.md

• 用户反馈的工单记录, 包括工单链接, 问题原因, 修复方案

待做todo.md

• 项目体验优化, 性能优化, 代码优化, 架构优化的待做列表
• 排好优先级和预期开发上线时间

除了这些文档, 制度上, 每个项目的owner负责每次项目Merge Request时审核文档的更新