首頁 > web前端 > js教程 > 您沒有使用(但應該使用)的被低估的 NPM 軟體包

您沒有使用(但應該使用)的被低估的 NPM 軟體包

Patricia Arquette
發布: 2024-12-19 17:39:10
原創
785 人瀏覽過

nderrated NPM Packages You’re Not Using (But Should Be)

NPM 的世界是廣闊的。擁有超過200 萬個可用軟體包,您很容易會被大牌——React、Lodash、Express——所吸引,而錯過一些真正被低估的寶石,這些寶石可以讓您作為開發者的生活變得更加輕鬆。

1。日期-fns-tz
無需額外開銷即可解決時區問題

時區是最糟糕的。跨時區解析和格式化日期很快就會變成一場噩夢。雖然像 moment-timezone 這樣的庫很受歡迎,但它們往往臃腫且過時。輸入日期-fns-tz。

為什麼被低估:

  • 輕量級且建構於 date-fns 之上。
  • 專注於時區管理,而不是陽光下的一切。
  • 現代、可搖樹,非常適合模組化專案。

用例:
您正在建立一個為不同時區的使用者安排活動的應用程式。

範例:
`從 'date-fns-tz' 導入 { formatInTimeZone };

const timeZone = '美國/紐約';
const date = new Date();

const formattedDate = formatInTimeZone(date, timeZone, 'yyyy-MM-dd HH:mm:ssXXX');
console.log(格式化日期); // 2024-11-25 10:00:00-05:00`

2。 clsx
管理動態類別名稱的更智慧方法

如果您曾經必須在 React 中編寫複雜的 className 邏輯,您就會知道它會變得多麼混亂。 clsx 是一個小型實用程序,可將條件類別名稱簡化為乾淨、可讀的程式碼。

為什麼被低估:

  • 將條件邏輯、陣列和物件組合到一個實用程式中。
  • 自動處理假值-類別字串中不再有未定義或空值。
  • 非常適合動態 UI。

用例:
在 React 中管理按鈕、模式或表單的多個類別條件。

範例:
`從 'clsx' 導入 clsx;

const isActive = true;
const isDisabled = false;

const buttonClass = clsx('btn', { 'btn-active': isActive, 'btn-disabled': isDisabled });
console.log(buttonClass); //「btn btn-active」`

3。哇
運行更強大、更具可讀性的輸入驗證

輸入驗證通常感覺像樣板程式碼——必要的,但重複且乏味。 Sindre Sorhus(許多優秀 NPM 工具的創建者)的 ow 使輸入驗證具有聲明性和可讀性。

為什麼被低估:

  • TypeScript 友好,帶有詳細的錯誤訊息。
  • 表達語法更簡潔的程式碼。
  • 無需外部依賴即可處理複雜的驗證。

用例:
驗證 API 回應、CLI 輸入或函數參數。

範例:
`從 'ow' 導入 ow;

const validateUser = (用戶) => {
ow(用戶, ow.object.exactShape({
名稱:ow.string.minLength(3),
年齡:ow.number.integer.positive,
電子郵件:ow.string.url,
}));
};

validateUser({ name: 'John', 年齡: 25, email: 'example@example.com' }); // 透過`

4。 npm 檢查
檢查你的依賴

有沒有想過您的專案的依賴項是否已過期或是否有某些內容可以刪除? npm-check 就像你的node_modules 的Marie Kondo。

為什麼被低估:

  • 檢查是否有過時、未使用或缺少的依賴項。
  • 互動式 CLI 可讓您直接更新或解除安裝軟體套件。
  • 適用於全域和本機套件。

用例:
保持專案依賴關係乾淨且最新,無需手動檢查。

範例:
npx npm 檢查

執行此命令,它將為您提供一個互動式依賴項列表,其中包含更新或刪除它們的選項。

5。日誌符號
以最少的努力獲得更好的 CLI 回饋

建置 CLI 工具或腳本?使用日誌符號使您的日誌更加直觀。它將平台友好的圖標(複選標記、叉號、警告)添加到您的終端輸出中。

為什麼被低估:

  • 使終端輸出具有視覺吸引力且更易於理解。
  • 輕量級且可自訂。 = 適用於任何平台 - macOS、Linux、Windows。

用例:
為自訂 CLI 工具或部署腳本新增視覺回饋。

範例:
`從'log-symbols'導入logSymbols;

console.log(logSymbols.success, '建造成功完成!');
console.log(logSymbols.error, '連接資料庫失敗。');
console.log(logSymbols.warning, '使用預設配置。');`

NPM 的意義遠不止於我們平常想像的那樣。

下次當您發現自己陷入重複性任務或尋找更聰明的方法來處理某些事情時,請深入研究 NPM 生態系統鮮為人知的角落。

你最喜歡的被低估的 NPM 包是什麼?

以上是您沒有使用(但應該使用)的被低估的 NPM 軟體包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板