NodeJS在前端领域正扮演着越越重要的地位,它不仅可以让前端工作者使用JavaScript编写后端代码,还能方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动,非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。
所以作为一名优秀的前端工程师,非常有必要了解和掌握Node.js。笔者接下来将通过对H5-Dooring项目中的实时在线下载代码功能来带大家掌握如何从零构建线上自动化打包工作流。
你将收获设计一款在线工作流的基本思路nodejs常用API的使用nodejs如何使用父子进程使用child_process的exec实现解析并执行命令行指令socket.io实现消息实时推送使用jszip实现服务端压缩文件并支持前端下载zip包正文我们都用过诸如gulp,webpack之类的自动化工具,他们能很方便的帮我们打包编译代码,并以一种相对优雅的方式编写我们的工程代码。但是我们仔细思考之后就能发现,这些产物的背后都是靠nodejs和babel做底层支持。我们无非就是设计一种架构模式,通过babel的加载器和nodejs的服务能力,将代码由JS-AST-JS的过程(这里忽略css和插件处理)。
在吹完牛逼之后,我们开始介绍如何设计一款在线工作流。1.设计一款在线工作流的基本思路在线工作流是个泛指,其实任何产品线都有属于自己特色的工作流,但最终还是要回归业务。所以笔者在这里专门介绍一下H5-Dooring的实时下载代码的在线工作流。我们看看下面的设计流程:以上就是我们需要做的在线实时打包下载代码的工作流,由于nodejs是单线程的,为了不阻塞进程我们可以采用父子进程通信的方式和异步模型来处理复杂耗时任务,为了通知用户任务的完成状况,我们可以用socket做双向通信。在当前的场景下就是代码编译压缩完成之后,通知给浏览器,以便浏览器显示下载状态弹窗。一共有三种状态:进行中,已完成,失败。对应如下图所示界面:
至于为什么没有出现下载失败的状态,不要问我,问就是没有失败过(完了,找虐了)。
以上就是H5-Dooring实时编译下载的工作流设计,至于线上更多的实际需求,我们也可以参考以上设计去实现,接下来笔者来具体介绍实现过程。
2.nodejs如何使用父子进程我们要想实现一个自动化工作流,要考虑的一个关键问题就是任务的执行时机以及以何种方式执行.因为用户下载代码之前需要等H5页面打包编译压缩完成之后才能下载,而这个过程需要一定的时间(8-30s),所以我们可以认定它为一个耗时任务.
当我们使用nodejs作为后台服务器时,由于nodejs本身是单线程的,所以当用户请求传入nodejs时,nodejs不得不等待这个"耗时任务"完成才能进行其他请求的处理,这样将会导致页面其他请求需要等待该任务执行结束才能继续进行,所以为了更好的用户体验和流畅的响应,我们不得不考虑多进程处理.好在nodejs设计支持子进程,我们可以把耗时任务放入子进程中来处理,当子进程处理完成之后再通知主进程.整个流程如下图所示:
nodejs有3种创建子进程的方式,这里笔者简单介绍一下fork的方式。使用方式如下:
//child.jsfunction