你值得擁有的 11 個(gè)前端開發(fā)利器-魔扣目錄

你值得擁有的 11 個(gè)前端開發(fā)利器

作者 | Chidume Nnamdi

譯者 | 孫薇，責(zé)編 | 伍杏玲

頭圖 | CSDN 下載自視覺中國

出品 | CSDN（ID：CSDNnews）

以下為譯文：

筆者將在本文中分享自己在開發(fā)生涯中常用的11種前端工具。

1.CanIUse

地址：https://caniuse.com/

有時(shí)候不太確定某個(gè)Web API與瀏覽器、手機(jī)瀏覽器能否兼容？這個(gè)工具讓你輕松測試Web API與瀏覽器的兼容情況。

當(dāng)我們想要了解哪些瀏覽器及相應(yīng)版本支持Web Share API：navigator.share(...)

在工具里簡單查詢便可查看結(jié)果。如圖，列出了所有支持navigator.share(...)的瀏覽器及相應(yīng)版本。

2.Minify

地址：http://minify.com/

我們使用這個(gè)工具讓即將發(fā)布到生產(chǎn)環(huán)境中的應(yīng)用代碼包縮減至最小，通過刪減空格、無效代碼等操作，使得應(yīng)用包顯著縮小，從而令瀏覽器的加載時(shí)間縮短。

這款在線工具minify.com支持壓縮Web應(yīng)用。

3.Bit.dev

地址：https://bit.dev/

Bit.dev可用來托管、記錄、管理來自不同項(xiàng)目的可復(fù)用組件。對(duì)于增加代碼重用、加速開發(fā)和優(yōu)化團(tuán)隊(duì)協(xié)作極其有效。

這也是我們從頭構(gòu)建設(shè)計(jì)系統(tǒng)的好選擇，因?yàn)樗哂性O(shè)計(jì)系統(tǒng)所需的一切。Bit.dev可以與Bit這款處理組件隔離和發(fā)布的開源工具完美匹配。

Bit.dev支持React、React、TypeScript、Angular、Vue等許多庫。

上圖展示了在Bit.dev中搜索共享React組件的過程。

4.Unminify

地址：https://unminify.com/

這款工具可以逆轉(zhuǎn)壓縮操作，支持對(duì)JS、css及html代碼的反壓縮。通過解壓縮、反混淆及美化，可以讓一段壓縮后的JS代碼再次變?yōu)榭勺x的。

5.Stackblitz

地址：https://stackblitz.com/

這款工具適合所有人，Stackblitz讓我們可以在Web上使用Visual Studio Code。

只需點(diǎn)擊一下，Stackblitz即可快速支持Angular、React、Vue、Vanilla、RxJS、TypeScript項(xiàng)目。

當(dāng)你想用瀏覽器嘗試執(zhí)行一段代碼，或是任何操作當(dāng)前JS框架的某個(gè)功能時(shí)，Stackblitz就會(huì)大顯身手。假如你正在閱讀一篇Angular文章，想要嘗試其中的代碼，就可以最小化瀏覽器并快速搭建一個(gè)新的Angular項(xiàng)目了，非常快速簡便。

6.JWT.io

地址：https://jwt.io/

使用JSON網(wǎng)絡(luò)令牌（JWT）來保障應(yīng)用安全性，或是用JWT來支持用戶訪問后端受保護(hù)資源的情況下，決定是否應(yīng)當(dāng)訪問路徑或資源的方法之一是檢查令牌的到期時(shí)間。有時(shí)候，我們希望解碼某個(gè)JWT以查看其有效負(fù)載，就可以使用jwt.io。

這款在線工具支持上傳token令牌，來查看有效負(fù)載。可以采用粘貼，jwt.io就會(huì)對(duì)令牌進(jìn)行解碼，并顯示其有效負(fù)載。

7.BundlePhobia

地址：https://bundlephobia.com/

當(dāng)我們不確定node_modules的大小，或想要確認(rèn)某個(gè)即將安裝在機(jī)器上pakckage.json的大小時(shí)，就可以使用BundlePhobia，它讓我們可以了解某個(gè)npm包添加到前端軟件包后對(duì)系統(tǒng)性能的影響。

這款工具可上傳單個(gè)package.json文件，并展示從package.json所安裝的依賴項(xiàng)大小。

8.Babel REPL

地址：https://babeljs.io/en/repl

Babel是一個(gè)免費(fèi)的開源JS轉(zhuǎn)編譯器，可將ES6+代碼轉(zhuǎn)為舊的ES5 JS代碼，由Bebeljs團(tuán)隊(duì)開發(fā)。這款工具允許嘗試添加到ES的內(nèi)容，或者某些特定階段添加到ECMA的內(nèi)容，還可美化代碼、限制文件大小，讓使用者在轉(zhuǎn)編譯的過程中嘗試不同的版本。