Hi my new friend!

前端基建之工具篇

Scroll down
距离上次更新已经 375 天了, 文章内容可能已经过时。

随着前端发展的越来越工程化,越来越繁琐复杂,前端能做的事情越来越多,最近几年 前端基建 也是越来越火热。但是实际上很多公司并不注重前端,更别谈能会有人来做基建。对于没有基建的前端,我们能做些什么呢?

我个人推荐可以从工具、CLI 入手,因为这些往往是独立,不会像推规范、搞数据埋点、日志上报、整 BFF 那样对团队或者现有代码有入侵性。即便在自己空闲时间也能弄一弄,弄得好可以在团队推广使用,弄得不好也无所谓,可以当作练手提升自己能力。

什么是前端基建?

前端基建 指的是业务团队内的前端工程师执行的一些基础建设,包括了 前端规范文档、前端脚手架、前端模板、前端组件库、前端工具库、前端 BFF、前端 CI/CD 的构建部署、前端数据埋点 等等;

前端基建的好处

  • 业务复用;
  • 提升研发效率;
  • 规范研发流程;
  • 团队技术提升;
  • 开源建设;

善用工具解放双手

举例:最近接到一个需求,一张简单报表包含增删改查,相信每个公司都有自己封装好的增删改查组件或者 hooks,等接口定义好,直接写 api,配好表单,表格配置完事。但后来接口发生变动,或者查询变动,这个时候就需要手动去调整原来代码。又或者做完这个后又来了个十几个报表需求,又得需要将上面来个十几遍。有些公司甚至连封装都没有,项目里全是 CTRL V + C,重复工作量更是陡增。

这些重复性操作完全可以通过工具自动生成,提交代码准确性,也能解放自己双手(摸点 🐟 不香吗),提高团队效率。

工具能做事情,做的东西有很多,不仅仅只是代码生成这些,一切你觉得重复性工作,都可以尝试通过工具来提高自己效率。

  • 代码生成
  • 代码格式检测
  • 智能提示
  • 测试自动化
  • 文档集成
  • 代码调试
  • ...

工具实现方式有很多种,这取决在团队需求

  • cli
  • web (比如通过拖拉拽生成代码)
  • 编辑器插件 (比如 vscode 插件)
  • ...

重复代码生成

就以上面例子为例,就可以使用工具去生成 接口的定义、表格配置、表单配置以及组件使用代码,不同需求表单、表格那些都是高度相似的,可以通过代码生成方式来提升自己编码效率。

从接口文档到可用代码,生成的方式大概流程如下:

接口文档 =》 JSON Schema =》 UI 交互(可省略)=》 根据模板生成 || 根据 AST 生成 =》 插入到代码位置

生成 JSON Schema

为了方便后续代码生成,我们需要首先接口文档转换成一个标准通用格式,这样不管后端提供什么样格式 api 文档或者不管后端使用什么框架去生成 api 文档时,只需要将对应格式转换成我们 JSON Schema 格式即可。

UI 交互

UI 交互并不是必须的,比如生成 接口定义、类型定义 并不需要交互,直接生成就可以了。但是像表格生成、表单生成这些是需要的,因为接口返回字段并不一定全是需要生成的,可以通过添加适当交互完成这一步骤。

代码片段生成

代码生成方式分两种 模板AST 去生成。使用 模板 比较简单,也会比较直观,但是缺乏灵活性,使用 AST 会更为灵活,但也会复杂的多。

模板

对于一些固定代码片段格式,可以选择通过模板去生成,而不必使用 AST 增加代码生成复杂度。

比如你项目中请求方法格式如下,可以直接使用模板去生成,类似这样 const {0} = (par) => http("{1}", par, "{2}");

js
const apiFn = (par) => http("/api/demo", par, "post");
AST

AST 是抽象语法树 (Abstract Syntax Tree) 的简称,它是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。

当你生成代码需要根据不同条件生成不同节点,修改不固定时候,可以选择使用 AST 去生成。

AST 生成原理,简单来说说就是将代码生成一个树状结构,其中树中每个节点描述的应就是你实际代码,我们只需要根据需求去操作对应节点,然后再将 AST 转为代码。

不同工具生成 AST 是不一致的,可根据实际需求选择。在线查看 AST 结构工具,可以说很直观方便 ast explorerts ast

插入代码位置

将生成代码插入到现有代码中,实现方式也有多种不同方式,通过对于简单的结构可以通过正则匹配去替换,对于复杂的结构可以通过 AST 方式去修改插入,如果你是基于编辑器插件去做的,还可以通过获取编辑器光标位置、选中等等操作将代码插入到对于位置。

更方便的文档查阅方式

很多公司使用的都是像 yapi、swagger 等那些开源文档管理平台,很多都是 web 在线的,当接口文档字段很多时,需要平凡的来回切换查阅,这样也是比较浪费时间的。可以通过编辑器插件形式集成到我们插件中,这样可以更方便自己开发,也有很多时以及有现成插件可以使用的,但是功能上并不丰富,有些仅仅只能查看,连常见代码都无法生成。

将接口文档集成到编辑器里能做的事情有很多,以 vscode 来说,可以通过文档快速生成接口定义,还可以通过注册语言服务,来识别检测接口定义正确性,也可以做的接口文档发生变更,做到智能提示然后快速自动修改,也可以通过接口文档快速起个 mock 服务,而不需要手动在项目中添加 mock 定义等等。

其他

很多繁琐的事情,其实可以尝试通过工具简化这些操作,没有合适的可以尝试自己造个,既可以提升自己能力,又能给团队做一点贡献。

  • 本文作者:白云苍狗
  • 本文链接:
  • 版权声明:本博客所有文章除特别声明外,均默认采用 CC BY-NC-SA 4.0 许可协议。
其他文章
cover
手撸 Grid 拖拽布局
  • 23-11-30
  • 12:07
  • 记录类
cover
uni-app 使用体验
  • 23-07-21
  • 13:46
  • 记录类
本站已加入BLOGS·CN