這些Node開(kāi)源工具你值得擁有(上)
本文轉(zhuǎn)載自微信公眾號(hào)「前端那些趣事」,作者樹醬君。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端那些趣事公眾號(hào)。
通過(guò)閱讀 awesome-nodejs 庫(kù)的收錄,我抽取其中一些應(yīng)用場(chǎng)景比較多的分類,通過(guò)分類涉及的應(yīng)用場(chǎng)景跟大家分享工具
1.Git
1.1 應(yīng)用場(chǎng)景1: 要實(shí)現(xiàn)git提交前 eslint 校驗(yàn)和 commit 信息的規(guī)范校驗(yàn)?
可以使用以下工具:
- husky - 現(xiàn)代化的本地Git鉤子使操作更加輕松
- pre-commit - 自動(dòng)在您的git儲(chǔ)存庫(kù)中安裝git pre-commit腳本,該腳本在pre-commit上運(yùn)行您的npm test。
- yorkie 尤大改寫的yorkie,yorkie實(shí)際是fork husky,讓 Git 鉤子變得簡(jiǎn)單(在 vue-cli 3x 中使用)
1.2 應(yīng)用場(chǎng)景2: 如何通過(guò)node拉取git倉(cāng)庫(kù)?(可用于開(kāi)發(fā)腳手架)
可以使用以下工具:
- download-git-repo - 下載和提取Git倉(cāng)庫(kù) (支持GitHub, GitLab, Bitbucket)。
1.3 應(yīng)用場(chǎng)景3: 如何在終端看git 流程圖?
可以使用以下工具:
- gitgraph - 在 Terminal 繪制 git 流程圖(支持瀏覽器、React)。
1.4 其他
- git-url-parse - 高級(jí)別git解析。
- giturl - 將Git鏈接轉(zhuǎn)化成Web鏈接。
2.環(huán)境
2.1 應(yīng)用場(chǎng)景1: 如何根據(jù)不同環(huán)境寫入不同環(huán)境變量?
可以使用以下工具:
- cross-env - 跨平臺(tái)環(huán)境腳本的設(shè)置,你可以通過(guò)一個(gè)簡(jiǎn)單的命令(設(shè)置環(huán)境變量)而不用擔(dān)心設(shè)置或者使用環(huán)境變量的平臺(tái)。
- dotenv - 從 .env文件 加載用于nodejs項(xiàng)目的環(huán)境變量。
- vue-cli --mode - 可以通過(guò)傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式
3.NPM
3.1 應(yīng)用場(chǎng)景1: 如何切換不同npm源?
可以使用以下工具:
- nrm - 快速切換npm注冊(cè)服務(wù)商,如npm、cnpm、nj、taobao等,也可以切換到內(nèi)部的npm源
- pnpm - 可比yarn,npm 更節(jié)省了大量與項(xiàng)目和依賴成比例的硬盤空間
3.2 應(yīng)用場(chǎng)景2: 如何讀取package.json信息?
可以使用以下工具:
- read-pkg-up - 讀取最近的package.json文件。
- node-pkginfo - 從package.json讀取屬性的簡(jiǎn)單方法。
3.3 應(yīng)用場(chǎng)景3:如何查看當(dāng)前package.json依賴允許的更新的版本
可以使用以下工具:
npm-check-updates - 找當(dāng)前package.json依賴允許的更新的版本。
3.4 應(yīng)用場(chǎng)景4:如何同時(shí)運(yùn)行多個(gè)npm腳本
通常我們要運(yùn)行多腳本或許會(huì)是這樣npm run build:css && npm run build:js ,設(shè)置會(huì)更長(zhǎng)通過(guò)&來(lái)拼接
可以使用以下工具:
- npm-run-all - 命令行工具,同時(shí)運(yùn)行多個(gè)npm腳本(并行或串行)
npm-run-all提供了三個(gè)命令,分別是 npm-run-all run-s run-p,后兩者是 npm-run-all 帶參數(shù)的簡(jiǎn)寫,分別對(duì)應(yīng)串行和并行。而且還支持匹配分隔符,可以簡(jiǎn)化script配置
或者使用
concurrently - 并行執(zhí)行命令,類似 npm run watch-js & npm run watch-less但更優(yōu)。(不過(guò)它只能并行)
3.5 應(yīng)用場(chǎng)景5:如何檢查NPM模塊未使用的依賴。
可以使用以下工具:
3.6 其他:
- npminstall - 使 npm install 更快更容易,cnpm默認(rèn)使用
- semver - NPM使用的JavaScript語(yǔ)義化版本號(hào)解析器。
關(guān)于npm包在線查詢,推薦一個(gè)利器 npm.devtool.tech
4.文檔生成
4.1 應(yīng)用場(chǎng)景1:如何自動(dòng)生成api文檔?
docsify - API文檔生成器。
jsdoc - API文檔生成器,類似于JavaDoc或PHPDoc。
5.日志工具
5.1 應(yīng)用場(chǎng)景1:如何實(shí)現(xiàn)日志分類?
log4js-nodey - 不同于Java log4j的日志記錄庫(kù)。
consola - 優(yōu)雅的Node.js和瀏覽器日志記錄庫(kù)。
winston - 多傳輸異步日志記錄庫(kù)(古老)
6.命令行工具
6.1 應(yīng)用場(chǎng)景1: 如何解析命令行輸入?
我們第一印象會(huì)想到的是process.argv,那么還有什么工具可以解析嗎?
可以使用以下工具:
- minimist - 命令行參數(shù)解析引擎
- arg - 簡(jiǎn)單的參數(shù)解析
- nopt - Node/npm 參數(shù)解析
6.2 應(yīng)用場(chǎng)景2:如何讓用戶能與命令行進(jìn)行交互?
可以使用以下工具:
- Inquirer.js - 通用可交互命令行工具集合。
- prompts - 輕量、美觀、用戶友好的交互式命令行提示。
- Enquirer - 用戶友好、直觀且易于創(chuàng)建的時(shí)尚CLI提示。
6.3 應(yīng)用場(chǎng)景3: 如何在命令行中顯示進(jìn)度條?
可以使用以下工具:
- progress - Node.js的靈活ascii進(jìn)度條。
- progress-estimator - 記錄進(jìn)度條并估計(jì)完成承諾所需的時(shí)間。
6.4 應(yīng)用場(chǎng)景4: 如何在命令行執(zhí)行多任務(wù)?
可以使用以下工具:
- listr - 命令行任務(wù)列表。
6.5 應(yīng)用場(chǎng)景5: 如何給命令行“錦上添花”?
可以使用以下工具:
- chalk - 命令行字符串樣式美化工具。
- ora - 優(yōu)雅的命令行l(wèi)oading效果。
- colors.js - 獲取Node.js控制臺(tái)的顏色。
- qrcode-terminal - 命令行中顯示二維碼。
- treeify - 將javascript對(duì)象漂亮地打印為樹。
- kleur - 最快的Node.js庫(kù),使用ANSI顏色格式化命令行文本。
感興趣的童鞋可以參考樹醬的從0到1開(kāi)發(fā)簡(jiǎn)易腳手架,其中有實(shí)踐部分工具
7.加解密
一般為了項(xiàng)目安全性考慮,我們通常會(huì)對(duì)賬號(hào)密碼進(jìn)行加密,一般會(huì)通過(guò)MD5、AES、SHA1、SM,那開(kāi)源社區(qū)有哪些庫(kù)可以方便我們使用?
可以使用以下工具:
- crypto-js - JavaScript加密標(biāo)準(zhǔn)庫(kù)。支持算法最多
- node-rsa - Node.js版Bcrypt。
- node-md5 - 一個(gè)JavaScript函數(shù),用于使用MD5對(duì)消息進(jìn)行哈希處理。
- aes-js - AES的純JavaScript實(shí)現(xiàn)。
- sm-crypto - 國(guó)密sm2, sm3, sm4的JavaScript實(shí)現(xiàn)。
- sha.js - 使用純JavaScript中的流式SHA哈希。
8.靜態(tài)網(wǎng)站生成 & 博客
一鍵生成網(wǎng)站不香嗎~ 基于node體系快速搭建自己的博客網(wǎng)站,你值得擁有,也可以作為組件庫(kù)文檔展示
可以使用以下工具:
- hexo - 使用Node.js的快速,簡(jiǎn)單,強(qiáng)大的博客框架。
- vuepress - 極簡(jiǎn)的Vue靜態(tài)網(wǎng)站生成工具。(基于nuxt SSR)
- netlify-cms - 基于Git的靜態(tài)網(wǎng)站生成工具。
- vitepress - Vite & Vue.js靜態(tài)網(wǎng)站生成工具。
9.數(shù)據(jù)校驗(yàn)工具
數(shù)據(jù)校驗(yàn),離我們最近的就是表單數(shù)據(jù)的校驗(yàn),在平時(shí)使用的組件庫(kù)比如element、iview等我們會(huì)看到使用了一個(gè)開(kāi)源的校驗(yàn)工具async-validator, 那還有其他嗎?
可以使用以下工具:
- validator.js - 字符串校驗(yàn)庫(kù)。
- joi - 基于JavaScript對(duì)象的對(duì)象模式描述語(yǔ)言和驗(yàn)證器。
- async-validator - 異步校驗(yàn)。
- ajv - 最快的JSON Schema驗(yàn)證器
- superstruct - 用簡(jiǎn)單和可組合的方式在JavaScript和TypeScript中校驗(yàn)數(shù)據(jù)。
10.解析工具
10.1應(yīng)用場(chǎng)景1: 如何解析markdown?
可以使用以下工具:
- marked - Markdown解析器和編譯器,專為提高速度而設(shè)計(jì)。
- remark - Markdown處理工具。
- markdown-it -支持100%通用Markdown標(biāo)簽解析的擴(kuò)展&語(yǔ)法插件。
10.2應(yīng)用場(chǎng)景2: 如何解析csv?
可以使用以下工具:
- PapaParse - 快速而強(qiáng)大的 CSV(分隔文本)解析器,可以優(yōu)雅地處理大文件和格式錯(cuò)誤的輸入。
- node-csv - 具有簡(jiǎn)單api的全功能CSV解析器,并針對(duì)大型數(shù)據(jù)集進(jìn)行了測(cè)試。
- csv-parser -旨在比其他任何人都快的流式CSV解析器。
10.3應(yīng)用場(chǎng)景3: 如何解析xml?
可以使用以下工具:
- xml2js - 將XML轉(zhuǎn)換為JavaScript對(duì)象的轉(zhuǎn)換器。
- fast-xml-parser - 具驗(yàn)證&解析 XML。
最后
如果你喜歡這個(gè)庫(kù),也給作者h(yuǎn)uaize2020 一個(gè)star 倉(cāng)庫(kù)地址:awesome-nodejs昨天看到一段話想分享給大家
對(duì)于一個(gè)研發(fā)測(cè)的日常:
1.開(kāi)始工作的第一件事,規(guī)劃今日的工作內(nèi)容安排 (建議有清晰的ToDolist,且按優(yōu)先級(jí)排序)
2.確認(rèn)工作量與上下游關(guān)聯(lián)風(fēng)險(xiǎn)(如依賴他人的,能否按時(shí)提供出來(lái));有任何風(fēng)險(xiǎn),盡早暴露
3.注意時(shí)間成本、不是任何事情都是值得你用盡所有時(shí)間去做的,分清主次關(guān)系
4.協(xié)作任務(wù),明確邊界責(zé)任,不要出現(xiàn)誰(shuí)都不管,完成任務(wù)后及時(shí)同步給相關(guān)人
5.及時(shí)總結(jié)經(jīng)驗(yàn),沉淀技術(shù)產(chǎn)出實(shí)現(xiàn)能力復(fù)用,同類型任務(wù),不用從零開(kāi)始,避免重復(fù)工作