欢送关注我的公众号 睿 Talk，获取我最新的文章：
一、前言
最早接触区块这一概念大略在 2 年前，过后在应用 Ant Design Pro 做后盾管理系统。只需敲几个命令，就能将整个模块，多个页面的代码注入到我的项目中的这一个性，过后真的被惊艳到了，基于区块开发这一概念也深深的映入我脑海当中。直到最近，我决定联合团队的现状，开发一套工具来推广基于区块开发这一概念。
二、区块仓库
基于区块开发的外围还是先得有个寄存区块的仓库，一是寄存区块源码，二是展示区块的成果。我选用 Storybook 作为展示的工具，具体成果如下：
我将区块分为 3 大类，别离是 多页面区块 、 页面 + 弹窗区块 和单页面区块 。 多页面 是指列表、详情和新建页面都对应有各自的路由，都是独自的页面。而 页面 + 弹窗 是指详情和新建都是以弹窗的模式出现在列表页。单页面 则是更为根底的页面。每一个区块都把 UI 逻辑和业务逻辑封装在一起，通过 mock 数据来出现实在的成果。文件夹构造大体是这个样子：
区块的源码不是本文的重点，就不作过多的探讨了。
三、命令行工具
有了区块仓库后，下一步要思考如何将区块注入到我的项目当中了。最通用的做法就是做一个具备以下性能的命令行工具：
- 列出可选的区块列表
- 能够通过链接预览区块成果
- 将选中的区块注入到我的项目中
先来看成果：
区块列表通过申请 api 来动静获取。抉择区块这里用了 Inquirer.js 和 terminal-link 这两个工具来展示。
选中区块后会让用户输出装置区块的目录，而后会进行如下几个步骤：
- 拉取区块源码仓库
- 将对应的区块拷贝到我的项目中
- 应用
AST批改相应的我的项目文件（非必须） - 删除本地区块源码仓库
第三步只有多页面区块须要，我的项目入口文件、路由文件和目录文件都要做出相应的批改。这么做的益处是不须要人为批改任何代码，就能马上看到区块插入后的成果，大大提高了用户体验。
四、VSCode 插件
有了命令行工具后，基于区块的概念曾经能够落地了，但用起来还不太不便，毕竟命令行工具没有 GUI 工具用起来不便。VSCode 是团队内大部分同学的开发工具，于是顺其自然的就应该开发相应的插件。插件的性能跟命令行工具是一样的：
- 列出可选的区块列表
- 能够预览区块成果
- 将选中的区块注入到我的项目中
但用起来会不便得多，成果如下：
点击不同的区块，能够在右侧实时预览成果。
点击区块菜单的 + 号按钮，会提醒抉择插入文件夹：
后续插入区块代码的流程跟命令行工具是一样的。
这里用到 VSCode 插件开发的 2 个技术点，一个是 Tree View，另一个是 Webview。
还有另一种形式激活插件插入区块，就是通过我的项目目录的上下文菜单。
五、总结
本文介绍了基于区块开发的整套思路和配套的工具，也列了一些要害的技术点。更多的技术细节，将在后续的文章中具体介绍。