19年你應該關注這50款前端熱門工具（下）

時間 2019-11-16

標籤 19年應該關注前端熱門工具简体版

原文原文鏈接

上兩篇文章《19年你應該關注這50款前端熱門工具（上）》、《19年你應該關注這50款前端熱門工具（中）》文章小編介紹了構建、框架和庫、CSS和HTML、JavaScript相關的工具，這篇文章小編將介紹剩餘21款工具，但願在新的一年裏對你們有所幫助。前端

圖標、圖表工具

30、Orion Icon Library

orioniconlibrary.com/react

多達6000專業免費的SVG矢量圖標，還支持深度的定製，好比更換配色，更改線條粗細，變換圖標風格(細線條、粗線條、扁平)，一鍵生成相關代碼。jquery

3一、Frappe Charts

frappe.io/chartsgit

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

3二、SVGator

www.svgator.com/web

若是您但願將Web圖形提高到一個新的水平，那麼動畫SVG就是您的選擇，而SVGator是您能夠用來建立它們的最簡單的工具之一。一款專業級的SVG動畫制在線製做工具。SVGator還具備代碼管理器面板，所以您能夠準確地看到應用程序生成的代碼。SVGator導出乾淨，格式良好的代碼。json

3三、ApexCharts

apexcharts.com/redux

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

3四、MapKit JS

developer.apple.com/maps/mapkit…瀏覽器

一款蘋果公司提供的地圖工具，若是想製做和蘋果官方網站同樣的地圖風格，這個工具將是一個不錯的選擇，容許你在地圖上添加交互事件，豐富你的地圖應用。

3五、Img2

github.com/RevillWeb/i…

一款圖片自動預加載和緩存工具，防止圖片閃爍，並使用模糊濾鏡預先顯示圖片延遲圖片加載，提升網頁加載速度，使用起來很是簡單，你只須要使用<img-2>替代<img/>標籤便可，使用起來就是這麼簡單！

3六、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工具

3七、RSUITE

rsuitejs.com/

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

3八、Pagedraw

pagedraw.io/

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

3九、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」，讓你感受不到在用第三方組件。

4一、Reach Router

reach.tech/router

Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發的一套基於 react 的路由控件. 那麼已經有比較成熟的 ReactRouter 了, 爲何要」再」作一套 Router 呢, 有興趣的同窗能夠去了解一下,小編認爲主要有如下幾個特色值得你看看：

小，就4kb,壓縮後比react-router小40kb左右。
更少的配置
更好用
基本同樣的api,學習成本很是低
源碼很是簡潔，總共就3個文件，900行，若是你想深刻理解單頁應用的路由是怎麼實現的，reach-router,絕對是絕佳的下手資料

4二、SVGR

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

svgr是一個將SVG轉換爲React組件的工具，svgr由JavaScript實現。整個文檔也很是的小，已開源在github上。

4三、React Spreadsheet Grid

github.com/denisraslov…

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

測試和數據工具

4四、webhint

webhint.io/

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

Webhint以命令行接口（CLI）工具和在線掃描器兩種形式提供，使用在線掃描器是最快的上手方式。使用在線掃描器須要爲其提供一個公開的URL，用於運行報告並洞悉應用的運行狀況。

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

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

4五、Airtap

github.com/airtap/airt…

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

Airtap 與其餘跨瀏覽器測試運行器的不一樣之處在於其簡單性，以及可以在許多瀏覽器中輕鬆運行測試套件而無需在本地安裝它們。它可讓你在開發過程當中快速迭代，並在發佈前提供良好的瀏覽器覆蓋率，而不用擔憂缺乏瀏覽器支持。

不要只是聲稱你的 JavaScript 支持「全部瀏覽器」，用測試證實它！

4六、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。甚至支持一些手機設備。

4七、Puppeteer Recorder

checklyhq.com/docs/puppet…

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

4八、jsonstore.io

www.jsonstore.io/

jsonstore.io爲小型項目提供免費，安全且基於JSON的雲數據存儲。只需輸入https://www.jsonstore.io/，複製URL就能夠開始發送HTTP數據請求。POST請求將保存數據，PUT請求修改數據，DELETE請求刪除數據和GET請求檢索數據。大大方便了前端開發人員進行測試接口的集成，前端頁面製做完成就能進行接口測試，使用起來就是這麼簡單。