這些node開源工具你值得擁有(下)

?

前言：前端時(shí)間分享了這些node開源工具你值得擁有(上) 主要圍繞git、npm、命令行工具、加解密工具、數(shù)據(jù)校驗(yàn)、文檔生成工具等方面。通過現(xiàn)成的輪子來提升我們的開發(fā)效率，來解決在不同場景應(yīng)用中遇到的一些問題

?

通過閱讀 D庫的收錄，我抽取其中一些應(yīng)用場景比較多的分類，通過分類涉及的應(yīng)用場景跟大家分享工具

1.圖形處理 ???

1.1 應(yīng)用場景1: 如何實(shí)現(xiàn)給圖片做裁剪、格式轉(zhuǎn)換、旋轉(zhuǎn)變換、濾鏡添加等操作

可以使用以下工具：

• sharp ：調(diào)整JPEG，PNG，WebP和TIFF格式圖像大小的最快模塊。
• jimp ：純JavaScript中的圖像處理。
• gm ：GraphicsMagick 和 ImageMagick 封裝
• lwip ：不需要ImageMagick的輕量級圖像處理器

如下裁剪圖所示

?

啊翔同學(xué)：上面提到ImageMagick是個(gè)什么鬼？官方介紹：ImageMagick是一套功能強(qiáng)大、穩(wěn)定而且開源的工具集和開發(fā)包，可以用來讀、寫和處理超過89種基本格式的圖片文件，包括流行的TIFF、JPEG、GIF、 PNG、PDF以及PhotoCD等格式。利用ImageMagick，你可以根據(jù)web應(yīng)用程序的需要?jiǎng)討B(tài)生成圖片, 還可以對一個(gè)(或一組)圖片進(jìn)行改變大小、旋轉(zhuǎn)、銳化、減色或增加特效等操作

?

1.2  應(yīng)用場景2: 如何實(shí)現(xiàn)生成二維碼和條形碼

可以使用以下工具：

• node-qrcode ：二維碼和條形碼生成器
• qr-image ：二維碼生成器

?

啊樂同學(xué)：如果我想解析二維碼的話，有沒有什么輪子可以用？

?

你可以使用：

• jsQR ：一個(gè)純javascript的二維碼讀取庫。該庫接收原始圖像，并將定位、提取和解析其中發(fā)現(xiàn)的任何二維碼。

1.3  應(yīng)用場景3: 如何對比圖片像素是否一致？

可以使用以下工具：

• pixelmatch ： 最小、最簡單、最快的 JavaScript 像素級圖像比較庫。
• resemble.js ：圖片像素對比工具

1.4  應(yīng)用場景4: 如何檢驗(yàn)圖片類型？

可以使用以下工具：

• image-type ： 檢測Buffer / Uint8Array的圖像類型.

2.構(gòu)建工具 ??

2.1 應(yīng)用場景1: 構(gòu)建工具都有哪些？

可以使用以下工具：

• webpack ：打包瀏覽器的模塊和資產(chǎn)。
• parcel ：快速，零配置的Web應(yīng)用構(gòu)建工具。
• esbuild ：極快的JavaScript打包壓縮工具，不使用 AST
• rollup ：新一代的 ES2015 打包構(gòu)建工具。
• grunt ：JavaScript任務(wù)執(zhí)行器。
• gulp ：流式快速構(gòu)建系統(tǒng)，支持代碼而不是配置。
• snowpack ：是一個(gè)相對輕量的 bundless 方案

2.2 應(yīng)用場景2：支持esm的構(gòu)建工具有哪些？

可以使用以下工具：

• vite ：新一代前端構(gòu)建工具。
• snowpack ：由ESM支持的前端構(gòu)建工具。即時(shí)，輕量級，無捆綁開發(fā)

?

???  啊開童鞋：什么是Bundleless？

?

Bundleless 模式是利用瀏覽器能夠自主加載的特性，通過跳過打包環(huán)節(jié)，使得我們在項(xiàng)目啟動時(shí)可以直接獲取到極快的啟動速度，而在本地更新時(shí)只需要重新編譯單個(gè)文件

3.緩存  ??

3.1 應(yīng)用場景1: 基于LRU緩存工具算法有哪些？

?

??? 啊樂童鞋：LRU緩存是啥？

?

LRU 全稱叫Least Recently Used，也叫最近最少使用，是一種緩存淘汰算法。核心是內(nèi)容是如果數(shù)據(jù)最近被訪問過,那么將來被訪問的幾率也更高，相如果是很久都沒用過的數(shù)據(jù)會優(yōu)先對其刪除，常用于優(yōu)化緩存查詢性能，包括我們使用的框架vue中的keep-alive也是基于該算法開發(fā)的

• lru-cache ：最近最少使用的緩存（LRU）實(shí)現(xiàn)。
• hashlru ：更輕量更快的LRU算法。
• ylru ：基于hashlru添加過期時(shí)間，允許空值。

3.2 應(yīng)用場景2: 基于Node的緩存工具有哪些？

• node-cache ：Node.js內(nèi)存緩存模塊。
• node-cache-manager ：Node.js Cache模塊。

4.最小化 ??

?

應(yīng)用的性能優(yōu)化，我們會想到j(luò)s、html、css的文件的壓縮，使得其文件最小化，那么有什么輪子可以直接使用？

?

4.1 應(yīng)用場景1: js的文件壓縮工具有哪些？

• uglify-js: JavaScript壓縮工具。

?

????? 啊樂童鞋：我記得之前好像有個(gè)webpack插件叫uglifyjs-webpack-plugin，跟你說的這個(gè)有什么關(guān)系？

?

uglifyjs-webpack-plugin就是基于uglifyjs開發(fā)的插件，只不過UglifyJs不支持直接處理ES6文件，只能處理ES5文件，對于ES6語法，我們之前的代碼最小化過程如下所示向下

雖然后來出了Uglify-ES支持處理ES6文件，但也因?yàn)榇嬖赽ug太多，目前該項(xiàng)目也停止維護(hù)了。不過后來Terserfork了Uglify-ES然后進(jìn)行了維護(hù)迭代，也就后來有了terser-webpack-plugin

?

????? 啊樂童鞋：那有沒有可以支持處理ES6 code的壓縮工具

?

隨著瀏覽器對es6特性支持更多，我們的代碼最小化過程如下

可以使用以下工具：

• babel-minify：基于Babel工具鏈的 ES6+ 壓縮庫, 以前叫 babili
• terser: 用于es6的javascript解析器和混淆壓縮工具包

下面是個(gè)對比圖??

4.2 應(yīng)用場景2: css的文件壓縮工具有哪些？

可以使用以下工具：

• cssnano: 建立在PostCSS生態(tài)系統(tǒng)之上模塊化的壓縮工具。
• clean-css: CSS壓縮工具。

4.3 應(yīng)用場景3: 圖片壓縮工具有哪些？

• imagemin: Image壓縮工具。

4.4 應(yīng)用場景4：webpack生態(tài)有哪些比較主流的壓縮插件？

• uglifyjs-webpack-plugin: 基于uglifyjs壓縮js文件，不支持es6
• terser-webpack-plugin: 支持壓縮 ES6 (Webpack4)
• html-webpack-plugin: 簡化 HTML 文件創(chuàng)建
• optimize-css-assets-webpack-plugin: 優(yōu)化減少CSS資源的Webpack插件。webpack5中改為：css-minimizer-webpack-plugin

5. 網(wǎng)絡(luò)??

5.1 應(yīng)用場景1: 如何獲取用戶ip地址？

?

????? 啊樂同學(xué)：我們在node服務(wù)一般通過什么信息去獲取用戶的ip信息

?

一般可以從下面的這些信息獲取，當(dāng)然有蠻多好的“輪子“可以使用哦～

可以使用以下工具：

• node-ip: NodeJS IP地址工具。
• public-ip: 非常快的獲取你的公網(wǎng)IP地址。
• request-ip: 在服務(wù)器中獲取請求的IP地址。

5.2 應(yīng)用場景2: 如何知道當(dāng)前該使用哪個(gè)新的端口？

?

?? 啊森同學(xué)：我們通過vue-cli這類腳手架運(yùn)行項(xiàng)目本地開發(fā)環(huán)境的時(shí)候，會起一個(gè)本地服務(wù)并分配一個(gè)端口，他這個(gè)是怎么做的？

?

我們在vue-cli源碼中，可以看到它使用的是node-portfinder, 它不僅可以自動檢測當(dāng)前端口是否被占用如果占用還會返回新端口

• node-portfinder :在當(dāng)前機(jī)器上查找開放端口 或 域套接字的簡單工具。
• get-port :獲取一個(gè)可用的端口。

6. HTTP ??

6.1 應(yīng)用場景1 ：有哪些請求庫工具可以使用？

可以使用以下工具：

• axios: 基于Promise 的HTTP客戶端（也可以在瀏覽器中工作）。
• request: 簡單的 HTTP 請求客戶端。
• superagent: HTTP請求庫。
• node-fetch:  Node.js的 window.fetch 實(shí)現(xiàn)。

6.2 應(yīng)用場景2: 我如何用node起一個(gè)服務(wù)？

?

我想通過起一個(gè)服務(wù)，或者做模擬數(shù)據(jù),或者做靜態(tài)資源服務(wù)器等等，有什么輪子可以用？

?

• http-server: 零配置的命令行Http服務(wù)端。
• anywhere: 隨時(shí)隨地將你的當(dāng)前目錄變成一個(gè)靜態(tài)文件服務(wù)器的根目錄。
• json-server: 在不到30秒的時(shí)間內(nèi)獲得具有零編碼的完整偽造的REST API。

?

?? 啊寬同學(xué)：如果我想啟動一個(gè)守護(hù)進(jìn)程？

?

你可以使用比如pm2來啟動服務(wù)，可以保證進(jìn)程永遠(yuǎn)都活著

可以使用以下工具：

• pm2: 高級進(jìn)程管理工具。
• nodemon: 監(jiān)視應(yīng)用程序中的更改并自動重新啟動服務(wù)器。
• forever: 簡單的CLI工具，用于確認(rèn)提供的代碼持續(xù)運(yùn)行。
• supervisor: 當(dāng)腳本崩潰時(shí)重新啟動腳本，或者當(dāng)*.js文件更改時(shí)重新啟動腳本。

6.3 應(yīng)用場景3: 我如何用Node起一個(gè)代理服務(wù)？

?

我們常常可以在webpack中看到webpack-dev-server的配置，然后配置本地開發(fā)接口映射，以此接解決本地開發(fā)跨域存在的問題，本質(zhì)上就是基于http-proxy-middleware中間件 ，通過把后端的API的請求代理到本地服務(wù)器上。包括mock服務(wù)也是一種代理服務(wù)，代理服務(wù)器只是起一個(gè)中轉(zhuǎn)作用，總結(jié)用于解決以下三點(diǎn)

?

• 本地開發(fā)
• 代理訪問
• 防止跨域

可以使用以下工具：

• http-proxy: 高級進(jìn)程管理工具。
• http-proxy-middleware : ?用于connect，express和browser-sync的單線Node.js Http代理中間件。
• fast-proxy:  Node.js框架，使您可以將http請求轉(zhuǎn)發(fā)到另一個(gè)HTTP服務(wù)器。支持的協(xié)議：HTTP，HTTPS，HTTP2。

7. 模版引擎 ??

?

模板引擎是一個(gè)通過結(jié)合頁面模板、要展示的數(shù)據(jù)生成HTML頁面的工具，本質(zhì)上是后端渲染（SSR）的需求，加上Node渲染頁面本身是純靜態(tài)的，當(dāng)我們需要頁面多樣化、更靈活，我們就需要使用模板引擎來強(qiáng)化頁面，更好的凸顯服務(wù)端渲染的優(yōu)勢

?

可以使用以下工具：

• pug: 是一款健壯、靈活、功能豐富的模板引擎,專門為 Node.js 平臺開發(fā)
• mustache: 輕量的JavaScript模板引擎{{八字須}}。
• art-template: 高性能JavaScript模板引擎。
• handlebars: Mustache 模板的超集，添加了強(qiáng)大的功能，如helper和更高級的block。
• doT: 最快簡潔的JavaScript模板引擎。

針對性能，我們將不同的工具進(jìn)行渲染速度對比，可參考下圖??

8. 函數(shù)式編程 ??

?

函數(shù)式編程大量使用函數(shù)，使得我們重復(fù)代碼減少，同時(shí)也不會改變外界的狀態(tài)，因?yàn)槿绻蕾嚕瑫斐上到y(tǒng)復(fù)雜性大大提高

?

可以使用以下工具：

• immer: 函數(shù)式響應(yīng)式編程。

• immutable: 不可變的數(shù)據(jù)集合。

• lodash:可提供一致性、自定義、性能和其他功能的實(shí)用程序庫，比Underscore.js更好更快。

• rxjs: 用于轉(zhuǎn)換、組合和查詢各種數(shù)據(jù)的函數(shù)式響應(yīng)式庫。

• lazy:  類似于lodash/underline的工具庫，但具有惰性計(jì)算，在許多情況下可以轉(zhuǎn)換為卓越的性能.

9. 文件系統(tǒng) ??

?

我們知道Node體系中有fs模塊, 對有關(guān)文件進(jìn)行相應(yīng)目錄的創(chuàng)建、寫入及刪除操作等等。除了現(xiàn)有的api還有沒有其他現(xiàn)成的輪子可以用

?

9.1 應(yīng)用場景1: fs模塊相關(guān)的工具？（文件讀取，目錄創(chuàng)建，刪除）

可以使用以下工具：

• fs-extra : 為 fs 模塊提供額外方法。

• graceful-fs:graceful-fs可以替代fs模塊，并做了各種改進(jìn)。

• filesize: 生成人類可讀的文件大小字符串。

• make-dir: 遞歸創(chuàng)建文件夾，類似 mkdir -p。

• find-up:   通過上級父目錄查找文件或目錄。

• ncp:   使用Node.js進(jìn)行異步遞歸文件復(fù)制。

• rimraf:   遞歸刪除文件，類似 rm -rf。

9.2 應(yīng)用場景2: 如何監(jiān)控文件變更？

?

替換 fs.watch

?

可以使用以下工具：

• chokidar : 最小且高效的跨平臺Watch庫。