Leecason

vuePress-theme-reco Leecason    2018 - 2020
Leecason Leecason

Choose mode

  • dark
  • auto
  • light
主页
分类
  • CSS
  • FrontEnd
  • GraphQL
  • JavaScript
  • TypeScript
  • Vue
  • Webpack
  • 其它
  • 数据结构与算法
  • 浏览器相关
标签
时间线
GitHub
author-avatar

Leecason

80

Article

61

Tag

主页
分类
  • CSS
  • FrontEnd
  • GraphQL
  • JavaScript
  • TypeScript
  • Vue
  • Webpack
  • 其它
  • 数据结构与算法
  • 浏览器相关
标签
时间线
GitHub

前端团队工程:工具体系

vuePress-theme-reco Leecason    2018 - 2020

前端团队工程:工具体系

Leecason 2020-03-18 工具链

摘自 winter 老师 《重学前端》

# 工具总论

工具的结果是帮助技术团队内的同学提升效率和体验。

# 工具体系的目标

工具是为技术团队本身服务的工程体系。

考虑到工程行为都是团队合作,我们对工具最基本的要求是:版本一致。

工具体系的另一个重要需求是:避免冲突。

这两个要求的解决方案:工具链。

工具链是一系列互相配合的工具,能够协作完成开发任务。

# 工具体系的设计

想设计一个工具链,首先需要整理前端开发大约要做哪些事:

  • 初始化项目
  • 运行和调试
  • 测试(单元测试)
  • 发布

如何保证团队使用的工具版本一致:

轻量级的做法是,在项目初始化模板中定义 npm script 并且在 npm dev-dependency 中规定版本号。

重量级的做法是,开发一个包装工具,在命令行中不直接使用命令,而使用包装过的命令,例如一个工具名为 def,规定了一些命令:

  • def init
  • def dev
  • def test
  • def publish

这样,工具链的使用者只需要专注自己的需求就可以了,统一的命令行入口,意味着整个团队不需要互相学习工具链,就可以接手别人的项目开发。

大一些的团队内部可能有多种开发模式,所需的工具链也不一样,因此需要多套工具链。

不同的工具链被称作“套件”,每一种套件对应着一组互相配合的工具。

# 工具体系的执行

因为服务的是团队内部成员,所以执行非常简单,同时,入口是初始化项目,所以只要初始化工具在手,可以控制其它所有工具。

工程体系因为其自身特性,是最容易做到自动化的一个体系。

# 工具体系的监控

工具体系的结果虽然是软性的,也不能完全不做监控。

以下指标跟开发者体验较为相关:

  • 调试 / 构建次数
  • 构建平均时长
  • 使用的工具版本
  • 发布次数

某个项目频繁发布,说明风险很高 某个套件使用频率极低,可以考虑下线

# 总结

工具体系的目标除了单个工具解决具体问题之外,还有注意一致性和配合问题,因此需要工具链。

工具链会涵盖研发阶段各个主要操作。

工具体系的执行比较简单,很容易做到完全自动化。

工具体系的监控同样非常重要,除了帮我们改进工具体系,对研发体系的其它部分也有帮助。