现状梳理

丁香医生前端工程化建设上手 - 图1

分成了三个部分：

  • 已有的技术产品
  • 覆盖到的技术栈
  • 业务场景的技术实践

工程化建设已经具有一定的基础，形成一定体系。

后续零散的想法可以集成到现有的体系中，比如命令行脚本集成到 dxd-scripts，服务端能力集成到 Jarvis。

现有积累的技术实践已经覆盖了一部分的业务场景，后续的建设难度大大降低，站在巨人肩膀上粘贴复制，尽情发挥想法。

技术要求这里的分类不是很严谨，共通点是每一个工具/技术背后都有大量的官方文档，其实践，如何配置需要去花一定精力去探索。

我们对技术产品的关注点

丁香医生前端工程化建设上手 - 图2

工程化建设产出的东西是“软件资产”，是技术产品，简单发起一个讨论🙋‍♂️：对于一款技术产品，大家的关注点在哪？

为了探究这个问题，对一些开源技术产品项目的官网、readme 进行分析：

通常在一个项目的生态中，会有用户、开发者、推广者这三种角色，从三种不同的角度进行切入，思考文档中哪些内容是他们所关注的，以及为什么会引起他们的关注。

丁香医生前端工程化建设上手 - 图3

丁香医生前端工程化建设上手 - 图4

丁香医生前端工程化建设上手 - 图5

对于公司内部的项目，部分问题同样值得我们去思考，照着这个思路可以获得很多 TODO。

这三个身份层层递进，这么想过之后我就发现自己犯了一个错误，还没当好一个合格的用户，对“业务”还没有熟悉透彻，就开始上手项目，遇到的既有技术问题又有业务问题，思维非常混乱，效率非常低下。

获得的第一个教训就是：上手一个技术产品，先做用户，摸清功能。

技术上手

核心思路：

  • 首先做一个合格的用户，弄清全部功能(业务流程)
  • 疑问和实践驱动
  • 在核心目标跟技术深度上权衡

看一个🌰，是在 weapp-release 上手过程的真实故事：

weapp-release 是一个命令行工具，很快我就提出了第一个问题😳：npm 包如何对外暴露命令行接口，让用户可以使用 weapp-release [options] 进行调用？

查阅一番资料之后弄清楚了原理，记录在 Node实践-命令行功能。

很快就来了第二个疑问😳，如何获取命令行参数？以及一连串的疑问😳：

  • 长命令，短命令(命令别名) alias 是如何实现的？
  • --help 弹出使用帮助是怎么做到的？
  • 拿到参数后如何触发后续事件处理程序？
  • Node 原生获取命令行输入参数的方式是什么？
    • 为什么 process 对象无需 require 就可以全局访问？
    • Node 中还有哪些模块是可以全局访问到的？

丁香医生前端工程化建设上手 - 图6

解决了这一系列疑问之后，豁然开朗，继续往下看，weapp-release 的核心功能是执行命令行命令，调用小程序命令行工具、进行 git 操作等，技术实现上用到了 shelljs 这个包，和 Node 原生的 child_process 模块，问题一个接一个又来了：

  • shelljs 和 child_process 的区别？
  • child_process
    • stdio 流是什么东西？
    • Writeble 流和 Readable 流的区别？
    • 流上都有什么事件？
    • 流实现事件监听发布的原理是什么？
      • 应该不难，到 Node 源码里逛逛，看看实现如何？
    • spawn exec execFile fork 四个 API 的区别？
    • 子进程和主进程之间如何通信？

这个系列学习成果记录在 Node实践-执行命令行命令。

等我研究完了这一套东西并将学习心得记录下来，一周过去了🐦。。。。。然而还没有开始业务流程的梳理。

照着这个思路，等到我为工程化建设贡献代码的那一刻，可能已经是明年这时候了。

当项目进度偏离计划的时候需要及时调整，于是采取措施，换个项目来学习一下👺，以实际的需求开发来上手 Jarvis Server。

Jarvis Server 的主要技术要求是 Egg，首先便是 Egg 上手。

丁香医生前端工程化建设上手 - 图7

大项目的文档内容总是那么丰富，文档在数量上给人一种又一本《JavaScript权威指南》的恐惧🙀。

这次改变思路，先给文档目录大致过一遍，每个章节先过一遍，一目十行，对框架整体建立一个认识，同时整理出核心知识点，提出了一些疑问😳：

  • Egg 基于 Koa
  • 如何理解「约定优于配置」？
  • 内置对象是核心的部分，需要弄清楚所有对象的概念、继承关系、访问方式
    • Application
    • Context
    • Request
    • Response
    • …

对文档的相关章节进行了较为细致的阅读，其余章节暂时略过。最关键的 路由、Controller、Service 看懂之后，已经可以实现完整的增删改查业务，掌握了这个实践，本次的需求剩下的只是业务流程的梳理，在踩了几个项目启动的小坑之后，根据现有的系统设计文档，很快就上手，完成了需求。

学习的过程中及时调整了方法，整理了一些经验：

  • 首先做一个合格的用户，弄清全部功能(业务流程)
  • 疑问和实践驱动
    • 有疑问及时记录
    • 变漫无目的的文档顺序阅读为带着问题主动探索，渐进式文档阅读思路，分清哪些内容该精读，哪些先过一遍即可
    • 再复杂的应用都是一个个细节实践实现组装起来的，弄清楚细节实践，做好记录梳理，方便以后再次使用
  • 在核心目标跟技术深度上权衡
    • 疑问要有优先级
    • 探究深度适可而止
      • 两重境界，先会用就足够了，有空再研究原理

收获

在 Egg 学习中收获比较大，学习了很多服务端的东西，比如路由、中间件、Controller、Service的概念，前端技术中是否能找到他们的影子？

举一个例子，Vue Router 中的路由守卫 router.beforeEach 和 router.afterEach 是否就是中间件思想？

接触的项目更多，启发和想法也越多，知识体系相互打通。近些年来前端有很多思想来源于后端，比如微前端来源于微服务，不同语言/岗位/框架间相互影响，产生碰撞。这些想法最终会影响到业务系统、功能、模块设计，提高代码质量。

计划

先做一个合格的用户，学会每一个项目的使用，弄清业务流程，同时技术上做准备，积累更多技术实践，帮助更多的同学上手参考，以核心目标为驱动，投入到工程化长期建设中，定期分享心得与收获。

讨论🙋‍♂️ 文档的大纲

制定一个通用的 readme 大纲，按照用户、开发者的顺序去逐步完善文档。

丁香医生前端工程化建设上手 - 图8

参考