基于区块开发

欢迎关注我的公众号睿Talk,获取我最新的文章:
clipboard.png

一、前言

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

二、区块仓库

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

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

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

三、命令行工具

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

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

先来看效果:
基于区块开发_第3张图片
基于区块开发_第4张图片

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

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

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

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

四、VSCode插件

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

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

但用起来会方便得多,效果如下:
基于区块开发_第5张图片

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

点击区块菜单的+号按钮,会提示选择插入文件夹:
基于区块开发_第6张图片

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

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

还有另一种方式激活插件插入区块,就是通过项目目录的上下文菜单。
基于区块开发_第7张图片
基于区块开发_第8张图片

五、总结

本文介绍了基于区块开发的整套思路和配套的工具,也列了一些关键的技术点。更多的技术细节,将在后续的文章中详细介绍。

你可能感兴趣的:(基于区块开发)