這50款前端熱門工具簡直不要太好用了！（3）

上兩篇介紹了構建、框架和庫、CSS和HTML、JavaScript相關的工具，這篇文章小編將介紹剩餘21款工具，希望在新的一年裡對大家有所幫助。

圖示、圖表工具

30、Orion Icon Library

orioniconlibrary.com/

多達6000專業免費的SVG向量圖示，還支援深度的定製，比如更換配色，更改線條粗細，變換圖示風格(細線條、粗線條、扁平)，一鍵生成相關程式碼。

31、Frappe Charts

frappe.io/charts

一款簡單、專業、開源、現代風格的SVG報表工具,不需要任何依賴庫，程式碼風格簡單，簡單易用。支援一鍵匯出svg程式碼。

32、SVGator

www.svgator.com/

如果您希望將Web圖形提升到一個新的水平，那麼動畫SVG就是您的選擇，而SVGator是您可以用來建立它們的最簡單的工具之一。一款專業級的SVG動畫制線上製作工具。SVGator還具有程式碼管理器皮膚，因此您可以準確地看到應用程式生成的程式碼。SVGator匯出乾淨，格式良好的程式碼。

33、ApexCharts

apexcharts.com/

ApexCharts.JS 是一個現代化 JavaScript 圖表庫，用於使用簡單的 API 構建互動式圖表和視覺化，功能十分強大。方便你將圖表嵌入到你的Vue、React專案中。

34、MapKit JS

developer.apple.com/maps/mapkit…

一款蘋果公司提供的地圖工具，如果想製作和蘋果官方網站一樣的地圖風格，這個工具將是一個不錯的選擇，允許你在地圖上新增互動事件，豐富你的地圖應用。

35、Img2

github.com/RevillWeb/i…

一款圖片自動預載入和快取工具，防止圖片閃爍，並使用模糊濾鏡預先顯示圖片延遲圖片載入，提高網頁載入速度，使用起來非常簡單，你只需要使用<img-2>替代<img/>標籤即可，使用起來就是這麼簡單！

36、Lozad

github.com/ApoorvSaxen…

Lozad.js 是基於 IntersectionObserver API 的輕量級、高效能、可配置的純 JavaScript並且無依賴的懶載入器，其能夠被用於進行圖片、iframe 等多種形式的元素。通過gzip壓縮過後，僅僅1kb大小，相對於常用的jquery.lazyload.js來說，lozad.js實力碾壓，雖然jquery.lazyload.js也才幾kb大小。在github上，已經收穫了4800+的star。

React工具

37、RSUITE

rsuitejs.com/

React Suite 是一套 React 元件庫，為後臺產品而生。由 HYPERS 前端團隊與 UX 團隊打造，主要服務於公司大資料產品線。經歷了三次大的版本更新後，累積了大量的元件和豐富的功能。並支援線上定製個性化主題，更重要的是有中文版，方便我們學習使用。

38、Pagedraw

pagedraw.io/

一款神奇的線上UI設計製作工具，你只需要拖動和佈局頁面，這個工具就會給你自動生成質量高的React元件程式碼，更多功能等待你的發掘。

39、react-smooth-dnd

github.com/kutlugsahin…

一款拖拽頁面元素的React工具，拖拽效果平滑，讓你輕鬆就能實現卡片、列表、表單元件的的拖拽。

40、Unstated

unstated.io/

一個新的狀態管理類庫 unstated.js：簡單易用/合理。和之前的 state 管理庫思路完全不同，這個unstated主打 local state（不是全域性store，一個小改動導致整棵樹 rerender），多個 local state 之間也可以共享， 兼具了redux的易用性與flux的合理性，令人耳目一新；unstated完全就是為React設計的，“足夠React”，讓你感覺不到在用第三方元件。

41、Reach Router

reach.tech/router

Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發的一套基於 react 的路由控制元件. 那麼已經有比較成熟的 ReactRouter 了, 為什麼要”再”做一套 Router 呢, 有興趣的同學可以去了解一下,小編認為主要有以下幾個特點值得你看看：

• 小，就4kb,壓縮後比react-router小40kb左右。
• 更少的配置
• 更好用
• 基本一樣的api,學習成本非常低
• 原始碼非常簡潔，總共就3個檔案，900行，如果你想深入理解單頁應用的路由是怎麼實現的，reach-router,絕對是絕佳的下手資料

42、SVGR

www.smooth-code.com/open-source…

svgr是一個將SVG轉換為React元件的工具，svgr由JavaScript實現。整個文件也非常的小，已開源在github上。

43、React Spreadsheet Grid

github.com/denisraslov…

用於React類似於Excel的網格元件，具有自定義單元格編輯器，高效能滾動和可調整大小的列。

測試和資料工具

44、webhint

webhint.io/

Webhint專案提供了一種用於檢查程式碼的可訪問性、效能和安全的開源檢查（Linting）工具。在建立Web站點和應用中，有越來越多的細節問題亟待完善。為此，Webhint力圖幫助開發人員標記這些細節。

Webhint以命令列介面（CLI）工具和線上掃描器兩種形式提供，使用線上掃描器是最快的上手方式。使用線上掃描器需要為其提供一個公開的URL，用於執行報告並洞悉應用的執行情況。

在測試應用時，Webhint提供三種執行環境：jsdom、Chrome和Edge。後兩種執行環境使用了Chrome DevTools協議，第一種執行環境使用Node.js環境快速地執行有限次數的檢查，無需瀏覽器的支援。

還有更多強大的功能，還有待你試用挖掘。

45、Airtap

github.com/airtap/airt…

Airtap 是一種在瀏覽器中測試 JavaScript 的簡單方法，號稱能覆蓋800多種瀏覽器，能夠在數秒內開始在本地測試你的程式碼，並無縫轉移到由 Sauce Labs 提供的基於雲的瀏覽器上，以獲得更好的覆蓋測試。

Airtap 與其他跨瀏覽器測試執行器的不同之處在於其簡單性，以及能夠在許多瀏覽器中輕鬆執行測試套件而無需在本地安裝它們。它可以讓你在開發過程中快速迭代，並在釋出前提供良好的瀏覽器覆蓋率，而不用擔心缺少瀏覽器支援。

不要只是聲稱你的 JavaScript 支援“所有瀏覽器”，用測試證明它！

46、mkcert

github.com/FiloSottile…

HTTPS 是 Web 發展的趨勢，用於提高網站的安全性。使用 HTTPS 需要配置 TLS 證照，得益於 ACME 協議和 Let's Encrypt 證照，遠端環境可以很容易部署。但是對於本地環境，還沒有普遍有效的證照。

mkcert 被設計的足夠簡單，隱藏了幾乎所有生成 TLS 證照所必須的知識。它適用於任何主機名或者 IP，包括 localhost ，因為它只在你的本地環境使用。

證照是由你的私有 CA 簽發，當你執行 mkcert-install 會自動配置這些信任，因此，當瀏覽器訪問時，就會顯示安全標識。目前支援 MacOS、Linux 和 Windows，以及 Firefox、Chrome 和 Java。甚至支援一些手機裝置。

47、Puppeteer Recorder

checklyhq.com/docs/puppet…

Puppeteer 是一個Node庫，它提供了一個高階API來控制DevTools協議上的Chrome或Chromium，常用於爬蟲、自動化測試等，你在瀏覽器手動完成的大多數事情都可以使用它來完成。

48、jsonstore.io

www.jsonstore.io/

jsonstore.io 為小型專案提供免費，安全且基於JSON的雲資料儲存。只需輸入 https://www.jsonstore.io/ ，複製URL就可以開始傳送HTTP資料請求。POST請求將儲存資料，PUT請求修改資料，DELETE請求刪除資料和GET請求檢索資料。大大方便了前端開發人員進行測試介面的整合，前端頁面製作完成就能進行介面測試，使用起來就是這麼簡單。

49、Initab

initab.com/

一款為開發人員定製打造的工作臺，通過谷歌瀏覽器外掛安裝即可使用，通過此工作臺你可以輕鬆訂閱你感興趣的git專案、跟進相關問題、pull相關操作，檢視版本歷史，訂閱Stack Overflow相關的內容，管理檢視Gists相關內容，可以說一個主流技術平臺聚合工作臺。

50、lambdatest

www.lambdatest.com/

一款線上自動化測試雲端平臺，號稱在2000多個真實瀏覽器和裝置進行測試，可以根據你的測試需求進行深度定製，並形成相關記錄，方便團隊的協作，幫你發現跨平臺不同瀏覽器版本的各種問題。

最後

希望這些工具對大家有所幫助和啟發，祝各位在新的一年裡前端技術棒棒的，薪資翻翻，一起在國內推動大前端的未來！

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助你快速學習前端，拿高薪offer！

如果你依然在程式設計的世界裡迷茫，不知道自己的未來規劃，可以加入web前端學習交流群：731771211 裡面可以與大神一起交流並走出迷茫。新手可進群免費領取學習資料，看看前輩們是如何在程式設計的世界裡傲然前行！群裡不停更新最新的教程和學習方法（進群送web前端系統學習路線，詳細的前端專案實戰教學視訊），有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入

點選： 加入

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2636151/，如需轉載，請註明出處，否則將追究法律責任。