前言

NodeJS在前端領(lǐng)域正扮演著越越重要的地位，它不僅可以讓前端工作者使用javascript編寫后端代碼，還能方便地搭建響應(yīng)速度快、易于擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。Node.js 使用事件驅(qū)動(dòng)，非阻塞I/O 模型而得以輕量和高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)時(shí)應(yīng)用。

所以作為一名優(yōu)秀的前端工程師，非常有必要了解和掌握Node.js。筆者接下來將通過對(duì)H5-Dooring項(xiàng)目中的實(shí)時(shí)在線下載代碼功能來帶大家掌握如何從零構(gòu)建線上自動(dòng)化打包工作流。

你將收獲

• 設(shè)計(jì)一款在線工作流的基本思路
• nodejs常用API的使用
• nodejs如何使用父子進(jìn)程
• 使用child_process的exec實(shí)現(xiàn)解析并執(zhí)行命令行指令
• socket.io實(shí)現(xiàn)消息實(shí)時(shí)推送
• 使用jszip實(shí)現(xiàn)服務(wù)端壓縮文件并支持前端下載zip包

正文

我們都用過諸如gulp，webpack之類的自動(dòng)化工具，他們能很方便的幫我們打包編譯代碼，并以一種相對(duì)優(yōu)雅的方式編寫我們的工程代碼。但是我們仔細(xì)思考之后就能發(fā)現(xiàn)， 這些產(chǎn)物的背后都是靠nodejs和babel做底層支持。我們無非就是設(shè)計(jì)一種架構(gòu)模式，通過babel的加載器和nodejs的服務(wù)能力，將代碼由JS - AST - JS的過程（這里忽略css和插件處理）。

在吹完牛逼之后，我們開始介紹如何設(shè)計(jì)一款在線工作流。

1. 設(shè)計(jì)一款在線工作流的基本思路

在線工作流是個(gè)泛指，其實(shí)任何產(chǎn)品線都有屬于自己特色的工作流，但最終還是要回歸業(yè)務(wù)。所以筆者在這里專門介紹一下H5-Dooring的實(shí)時(shí)下載代碼的在線工作流。我們看看下面的設(shè)計(jì)流程：

以上就是我們需要做的在線實(shí)時(shí)打包下載代碼的工作流，由于nodejs是單線程的，為了不阻塞進(jìn)程我們可以采用父子進(jìn)程通信的方式和異步模型來處理復(fù)雜耗時(shí)任務(wù)，為了通知用戶任務(wù)的完成狀況， 我們可以用socket做雙向通信。在當(dāng)前的場(chǎng)景下就是代碼編譯壓縮完成之后，通知給瀏覽器，以便瀏覽器顯示下載狀態(tài)彈窗。一共有三種狀態(tài)：進(jìn)行中，已完成，失敗。對(duì)應(yīng)如下圖所示界面：

至于為什么沒有出現(xiàn)下載失敗的狀態(tài)，不要問我，問就是沒有失敗過（完了，找虐了）。

以上就是H5-Dooring實(shí)時(shí)編譯下載的工作流設(shè)計(jì)，至于線上更多的實(shí)際需求，我們也可以參考以上設(shè)計(jì)去實(shí)現(xiàn)，接下來筆者來具體介紹實(shí)現(xiàn)過程。

2. Node.js如何使用父子進(jìn)程

我們要想實(shí)現(xiàn)一個(gè)自動(dòng)化工作流, 要考慮的一個(gè)關(guān)鍵問題就是任務(wù)的執(zhí)行時(shí)機(jī)以及以何種方式執(zhí)行. 因?yàn)橛脩粝螺d代碼之前需要等H5頁(yè)面打包編譯壓縮完成之后才能下載, 而這個(gè)過程需要一定的時(shí)間（8-30s）, 所以我們可以認(rèn)定它為一個(gè)耗時(shí)任務(wù).

當(dāng)我們使用nodejs作為后臺(tái)服務(wù)器時(shí), 由于nodejs本身是單線程的,所以當(dāng)用戶請(qǐng)求傳入nodejs時(shí), nodejs不得不等待這個(gè)"耗時(shí)任務(wù)"完成才能進(jìn)行其他請(qǐng)求的處理, 這樣將會(huì)導(dǎo)致頁(yè)面其他請(qǐng)求需要等待該任務(wù)執(zhí)行結(jié)束才能繼續(xù)進(jìn)行, 所以為了更好的用戶體驗(yàn)和流暢的響應(yīng),我們不得不考慮多進(jìn)程處理. 好在nodejs設(shè)計(jì)支持子進(jìn)程, 我們可以把耗時(shí)任務(wù)放入子進(jìn)程中來處理,當(dāng)子進(jìn)程處理完成之后再通知主進(jìn)程. 整個(gè)流程如下圖所示:

nodejs有3種創(chuàng)建子進(jìn)程的方式，這里筆者簡(jiǎn)單介紹一下fork的方式。使用方式如下：

// child.js
function computedTotal(arr, cb) {
    // 耗時(shí)計(jì)算任務(wù)
}

// 與主進(jìn)程通信
// 監(jiān)聽主進(jìn)程信號(hào)
process.on('message', (msg) => {
  computedTotal(bigDataArr, (flag) => {
    // 向主進(jìn)程發(fā)送完成信號(hào)
    process.send(flag);
  })
});

// main.js
const { fork } = require('child_process');

app.use(async (ctx, next) => {
  if(ctx.url === '/fetch') {
    const data = ctx.request.body;
    // 通知子進(jìn)程開始執(zhí)行任務(wù),并傳入數(shù)據(jù)
    const res = await createPromisefork('./child.js', data)
  }
  // 創(chuàng)建異步線程
  function createPromisefork(childUrl, data) {
    // 加載子進(jìn)程
    const res = fork(childUrl)
    // 通知子進(jìn)程開始work
    data && res.send(data)
    return new Promise(reslove => {
        res.on('message', f => {
            reslove(f)
        })
    })
  }
  
  await next()
})
復(fù)制代碼

在H5-Dooring線上打包的工作流中，我們會(huì)用到child_process的exec方法，來解析并執(zhí)行命令行指令。至于父子進(jìn)程的更多應(yīng)用，大家可以自行探索。

3. 使用child_process的exec實(shí)現(xiàn)解析并執(zhí)行命令行指令

在上面介紹的dooring工作流中，我們知道為了實(shí)現(xiàn)實(shí)時(shí)打包，我們需要一個(gè)H5 Template項(xiàng)目，作為打包的母版，當(dāng)用戶點(diǎn)擊下載時(shí)，會(huì)將頁(yè)面的json schema數(shù)據(jù)傳給node服務(wù)器， node服務(wù)器再將json schema進(jìn)行數(shù)據(jù)清洗最后生成template.json文件并移動(dòng)到H5 Template母版中，此時(shí)母版拿到數(shù)據(jù)源并進(jìn)行打包編譯，最后生成可執(zhí)行文件。

以上的過程很關(guān)鍵， 這里筆者畫個(gè)大致的流程圖：

為了實(shí)現(xiàn)以上過程，我們需要兩個(gè)關(guān)鍵環(huán)節(jié)：

• 將用戶配置的數(shù)據(jù)進(jìn)行處理并生成json文件，然后移動(dòng)到H5 Template母版中
• 在母版中自動(dòng)執(zhí)行打包編譯腳本

第一個(gè)環(huán)節(jié)很好實(shí)現(xiàn)，我們只需要用nodejs的fs模塊生成文件到指定目錄即可，這里筆者重點(diǎn)介紹第二個(gè)環(huán)節(jié)的實(shí)現(xiàn)。

當(dāng)我們將json數(shù)據(jù)生成到H5 Template中之后，就可以進(jìn)行打包了，但是這個(gè)過程需要自動(dòng)化的去處理，不能像我們之前啟動(dòng)項(xiàng)目一樣，手動(dòng)執(zhí)行npm start或者yarn start。我們需要程序自動(dòng)幫我們執(zhí)行這個(gè)命令行指令，筆者在查nodejs API突然發(fā)現(xiàn)了child_process的exec方法，可以用來解析指令，這個(gè)剛好能實(shí)現(xiàn)我們的需求，所以我們開始實(shí)現(xiàn)它。代碼如下：

import { exec } from 'child_process'
const outWorkDir = resolve(__dirname, '../h5_landing')
const fid = uuid(8, 16)
const cmdStr = `cd ${outWorkDir} && yarn build ${fid}`

// ...exec相關(guān)代碼
const filePath = resolve(__dirname, '../h5_landing/src/assets/config.json')
const res = WF(filePath, data)

exec(cmdStr, function(err,stdout,stderr){
  if(err) {
    // 錯(cuò)誤處理
  } else {
    // 成功處理
  }
})
復(fù)制代碼

以上代碼我們不難理解，我們只需要定義好打包的指令字符串（方式和命令行操作幾乎一致），然后傳入給exec的第一個(gè)參數(shù)，他就會(huì)幫我們解析字符串并執(zhí)行對(duì)應(yīng)的命令行指令。在執(zhí)行完成之后，我們可以根據(jù)回調(diào)函數(shù)（第二個(gè)參數(shù)）里的參數(shù)值來判斷執(zhí)行結(jié)果。整個(gè)過程是異步的，所以我們不用擔(dān)心阻塞問題，為了實(shí)時(shí)反饋進(jìn)度，我們可以用socket來將進(jìn)度信息推送到瀏覽器端。

4. socket.io實(shí)現(xiàn)消息實(shí)時(shí)推送

在上面介紹的 exec實(shí)現(xiàn)解析并執(zhí)行命令行指令 中還有一些細(xì)節(jié)可以優(yōu)化，比如代碼執(zhí)行進(jìn)程的反饋，執(zhí)行狀態(tài)的反饋。因?yàn)槲覀冇玫氖钱惒骄幊?，所以?qǐng)求不會(huì)一直等待，如果不采取任何優(yōu)化措施，用戶是不可能知道何時(shí)代碼打包編譯完成， 也不知道代碼是否編譯失敗，所以這個(gè)時(shí)候會(huì)采取幾種常用的放案：

• 客戶端請(qǐng)求長(zhǎng)輪詢
• postmessage消息推送
• websocket雙向通信

很明顯使用websocket雙向通信會(huì)更適合本項(xiàng)目。這里我們直接使用社區(qū)比較火的socket.io.由于官網(wǎng)上有很多使用介紹，這里筆者就不一一說明了。我們直接看業(yè)務(wù)里的代碼使用：

// node端
exec(cmdStr, function(err,stdout,stderr){
  if(err) {
    console.log('api error:'+stderr);
    io.emit('htmlFail', { result: 'error', message: stderr })
  } else {
    io.emit('htmlSuccess', { result: dest, message: stderr })
  }
})

// 瀏覽器端
const socket = io(serverUrl);
// ...省略其他業(yè)務(wù)代碼
useEffect(() => {
  socket.on('connect', function(){
    console.log('connect')
  });
  socket.on('htmlFail', function(data){
    // ...
  });
  socket.on('disconnect', function(e){
    console.log('disconnect', e)
  });
}, [])
復(fù)制代碼

這樣我們就能實(shí)現(xiàn)服務(wù)器任務(wù)流的狀態(tài)實(shí)時(shí)反饋給瀏覽器端了。

5. 使用jszip實(shí)現(xiàn)服務(wù)端壓縮文件并支持前端下載zip包

實(shí)現(xiàn)前端下載功能其實(shí)也很簡(jiǎn)單，因?yàn)橛脩襞渲玫腍5項(xiàng)目包含了各種資源，比如css，js，html，image，所以為了提高下載性能和便捷性我們需要把整個(gè)網(wǎng)站打包，生成一個(gè)zip文件供用戶下載。原理就是使用jszip將目錄壓縮，然后返回壓縮后的路徑給到前端，前端采用a標(biāo)簽進(jìn)行下載。至于如何實(shí)現(xiàn)目錄遍歷壓縮和遍歷讀取目錄， 這里筆者就不說了，感興趣的可以參考筆者其他的nodejs的文章。

6. 總結(jié)

以上教程筆者已經(jīng)集成到H5-Dooring中，對(duì)于一些更復(fù)雜的交互功能，通過合理的設(shè)計(jì)也是可以實(shí)現(xiàn)的，大家可以自行探索研究。

體驗(yàn)地址: https://dooring.vip。