前端基建之工具篇

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

我个人推荐可以从工具、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}”);

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

AST

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

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

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

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

插入代码位置

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

更方便的文档查阅方式

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

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

其他

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