全文共2080字,預計學習時長
6分鐘作為前端開發人員,互聯網有很多令人驚歎的工具,這些工具為我們的生活提供了極大的便利。
本文將快速回顧開發工作中經常使用的 11 個工具。
大家和小芯一起來看看吧~
1. Minify
為減小應用代碼的包大小空間,可以對其進行壓縮。壓縮能清除空白格,無效代碼等,讓應用程序的包大小大幅減小,從而加快瀏覽器的加載時間。
這個在線工具minify.com能夠對網站代碼進行壓縮。
2.Unminify
這個工具與Minify的作用恰恰相反。
Unminify通過解壓、去模糊化和美觀化代碼,能夠再次讀出一段壓縮過的代碼。
3. BundlePhobia
你是否曾經不確定node_modules的空間大小,或只想知道pakckage.json 在電腦中佔存多少?BundlPhobia能為你解答。
此工具可以上傳一個packa.json 文件,同時顯示從package.json 中植入的附屬項的大小。
4. Stackblitz
這是最受歡迎的工具。Stackblitz提供了世界範圍內最普及和使用頻率最高的IDE 程序和網頁上的 VisualStudioCode。
只需單擊一下,Stackblitz 便能快速架構起Angular,React,Vue,Vanilla,RxJS,TypeScript等項目。
想要嘗試編寫新代碼,或瀏覽器 中JS當前的任何框架特徵,Stackblitz對你來說都大有裨益。想象你正在閱讀 Angular 的一篇文章,遇到了想要嘗試的代碼,就將瀏覽器最小化,用幾個 LOC 構建新的 Angular 項目。
操作簡單便捷。
還有很多好用的在線IDE,但我相信Stackblitz有其獨特之處。Visual Studio Code這款工具大家都擅長使用,也都喜歡使用,Stackblitz正是抓住了這點。
5. Babel REPL
Babel是一個免費的開源 JS 編譯器,用於將現代 ES 代碼隱藏到普通舊版本的 ES5 JavaScript 中。
此工具由 Babeljs 團隊開發,是一款在線 Web 應用程序,它可以將 ES6+ 代碼轉碼到 ES5。
我們可以用它來測試ES 的近期更新和ECMA在某些階段添加的新功能。IT 能美化代碼、限制文件大小,並讓人在轉換期間享受時空之旅。
6. Bit.dev
Bit.dev是個很好的組件中心。筆者用它進行組裝、記錄和管理不同項目中的可重用構件,能提高代碼的重複利用度、加快開發進程並優化團隊協作。
對於重新構建設計系統,它也是不錯的替代品(因為它基本上滿足設計系統所需)。Bit.dev和Bit與完美協作,Bit是一個開源工具,用於分離併發布組件。
Bit.dev支持React,React withTypeScript,Angular,Vue等組件
7. Prettier Playground
Prettier是款穩定的JS代碼格式器。通過它來解析、再編輯代碼,代碼格式可以保持不變,實現最佳JS編碼實踐。
此工具在開發工作中受到廣泛使用,不僅如此它也提供了一個美化代碼的在線平臺。
8. JWT.io
如果你正在使用 JSON Web Tokens(JWT) 保護應用程序,或使用 JWT 讓用戶訪問後端上的受保護資源。
決定是否應訪問路由或資源的一種方法是檢查令牌的過期時間。有時會需要解碼 JWT 來查看其有效負載,jwt.io恰好提供這項服務。
此在線工具讓人能夠得到查看有效負載的權限。粘貼標記後,jwt.io解碼令牌,並顯示其有效負載。
9. Postman
此工具有助於快速測試 API端點:GET,POST,DELETE,OPTIONS,PUT.
筆者用過此工具,它值得排在第10位。
10. CanlUse
對於Web API(網絡應用程序接口) 在某個瀏覽器中能否兼容是否曾有疑惑,或在手機瀏覽器中是否可用?這個在線工具能幫助你輕鬆測試 Web API 瀏覽器的兼容性。
假設你想了解哪些瀏覽器及其版本支持 Web ShareAPI:
navigator.share(...)
可以看到,所有支持navigator.share(...)的瀏覽器及其版本都羅列出來了。
11. JSLint
在使用JSLint的人看來,JSLint在他們心中排第一。JSLint 的在線版本能夠對瀏覽器中的一段 JS 代碼或 JS 文件進行編譯。
結論
當然還有很多好用的工具未被列出來,這部分歡迎機智的大家在留言區補充喲~
我們一起分享AI學習與發展的乾貨
閱讀更多 讀芯術 的文章