前端系统学习:前端工程实践-工具链

120 阅读3分钟

本文为极客时间学习笔记+自己的一些想法。

工具体系的目标

工具的出现,有其必然的具体的目标。如npm进行包管理,cra是快速创建一个react项目。

工具体系的目标是什么呢?——工具链

这个更是从一个项目或者一个团队的长期性来看的。

即,我们在这个项目/团队里,对工具有什么要求呢?

  1. 考虑到工程行为都是团队合作,我们对工具最基本的要求就是:版本一致。
  2. 工具体系的另一个重要需求是:避免冲突,即工具间无互相干扰。如 Yeoman 和 gulp,有一些工具则由社区设计了配合方案,比如 webpack 和 babel,有一些工具,则存在着根本性冲突,如 gulp 和 grunt。

为解决以上两个问题,提出工具链。工具链是一系列互相配合的工具,能够协作完成开发任务。

Yeoman 是什么?

  1. 是一个通用的脚手架系统允许创建任何的 app 。它可以迅速的搭建一个新项目,并且能够简化了现有项目的维护。
  2. Yeoman 构建的项目与语言无关。 它可以构建任何语言的项目 (Web, Java, Python, C#, 等。)
  3. Yeoman 它自己不能做任何操作。 每个操作都是由 generators 基本插件在 Yeoman 环境所完成的。) 更多信息:yowebapp.github.io/learning/

工具体系的设计

在一个工程的实现上,一般分为四个步骤:

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

从以上步骤延伸出的工具链:

  • Yeoman
  • webpack
  • ava/nyc(单元测试)
  • aws-cli(AWS 命令行界面(AWS CLI)是用于管理 AWS 产品的统一工具)

此外,版本号的约束: 方式1,在package.json 里写死版本号; 方式2,把工具链封装起来,统一由工具链负责人输出,而使用者只需要关注工具链的使用即可。(这个方式可以扩展一下,把它迁移到云上。)

同时,一个团队可能负责多端的项目,那使用到的工具链就会不同。开发不同的工具链(可称为套件)也是需求之一,每个工具链对应一组互相配合的工具。

工具体系的执行

是最容易完成自动化的一环。

工具体系的监控

这个是很重要的一个指标,可以检测我们工具链的能力。一般,有几个指标跟开发者体验有关:

  • 调试/构建次数
  • 构建的平均时长——构建效率,优化空间。
  • 使用的工具版本
  • 发布次数——项目的活跃度。

这个研发监控的数据需要好好做一下。

总结

笔记写完了。有几点还是感同身受的,比如版本号不一致真痛,而互相冲突也是配置项的老大难,监控这块做的还很一般,待发力。

2023.2.27