阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

我很喜歡在 NPM 目錄到處逛、尋找優質小套件。今天跟你分享五個我的近期發現!

1. Urlcat

Urlcat 是一個小型的 Javascript 套件,可以非常方便地建立 URL、預防常見錯誤。

你當然可以直接用 URL API 來建立網址,但這種做法需要你手動處理一些細節。

Urlcat 就方便多了,隨插即用,不用花一堆時間讀文件,就能直接開始用。

https://github.com/balazsbotond/urlcat

2. UseHooks-ts

如果你是 React 開發者、有在用 hook,很多時候你需要替一大堆小東西寫 custom hook。像是處理深色模式、處理視窗大小變化事件,等等。

UseHooks 是一個小套件,針對各種小案例都有現成的 hook,而且文件齊全、支援 TypeScript。

https://github.com/juliencrn/usehooks-ts

3. Logt

我喜歡到處都有日誌,當需要知道發生了什麼時,就可以檢查。

當我寫前端時,我也想要那些日誌。但有一些先決條件:

  • 必須有完整的型別(這樣我就可以在 Typescript 中方便使用)
  • 必須很小
  • 必須有彩色標籤(所以我很快就知道日誌類型)
  • 必須有分日誌級別
  • 必須有一些方法,可以根據條件隱藏一些日誌(比如是否在正式環境)
  • 必須可以將這些日誌發送到其他地方(比如 Sentry)

經過大量時間研究(我都快自己開始寫了)我找到了 Logt,它滿足我的所有要求

100% 推薦!

https://github.com/sidhantpanda/logt

4. Loadable Components

如果你正在嘗試優化 React 應用程式,你可能正在使用 React.lazy 和 Suspense 來延遲載入元件。

雖然也是可以,但還有更好的方法!比如這個套件。我無法在此完整說明原因,但請參考以下比較: https://loadable-components.com/docs/loadable-vs-react-lazy/

基本上,它支持 SSRServer Side Rendering)、Library Splitting,甚至 完全動態導入。還不錯吧?

此外,它真的很容易使用。幾乎即插即用。所以,試試吧!

https://github.com/gregberge/loadable-components

5. Emoji Mart

在處理不同的專案時,我總是要處理表情符號。現在到處都在使用它。而且我通常必須在專案中添加一些表情符號選擇器元件。

這還不算難。但是隨後開始收到更多要求:它必須延遲載入表情符號,它必須支持國際化,它必須允許搜尋,它必須允許使用與 slack 相同的查詢縮寫

這些是可以做,但還是花時間在專案本身比較好吧。

所以,來使用 Emoji Mart 吧!

https://github.com/missive/emoji-mart


以上是五個好用但是還不知名的小套件,希望你喜歡!


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈