資訊專欄INFORMATION COLUMN
摘要：前言這是一篇關(guān)于如何使用構(gòu)建高性能高可讀性的現(xiàn)代化命令行工具的博客。對于命令行工具來說，運(yùn)行時(shí)的權(quán)限是巨大的，但不要因此弄臟用戶的系統(tǒng)。
前言
這是一篇關(guān)于如何使用 NodeJS 構(gòu)建高性能、高可讀性的現(xiàn)代化命令行工具的博客。
每當(dāng)我們想要?jiǎng)?chuàng)建一個(gè)基于 NodeJS 的命令行工具時(shí)，就會(huì)衍生出一堆問題需要解決，比如如何準(zhǔn)備開發(fā)環(huán)境，如何打包轉(zhuǎn)譯代碼，如何使代碼在轉(zhuǎn)譯后保持可調(diào)用的狀態(tài)同時(shí)盡可能的壓縮體積，
以及怎樣設(shè)計(jì)項(xiàng)目分配 Command 與 Option 等等，這會(huì)浪費(fèi)巨大的時(shí)間，而且并非一定有成果。這時(shí)你可以注意到社區(qū)幾乎所有的命令行工具都是自成一派，
并沒有嚴(yán)謹(jǐn)?shù)目蚣芑蚣s定約束，也無所謂的最佳實(shí)踐，這使想要特別是第一次想要開發(fā)命令行工具的開發(fā)者望而卻步，或是幾番努力最后卻不盡如人意。
舉個(gè)例子來說，騰訊的 omi 是一個(gè)有眾多使用者的框架，但其命令行工具 omi / omi-cli 卻讓人貽笑大方。僅一些簡單的下載和創(chuàng)建模板的任務(wù)，造出長篇大論的文件不說，下載
時(shí)依賴數(shù)千，包的體積巨大，整體項(xiàng)目毫無設(shè)計(jì)幾乎是隨心所欲、天馬行空，這就是開發(fā)者本身并不擅長此道，只學(xué)會(huì)了 糊屎。（何謂 糊屎，參閱 JS 優(yōu)雅指南 2）
FUNC 的出現(xiàn)就是為了解決這些問題。func 本身的實(shí)現(xiàn)參閱了社區(qū)內(nèi)諸多基于 NodeJS 的命令行工具的優(yōu)秀實(shí)現(xiàn)，與流行的框架設(shè)計(jì)思路相結(jié)合，以優(yōu)雅的設(shè)計(jì)、小體積、高性能 等為目標(biāo)，
同時(shí)關(guān)注開發(fā)者體驗(yàn)，大幅度的提升了命令行工具項(xiàng)目的可擴(kuò)展性與可讀性，幾乎是如今 NodeJS 社區(qū)中開發(fā)命令行工具的最優(yōu)解。我們可以嘗試使用 func 構(gòu)建一個(gè)命令行工具。
在以前流行的一些命令行參數(shù)解析的庫中，我們在構(gòu)建項(xiàng)目前需要準(zhǔn)備大量的腳本與配置，甚至還要解決文件權(quán)限、bin、代碼轉(zhuǎn)譯等等問題，但使用 func，我們可以僅通過一行命令
初始化項(xiàng)目：
npm init func
項(xiàng)目初始化后進(jìn)入文件夾，隨機(jī)使用 npm install 或 yarn 安裝依賴，現(xiàn)在就可以正式開發(fā)了。
可以注意到，func 的項(xiàng)目模板中為我們準(zhǔn)備了 start 與 build 2 個(gè)腳本，它們都是由 func-service 驅(qū)動(dòng)的，幫助你一鍵切換開發(fā)與生產(chǎn)模式，我們所要做的就是專注于
命令行邏輯本身，實(shí)現(xiàn)邏輯就夠了。
我們可以隨意的創(chuàng)建一個(gè)類，當(dāng)它被加上 Command 注解時(shí)這就是一個(gè)命令，而被加上 Option 注解時(shí)就會(huì)轉(zhuǎn)變?yōu)橐粋€(gè)選項(xiàng):
import { Command } from "func"
@Command({ name: "test" })
export class Test {
}
在命令行中運(yùn)行
不同，當(dāng)你覺得差不多的時(shí)候，運(yùn)行 npm build 就可以將它打包，一切就是這么簡單。
有時(shí)候，當(dāng)我們需要使用到命令行攜帶的參數(shù)時(shí)，比如處理
@Command({ name: "test" })
export class Test {
constructor(
private args: CommandArgsProvider,
) {
}
}
CommandArgsProvider 實(shí)際上是一個(gè) class 類型，當(dāng)你標(biāo)記一個(gè)參數(shù)為此類型時(shí)，func 會(huì)在運(yùn)行時(shí)為你注入所有的命令參數(shù)，
同樣的也支持 OptionArgsProvider 、RegisterProvider 等等，你可以在 官方的文檔 閱讀它們的具體類型。
運(yùn)行 npm build 可以得到一個(gè)打包后的文件，這是由 ncc 編譯后的文件，通常它只有一個(gè) (如果攜帶 extra 可能會(huì)有多個(gè)，但它們會(huì)自動(dòng)鏈接)，
同時(shí)為你鏈接好了 bin，你要做的唯一一件事就是將包發(fā)布出去。為什么 func 使用這種方式發(fā)布呢？
我們知道當(dāng)你在安裝一個(gè)包或是使用 npx 執(zhí)行包時(shí) (這在使用命令行工具的人群中很常見)，NPM 所花費(fèi)的時(shí)間大約在 3 個(gè)部分，即對比包的依賴，下載包，執(zhí)行。
首先我們知道 func 的項(xiàng)目足夠的小，能夠大量介紹下載時(shí)間，同時(shí)也有足夠好的性能，現(xiàn)在要解決的就是在大量依賴時(shí)的對比分析問題，將文件打包成單文件不依賴
外部環(huán)境時(shí)會(huì)極大的減少所需時(shí)間，如果你再將所有的依賴移入 devDependencies 中，幾乎能夠在一瞬間完成 分析 - 下載 - 運(yùn)行 這三個(gè)步驟。這樣的體驗(yàn)是難以想象的。
是的，這里推薦你把所有的依賴當(dāng)做開發(fā)依賴處理，這似乎違背了 NPM Package 的開發(fā)哲學(xué)，但在使用 func 構(gòu)建命令行應(yīng)用時(shí)這樣做卻大有裨益。
在運(yùn)行 func build 完成的包時(shí)，我們注意到幾乎無需任何依賴，這是因?yàn)樵趩蝹€(gè)文件中已經(jīng) bundle 了所有的所需資源，也就意味著用戶在運(yùn)行 .js 文件時(shí)，
堆棧中真的就只有 .js 文件內(nèi)的內(nèi)容，不會(huì)引用其他，不會(huì)加載任何無關(guān)緊要的東西。此時(shí)我們也就無需用戶關(guān)心 dependencies，甚至可以移除它們，這樣一來，
下載或即時(shí)運(yùn)行時(shí)就直接跳過了 對比依賴版本 這一步，這其中省略了無數(shù)的請求也就會(huì)會(huì)極大的增加速度，npm init func 能夠在 1 秒左右立刻開始安裝也是這樣的道理。
現(xiàn)在你已經(jīng)知道了怎樣快速的構(gòu)建一個(gè)合格且優(yōu)雅的命令行工具，那怎樣做的更好呢？通常來說你需要遵循這幾點(diǎn)：
不因?yàn)樾」δ芤刖薮蟮陌灰胍蕾嚤ǖ陌?/strong> 舉例來說，download-git-repo 是一個(gè)很不錯(cuò)的包，它能夠?yàn)槟愎?jié)約很多時(shí)間，但請注意它依賴了 download，如果你僅為了下載單個(gè)文件或只有很少的下載需求時(shí)，
這就顯得有些大材小用，download 會(huì)為你增加約 450 kb 的重量，卻只做了一件你 5 分鐘可以搞定的事情。同樣你的用戶也會(huì)為此付出巨大的時(shí)間代價(jià)。
不要顯示錯(cuò)誤堆棧信息。
在多數(shù)情況下我們都需要盡可能的顯示堆棧或是引用的錯(cuò)誤信息便于 debug，但是在命令行工具中這樣做只會(huì)使你的用戶非常困惑。這主要?dú)w結(jié)于命令行中不能很好高亮
的顯示代碼塊，大量的代碼信息會(huì)使用戶不知所措。建議你始終構(gòu)建一個(gè)錯(cuò)誤處理模塊來解決問題，同時(shí)為用戶提供良好的反饋，最后可以提供類似于 --debug 的
選項(xiàng)讓開發(fā)者調(diào)試。
不要太依賴同步操作。
在 NodeJS 與其社區(qū)流行的 I/O 庫中，我們通常會(huì)有異步和同步函數(shù)兩種選擇，如 readFile 與 readFileSync，雖然同步函數(shù)可以為你節(jié)約一些開發(fā)時(shí)間，
但也會(huì)阻塞你的代碼，很多情況下會(huì)有難以理解的問題。比如當(dāng)你設(shè)置定時(shí)器顯示一個(gè) Loading 圖標(biāo)的同時(shí)操作了同步 API，那么你的 Loading 圖標(biāo)就會(huì)因?yàn)樽枞?br> 而無法運(yùn)動(dòng) (因?yàn)闊o法 render 到終端)，或是你同時(shí)操作多個(gè)文件，同步的 API 會(huì)使你花費(fèi)巨大的時(shí)間。
不要發(fā)布無用信息。
命令行工具很多時(shí)候的角色是充當(dāng)復(fù)雜的腳本，性能和體驗(yàn)是至關(guān)重要的，發(fā)布無用的信息在你的 package 中會(huì)使下載時(shí)間更長。(使用 files 來約束發(fā)布的文件)
不要修改臨時(shí)文件夾與配置區(qū)以外的信息。
對于命令行工具來說，運(yùn)行時(shí)的權(quán)限是巨大的，但不要因此弄臟用戶的系統(tǒng)。你可以使用 require("os").tmpdir() 獲取用戶操作系統(tǒng)的臨時(shí)文件夾目錄，無論何時(shí)，
你都擁有這里的寫權(quán)限。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/104921.html
摘要：也是一款優(yōu)秀的響應(yīng)式框架站點(diǎn)所使用的一套框架為微信服務(wù)量身設(shè)計(jì)的一套框架一組很小的，響應(yīng)式的組件，你可以在網(wǎng)頁的項(xiàng)目上到處使用一個(gè)可定制的文件，使瀏覽器呈現(xiàn)的所有元素，更一致和符合現(xiàn)代標(biāo)準(zhǔn)。 GitHub 值得收藏的前端項(xiàng)目 整理與收集的一些比較優(yōu)秀github項(xiàng)目，方便自己閱讀，順便分享出來，大家一起學(xué)習(xí)，本篇文章會(huì)持續(xù)更新，版權(quán)歸原作者所有。歡迎github star與fork 預(yù)...
摘要：幸運(yùn)的是，為了完成獨(dú)特的任務(wù)，無以計(jì)數(shù)的工具已經(jīng)被開發(fā)者發(fā)布。圖像顯示的是一個(gè)針對該框架的在線開發(fā)工具。是用創(chuàng)建的命令行工具，用于壓縮文件。是一組處理所有跟文件相關(guān)的工作的組件庫。是一個(gè)基于任務(wù)的命令行項(xiàng)目構(gòu)建工具。 JavaScript是一種靈活多變的腳本語言，它在全世界被廣泛的應(yīng)用在Web頁面和服務(wù)器應(yīng)用中。你可以因?yàn)槿魏文康娜ナ褂盟悄阈枰恍┕ぞ摺Ｐ疫\(yùn)的是，為了完成獨(dú)特的任...
摘要：一個(gè)文件，一張圖片一個(gè)文件都是一個(gè)模塊，都能用導(dǎo)入模塊的語法的，的導(dǎo)入進(jìn)來。自身只能讀懂類型的文件，其它的都不認(rèn)識。 webpack 是什么？ webpack是一個(gè)前端模塊化打包工具指（由于模塊化開發(fā)，所以需要打包，這里所說的模塊化開發(fā)主要指JS) 由于現(xiàn)代前端應(yīng)用程序越來越復(fù)雜，需要采用模塊化進(jìn)行開發(fā)，但瀏覽器還未支持模塊化開發(fā)，所以webpack才誕生 webpack默認(rèn)只支持js...
摘要：行代碼，你將擁有一個(gè)現(xiàn)代化規(guī)范測試驅(qū)動(dòng)高延展性的前端構(gòu)建工具。在閱讀前，給大家一個(gè)小懸念什么是鏈?zhǔn)讲僮髦虚g件機(jī)制如何讀取構(gòu)建文件樹如何實(shí)現(xiàn)批量模板渲染代碼轉(zhuǎn)譯如何實(shí)現(xiàn)中間件間數(shù)據(jù)共享。函數(shù)將參數(shù)中的掛載到上，并返回以便于鏈?zhǔn)讲僮骷纯伞? ES2017+，你不再需要糾結(jié)于復(fù)雜的構(gòu)建工具技術(shù)選型。 也不再需要gulp,grunt,yeoman,metalsmith,fis3。 以上的這些構(gòu)建...
閱讀 1074·2021-11-24 09:39
閱讀 1306·2021-11-18 13:18
閱讀 2422·2021-11-15 11:38
閱讀 1823·2021-09-26 09:47
閱讀 1625·2021-09-22 15:09
閱讀 1623·2021-09-03 10:29
閱讀 1509·2019-08-29 17:28
閱讀 2950·2019-08-29 16:30
