您好,欢迎来到12图资源库!分享精神,快乐你我!我们只是素材的搬运工!!
  • 首 页
  • 当前位置:首页 > 开发 > WEB开发 >
    前端:如何基于Node.JS从零构建线上自动化打包任务流?
    时间:2021-08-13 21:03 来源:网络整理 作者:网络 浏览:收藏 挑错 推荐 打印

    NodeJS在前端范围正扮演着越越重要的位置,它不只可以让前端任务者运用javascript编写后端代码,还能方便地搭建照应速度快、易于扩展的网络运用。Node.js 运用事情驱动,非阻塞I/O 模型而得以轻量和高效,十分适宜在散布式设备上运转数据密集型的实时运用。

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    所以作为一名优秀的前端工程师,十分有必要了解和掌握Node.js。笔者接上去将经过对H5-Dooring项目中的实时在线下载代码功用来带大家掌握如何从零构建线上自动化打包任务流。

    你将播种

    设计一款在线任务流的基本思绪

    nodejs常用API的运用

    nodejs如何运用父子进程

    运用child_process的exec完成解析并执行命令行指令

    完成音讯实时推送

    运用jszip完成效劳端紧缩文件并支持前端下载zip包

    注释

    我们都用过诸如gulp,webpack之类的自动化工具,他们能很方便地帮我们打包编译代码,并以一种相对优雅的方式编写我们的工程代码。但是我们细心思索之后就能发现, 这些产物的背后都是靠nodejs和babel做底层支持。我们无非就是设计一种架构形式,经过babel的加载器和nodejs的效劳才能,将代码由JS - AST - JS的进程(这里疏忽css和插件处置)。

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    在吹完牛逼之后,我们末尾引见如何设计一款在线任务流。

    1. 设计一款在线任务流的基本思绪

    在线任务流是个泛指,其实任何产品线都有属于本人特征的任务流,但最终还是要回归业务。所以笔者在这里专门引见一下H5-Dooring的实时下载代码的在线任务流。我们看看下面的设计流程:

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    以上就是我们需求做的在线实时打包下载代码的任务流,由于nodejs是单线程的,为了不阻塞进程我们可以采用父子进程通讯的方式和异步模型来处置复杂耗时义务,为了通知用户义务的完成状况, 我们可以用socket做双向通讯。在以后的场景下就是代码编译紧缩完成之后,通知给阅读器,以便阅读器显示下载形状弹窗。一共有三种形状:停止中,已完成,失败。对应如下图所示界面:

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    H5-Dooring

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    H5-Dooring

    至于为什么没有出现下载失败的形状,不要问我,问就是没有失败过(完了,找虐了)。

    以上就是H5-Dooring实时编译下载的任务流设计,至于线上更多的实践需求,我们也可以参考以上设计去完成,接上去笔者来详细引见完成进程。

    2.nodejs如何运用父子进程

    我们要想完成一个自动化任务流, 要思索的一个关键成绩就是义务的执行机遇以及以何种方式执行. 由于用户下载代码之前需求等H5页面打包编译紧缩完成之后才能下载, 而这个进程需求一定的时间(8-30s), 所以我们可以认定它为一个耗时义务.

    当我们运用nodejs作为后台效劳器时, 由于nodejs本身是单线程的,所以当用户央求传入nodejs时, nodejs不得不等候这个"耗时义务"完成才能停止其他央求的处置, 这样将会招致页面其他央求需求等候该义务执行完毕才能继续停止, 所以为了更好的用户体验和流利的照应,我们不得不思索多进程处置. 好在nodejs设计支持子进程, 我们可以把耗时义务放入子进程中来处置,当子进程处置完成之后再通知主进程. 整个流程如下图所示:

    前端:如何基于Node.JS从零构建线上自动化打包任务流?

    nodejs有3种创立子进程的方式,这里笔者复杂引见一下fork的方式。运用方式如下:

    // child.js 

    function computedTotal(arr, cb) { 

        // 耗时计算义务 

     

    // 与主进程通讯 

    // 监听主进程信号 

    process.on('message', (msg) => { 

      computedTotal(bigDataArr, (flag) => { 

        // 向主进程发送完成信号 

        process.send(flag); 

      }) 

    }); 

     

    // main.js 

    const { fork } = require('child_process'); 

     

    app.use(async (ctx, next) => { 

      if(ctx.url === '/fetch') { 

        const data = ctx.request.body; 

        // 通知子进程末尾执行义务,并传入数据 

        const res = await createPromisefork('./child.js', data) 

      } 

     

      // 创立异步线程 

      function createPromisefork(childUrl, data) { 

        // 加载子进程 

        const res = fork(childUrl) 

        // 通知子进程末尾work 

        data && res.send(data) 

        return new Promise(reslove => { 

            res.on('message', f => { 

                reslove(f) 

            }) 

        })   

      } 

     

      await next() 

    }) 

    在H5-Dooring线上打包的任务流中,我们会用到child_process的exec办法,来解析并执行命令行指令。至于父子进程的更多运用,大家可以自行探求。

    3. 运用child_process的exec完成解析并执行命令行指令 (责任编辑:admin)