天天看點

Nodejs-cli 填坑記

真的是玩玩沒想到,一個cli竟然坑了我這麼久,想當年寫Python指令行工具的時候,哪有這麼麻煩?随随便便寫幾下,添加個批處理指令腳本就搞定了。怎麼Nodejs寫一個就這麼不順利呢?

吐槽歸吐槽,當我成功的寫出來一個cli版本的工具之後,我才發現,是我錯了。nodejs-cli其實真的是很友善,也很簡單。

Nodejs-cli 填坑記

秉承分享知識的原則,在此記錄一下。

<a href="#%E5%86%99%E5%9C%A8%E5%89%8D%E9%9D%A2" target="_blank">寫在前面</a>

<a href="#%E6%AE%B5%E5%AD%90%E6%89%8B" target="_blank">段子手</a>

<a href="#%E5%A4%96%E9%83%A8%E6%A8%A1%E5%9D%97" target="_blank">外部子產品</a>

<a href="#events%E4%BA%8B%E4%BB%B6%E5%8F%91%E5%B0%84%E6%8E%A5%E6%94%B6" target="_blank">events事件發射接收</a>

<a href="#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81" target="_blank">完整代碼</a>

<a href="#%E5%AE%9E%E7%8E%B0%E6%95%88%E6%9E%9C" target="_blank">實作效果</a>

<a href="#%E7%BF%BB%E8%AF%91%E5%AE%98" target="_blank">翻譯官</a>

<a href="#%E5%A4%96%E9%83%A8%E6%A8%A1%E5%9D%97-1" target="_blank">外部子產品</a>

<a href="#%E9%83%A8%E5%88%86%E4%BB%A3%E7%A0%81%E9%87%8A%E4%B9%89" target="_blank">部分代碼釋義</a>

<a href="#%E5%AE%8C%E6%95%B4%E4%BB%A3%E7%A0%81-1" target="_blank">完整代碼</a>

<a href="#%E6%95%88%E6%9E%9C%E6%BC%94%E7%A4%BA" target="_blank">效果示範</a>

<a href="#cli%E5%B7%A5%E5%85%B7" target="_blank">cli工具</a>

<a href="#%E6%A0%87%E9%85%8D%E9%9C%80%E6%B1%82" target="_blank">标配需求</a>

<a href="#%E4%BF%AE%E6%94%B9%E9%85%8D%E7%BD%AE" target="_blank">修改配置</a>

<a href="#%E6%98%93%E9%94%99%E7%82%B9%E5%89%96%E6%9E%90" target="_blank">易錯點剖析</a>

<a href="#%E6%80%BB%E7%BB%93" target="_blank">總結</a>

這篇文章嚴格來說不能算是一片技術性的文章,沒什麼難點。有的隻是一些好玩的小工具。對于Nodejs新人來說,鑒于沒什麼難度,倒是可以适當的練練手。是以,如果你是Nodejs高手的話,還是不要在此浪費時間了。

言簡意赅點,就是一個爬取糗事百科的段子的小助手,一個簡單的不能再簡單的爬蟲。姑且稱之為爬蟲吧。

這裡需要用到一點點的第三方子產品。雖然實作相同的功能,标準子產品也可以滿足,但是有輪子的話,何必自己再去造一個呢(除非你能做的更好)。

superagent: 類似于Python裡面的requests,挺好用的。

cheerio: 類似于Python裡面的BeautifulSoup,但是其使用的是JQuery的選擇器文法,是以對前端比較熟悉的話,用起來會非常的順手。

cli-color: 如果你想在指令行裡面列印出彩色的字元,那麼用它就對了。

在Nodejs中events子產品可謂是核心了。異步程式設計要是沒有它,那就算是完了。這裡為了使用而使用,我也簡單的用了一下。

具體的思路是:

每一張網頁解析完畢後,發射一個pageover事件,來更新解析清單。

全部内容解析完畢後發射done事件,通知用戶端完成代碼運作。

下面上張圖,來示範一下運作效果。

Nodejs-cli 填坑記

之前用Python寫過一個類似的工具,可以友善的讀取系統剪切闆的待翻譯文本,然後以模态彈出框的形式通知使用者翻譯結果。自認為用起來還是不錯的。現在學了點Nodejs,就有點手癢了,于是也來用Nodejs實作一個類似的功能。

當然不能完全的模仿,要有點新意。比如加一個這樣的功能。

自判斷語言類型(主要是英語和漢語),并進行翻譯處理。

同樣的,因為有網絡請求,是以離不開我最喜歡的SuperAgent了。然後為了進一步提升使用者體驗,我又添加了一個cli-color子產品。

這樣就可以優雅的在指令行裡面顯示絢麗的文本了。

首先為了完成漢語的識别,用到了下面的這個函數。

代碼比較簡單,而且一看就差不多能明白這段代碼的功能。我們都知道漢語在Unicode字元中的區間為[\u4e00-\u9fa5],是以比對到這些字元的話,就預設為漢語了。

這裡面的最後一句話是雙非表達式。作用就是傳回一個boolean類型的結果。這個使用技巧是我在浏覽别人GitHub代碼的時候看到的,當時就覺得這樣寫很優雅,于是模仿了一下。

為了盡可能清楚的表達我的邏輯,代碼上添加了很多注釋。應該是很容易就能讀懂了吧。

下面來看下運作的效果。

Nodejs-cli 填坑記

到了最重要的一部分内容了。被這個cli坑了一個多小時了。不過還好,最終還是解決了它。

安裝完最新版本的Node之後,預設會自帶npm這個包管理工具。為了建構我的cli工具,我需要一個package.json的檔案。

比如我的檔案目錄結構如下:

然後在目前目錄的指令行中執行下面的指令:

然後根據指令行中的提示資訊進行填寫即可。填寫完成就會生成一個package.json的檔案了。

完成上面一步後就會得到類似于下面内容的檔案了。

需要注意的就是bin屬性,裡面填寫我們即将被打包的js檔案的相對路徑即可。比如我的index.js在package.json的同級目錄下,是以我這麼寫了。

如果你的index.js檔案在package.json的同級目錄下的bin檔案夾内,那你就得這麼寫:

最後記得儲存。

再就是執行下面的連結指令了(記得指令行路徑在package.json的同級目錄下)。

然後就可以根據bin中聲明的屬性來調用指令行腳本了。

下面談談我掉進去的坑。按照官網給的使用技巧,本人也測試了一下,發現并不好使。然後我發現通過npm link指令生成的cmd檔案有這麼個内容:

也就是說這個檔案本身就是錯誤的。node是找不到它的。而且在指令行中運作translator指令的時候根本不管用,它總會是用電腦上預設的文本編輯器打開相應的js腳本檔案。

一開始我以為是代碼有問題,然後修修改改,發現沒什麼問題啊。前前後後嘗試了好幾遍,都不得終。場面一度陷入了尴尬的地步。

然後在浏覽一些文章的時候,靈光一閃,為什麼找不到???

究其原因就是環境變量呗。于是我就順藤摸瓜,發現别人家的js腳本的開頭都有這麼一行代碼

一開始沒在意,以為是Linux特有的風格,然後我用的是VSCode,也能很好的運作就沒在意,然後這次在我的JS檔案中,我抱着試一試的态度加了這麼一行語句,結果竟然成功了。

這更是驗證了我關于環境變量的猜想,原來是這麼回事哦。。。

至此,一個簡單的node-cli工具就能制作完畢了。真的是無波折,不開心呐。

最後, 我想對自己說的就是:

遵守編碼規範,不要想當然。