基于区块开发（一）：概述

一、前言

最早接触区块这一概念大概在 2 年前，当时在使用 Ant Design Pro 做后台管理系统。只需敲几个命令，就能将整个模块，多个页面的代码注入到项目中，当时真的被这一特性惊艳到了，基于区块开发这一概念也深深的植入我脑海当中。一个多月前，我又想起了这一特性，决定开发一套工具将基于区块开发这一理念在团队落地。

本系列总共 3 篇文章，以下是传送门：

基于区块开发（一）：概述

基于区块开发（二）：命令行工具

基于区块开发（三）：VSCode插件

二、区块的优点

在开发后台管理系统的时候，很多页面都是相似的，无非就是列表、详情、表单页等。每个类型的页面都有固定的几种样式，如表单页常见的就有普通表单和步骤表单 2 种。

我们开发这些页面的时候最常用的方式就是把类似的页面代码直接拷贝过来，然后再做一些小调整。这种方式会面临几个问题：

• 你可能一时想不起来类似的页面放哪里，有事甚至要跨项目去找。
• 旧的代码在写法上可能会存在一些问题，拷贝的时候把问题代码也带过来了。
• 拷贝的代码可能不是自己写的，改起可能比重新写要花更多的时间。

而基于区块开发，就能很好的解决这些问题。

• 区块代码都是集中存放在区块仓库中的，检索起来非常方便。
• 区块代码都是经过团队内部 Code Review 的，代码的质量和规范都能得到保证。
• 区块代码是比较稳定的，安装区块代码后要在哪些地方做微调是比较明确的。

总体来说，基于区块开发最少有 3 点好处：

• 提高开发效率
• 使代码规范能在团队内更好的推行
• 能不断沉淀模板代码，形成良性循环

在明确了可行性之后，下面我们就来详细讲下这套工具都由哪些部分组成。

三、区块仓库

基于区块开发的核心还是先得有个存放区块的仓库，一是存放区块源码，二是展示区块的效果。我选用 Storybook 作为展现的工具，具体效果如下：

我将区块分为 3 大类，分别是 多页面区块、页面+弹窗区块 和 单页面区块。多页面 是指列表、详情和新建页面都对应有各自的路由，都是单独的页面。而 页面+弹窗 是指详情和新建都是以弹窗的形式呈现在列表页。单页面 则是更为基础的页面。每一个区块都把 UI 逻辑和业务逻辑封装在一起，通过 mock 数据来呈现真实的效果。文件夹结构大体是这个样子：

区块的源码不是本文的重点，就不作过多的讨论了。

四、命令行工具

有了区块仓库后，下一步要考虑如何将区块注入到项目当中了。最通用的做法就是做一个具备以下功能的命令行工具：

• 列出可选的区块列表
• 可以通过链接预览区块效果
• 将选中的区块注入到项目中

先来看效果：

区块列表通过请求api来动态获取。选择区块这里用了 Inquirer.js 和 terminal-link 这两个工具来展现。

选中区块后会让用户输入安装区块的目录，然后会进行如下几个步骤：

• 拉取区块源码仓库
• 将对应的区块拷贝到项目中
• 使用 AST 修改相应的项目文件（非必须）
• 删除本地区块源码仓库

第三步只有多页面区块需要，项目的入口文件、路由文件和菜单文件都要做出相应的修改。这么做的好处是不需要人为修改任何代码，就能马上在运行中的项目里看到区块插入后的效果，大大提高了用户体验。

五、VSCode插件

有了命令行工具后，基于区块开发的概念已经可以落地了，但用起来还不太方便，毕竟命令行工具没有 GUI 工具用起来方便。VSCode 是团队内大部分同学的开发工具，于是顺其自然的就应该开发相应的插件。插件的功能跟命令行工具是一样的：

• 列出可选的区块列表
• 可以预览区块效果
• 将选中的区块注入到项目中

但用起来会方便得多，效果如下：

点击不同的区块，可以在右侧实时预览效果。

点击区块菜单的+号按钮，会提示选择插入文件夹：

后续注入区块代码的流程跟命令行工具是一样的。

这里用到 VSCode 插件开发的 2 个技术点，一个是 Tree View，另一个是 Webview。

用独立的标签页来展示和注入区块，可能跟项目代码本身有点割裂。于是我又增加了另一种激活插件的方式，就是通过目录的上下文菜单来注入区块。

通过与 VSCode 结合的方式来进行操作，在提高了工具可用性的同时，降低了使用门槛，更有利于工具的推广使用。

六、总结

本文介绍了基于区块开发的好处，讲解了如何一步步的将整套思路落地开发出配套的使用工具。同时也罗列了一些关键的技术点。更多的技术细节，将在后续的系列文章中详细介绍，敬请关注。