这是我参与「第四届青训营」笔记创作活动的的第2天
前言
上文 说到，前端监控系统的开发流程如下：
- 明确要采集的数据
- 封装采集方法
- 发布 npm 包
- 接入测试项目
- 视图展示
但笔者在实践过程中发现，其实并不一定要完全遵守这个流程，比如在封装采集方法时，可以暂时跳过 npm 包的发布，先接入测试项目，以便判断封装的采集方法是否正确，代码是否健壮等，等所有采集方法确定正确后，再发布 npm 包，这时可以保证项目能够准确运行。
同时，在开发前还有一件基础工作需要确定，那就是业务逻辑，只有明确了业务逻辑，才能开始搭项目、编码。但其实上面这个开发流程是不准确的，也就是说笔者的开发思路有误，下面我会更正这个项目的开发流程，具体业务逻辑会在下文讲解。
更正开发流程
- 搭建项目框架
- 前端监控原生 SDK 开发
- 明确要采集的数据
- 封装采集方法
- 数据上报后端
- 接入项目测试
- 将 SDK 发布到 npm
- 测试项目通过 npm 接入 SDK
- 后端开发
- web 视图展示
为什么不在上一篇文章更正？
写这些文章是为了记录下我从 0 到 1 实现这个项目的全过程，之前的文章写得不准确，恰恰代表了我在开发过程中所走的弯路，因为认知不到位，才导致了思路不对，那么这些弯路最终会以文章的形式存在，让我在以后的时间里能够回想起这时候的开发思路，也是一件有趣的事。
接下来笔者会把篇幅留给具体的开发流程。
搭建项目框架
在这里我们首先需要捋清这个项目的业务逻辑，我们要明白这个项目要做什么事，要达到什么目的：我们要监控项目，采集数据，将数据上报给服务器，将数据展示在网页上。
笔者想到这里，自以为懂了，可以开始 coding 了，却没有深入思考：监控项目是指在 React 或 Vue 等框架上封装监控函数吗？ 答案是否定的，框架那么多，怎么可能在一个框架上写监控呢，自然是自己用 js/ts 写原生 SDK 实现监控了。想到这里，我茅塞顿开：既然如此，视图展示和原生 SDK 应该是同级目录，另外加上后端服务，也就是说我要在一个文件夹下管理 3 个项目：
- monitor-sdk：使用 webpack + ts 开发
- monitor-web：团队使用 vue3 + vite + ts 开发，后续我个人可能会用 react + webpack + ts 重写
- monitor-node：使用 nodejs + koa + mysql 开发
有了思路，其他就好办了，项目的初始化文章网上有的是，根据自己需求搭建就行了，如果需要的话后面会出详细搭建教程。
前端监控原生 SDK 开发
- 【前端监控系统开发实录】之原生 SDK 开发（一） | 青训营笔记
- 【前端监控系统开发实录】之原生 SDK 开发（二） | 青训营笔记
- 【前端监控系统开发实录】之原生 SDK 开发（三） | 青训营笔记
将 SDK 发布到 npm
【前端监控系统开发实录】之 SDK 发布至 npm | 青训营笔记
后端开发
web 视图展示
开发中...
