【收藏】50個值得收藏的工具和庫

時間 2019-11-05

標籤收藏值得工具简体版

原文原文鏈接

原文：www.lishuaishuai.com/tools/1203.…javascript

1、構建工具

一、 Parcel

parceljs.org/css

Parcel是一款極速零配置WEB應用打包工具，快速、幾乎零配置是它最大的特色，開箱即用。相比webpack，Parcel對於新手來講何嘗不是一個很好的選擇。html

二、 Critters

github.com/GoogleChrom…前端

一款webpack的插件，它能夠很方便的配置內聯關鍵css( critical CSS ),其他的css部分則會異步加載，因爲它不使用無頭瀏覽器(headless browser)呈現內容，所以快速輕巧。vue

三、sucrase

sucrase.io/java

若是你用typscript構建React項目，sucrase將是一個不錯的選着，它的編譯速度將是Babel的20倍。sucrase——一款ES6+編譯器，重點關注非標準語言，例如Typescript，JSX和Flow。react

四、Webpack Config Tool

createapp.dev/jquery

一款可視化的在線工具網站，你只須要選擇前端項目運用到技術和相關配置，就能一鍵幫你生成webpack.config.js，省去你很多的麻煩。webpack

五、JSUI

github.com/kitze/JSUIgit

JSUI 是一個可視化分類、構建和管理 JavaScript 項目的工具。無論是前端應用仍是後端應用，也不論使用的是哪一種框架，只要項目有一個 package.json ，便可進行管理。

六、PWA Universal Builder

pwa.cafe/

一款腳手架構建工具，方便建立基於Preact，React，Vue和Svelte的項目，開箱及支持Babel，Bublé，Browserlist，TypeScript，PostCSS，ESLint，Prettier和Service Workers！

七、VuePress

vuepress.vuejs.org

VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器，它包含由 Vue 驅動的主題系統和插件 API，另外一個部分是爲書寫技術文檔而優化的默認主題，它的誕生初衷是爲了支持 Vue 及其子項目的文檔需求。

每個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也所以具備很是好的加載性能和搜索引擎優化（SEO）。同時，一旦頁面被加載，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其餘的頁面則會只在用戶瀏覽到的時候才按需加載。

2、框架和庫

八、 PWA Starter Kit

pwa-starter-kit.polymer-project.org/

經過功能豐富的WEB組件快速幫你構建功能齊全的PWA網站項目，幾乎零配置，完成了構建、測試和快速部署。

九、PaperCSS

www.getpapercss.com/

一個不太常規的CSS框架，若是你但願你的網站有手繪風格感受，選擇它準沒錯。

十、boardgame.io

boardgame.io/

BOARDGAME.IO是 Google 開源的一個遊戲框架，旨在容許遊戲做者將遊戲規則從本質上轉化爲一系列簡單的函數，這些函數用於描述當一個指定動做發生時遊戲的狀態變化，框架負責處理表述性狀態傳遞。無需再手動編寫任何網絡或後端代碼。功能特性：

狀態管理：自動跨瀏覽器、服務器和存儲器無縫管理遊戲狀態；

快速成型：在渲染遊戲以前調試界面以模擬更改。

多人遊戲：全部鏈接到同一遊戲的瀏覽器都實時同步，無需刷新。

私密狀態：私密信息可從客戶端隱藏。

日誌：遊戲日誌可查看任意時間的信息。

UI 工具包：經常使用於遊戲中的 React 組件。

十一、Stimulus

stimulusjs.org

Stimulus是一個適度的前端框架，它並不試圖接管整個前端的方方面面，不關心如何渲染HTML，相反用來加強HTML的相關行爲。若是你的團隊規模較小，但又想要和那些使用比較費力的主流方案的較大團隊競爭，那麼這是一個比較適合的前端框架方案。

十二、sapper

sapper.svelte.technology/

Sapper是一個相似Next.js的框架，具備極高的性能和內存效率，具有代碼分割，服務端渲染的現代框架功能，是一款軍工級別的框架。

1三、Reakit

reakit.io/

使用這個框架能讓你快速搭建漂亮的React UI 交互站點。

1四、Evergreen

evergreen.segment.com/

更爲強大的React UI 框架，有一套很是標準的UI設計語言幫你構建企業級的具備國際範設計風格的WEB應用，這個框架相似咱們國內的ant.design（ant.design/docs/spec/c…

3、HTML和CSS工具

1五、 keyframes.app

keyframes.app

一款基於時間關鍵幀，在線製做網頁動畫的網站，你無需在編輯器和瀏覽器直接互相切換，及所見即所得。keyframes.app提供在線製做和谷歌瀏覽器擴展插件兩種形式。製做完成後，你能很方便的將自動產生的CSS代碼複製到你的項目中。

1六、 Emotion

emotion.sh/

Emotion是一款用JavaScript編寫css的庫，支持字符串和對象兩種方式聲明CSS變量，若是你在使用React，試用這個庫將讓你以更加優雅的方式用JavaScript編寫CSS。

1七、modern-normalize

github.com

normalize.css可讓瀏覽器以接近標準的方式一致地渲染全部元素，並且不一樣於cssrest，只針對須要正常化的元素。modern-normalize只針對現代瀏覽器，並且足夠現代，甚至IE和Edge都已經放棄。

1八、layerJS

layerjs.org/

一款你只須要編寫HTML就能很輕鬆實現菜單、畫框、彈出層、滾動視察、縮放、觸摸手勢等衆多效果的框架，這個框架代碼壓縮版只有30KB,很方便與各類前端框架集成(Angular,VueJS,React),支持響應式和觸摸，而且不依賴任何庫就能實現。

1九、css-blocks

css-blocks.com/

一款受 CSS Modules, BEM 和 Atomic CSS 框架啓發，爲你的web應用組件提供完美的CSS模塊方案。

20、usebasin

usebasin.com/

一款你只須要設計表單，無需編寫後端代碼，就能很方便的將表單應用集成到你的項目裏。

2一、mustard

mustard-ui.com/

一款適合初學者的CSS框架，可是看起來還蠻不錯，模塊化，開源，壓縮版只有6KB，支持FLEX,Grid佈局和自帶一些漂亮UI,好比進度條，表單、按鈕等，雖然小，但功能齊全。

4、javascript工具

2二、ScrollHint

appleple.github.io

一個JS庫，用於指示元素能夠水平滾動，並帶有指針圖標，若是你在作一個新手引導，這個工具將會是一個不錯的選擇。

2三、ToastUI editor

github.com

強大的Markdown編輯器tui.editor,方便集成到你的項目裏，這款強大的富媒體編輯器有如下特色：

支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標準

支持豐富的擴展插件，如顏色選擇器、圖表、UML、表格合併

提供了所見即所得與 Markdown 這兩種模式，在編輯過程當中能夠隨時切換，很是方便。在所見即所得模式下，能夠直接從瀏覽器、 Excel、PPT等複製文本，而且保留原來的格式

2四、FilePond

github.com

Filepond 是一個用於文件上傳的 JavaScript 庫，能夠上傳任何內容，優化圖像以得到更快的上傳速度，並提供一個出色的，可訪問的，流暢的用戶體驗。

Filepond 提供了多種上傳方式：拖放，複製和粘貼文件，瀏覽文件系統或僅使用庫的API。 gzip 壓縮後僅有 21KB ，而且內置了圖像優化和圖像自動調整功能。

Filepond 適用於 React ， Vue ， Angular 和 jQuery 。

2五、Dinero.js

sarahdayan.github.io/dinero.js/

一個用來建立、計算和格式化貨幣價值的不可變的框架。

不管在銀行應用程序、電子商務網站仍是證券交易所平臺，咱們天天都在與金錢互動。咱們也愈來愈依賴技術來處理問題。

然而，關於如何以編程處理貨幣價值尚無共識。雖然金錢是現代社會中廣泛存在的概念，但相較於日期和時間之類的東西，它並非任何主流語言中的一流數據類型。結果，每一種軟件都有本身的處理方式，且伴隨着陷阱。

Dinero.js遵循Fowler的模式更多一點兒。它容許你在JavaScript中建立、計算和格式化貨幣值。你能夠進行數學運算、解析和格式化對象，使你的開發過程更加輕鬆。

該庫設計爲不可變和可連接的模式。它支持全局設置，具備擴展格式選項，並提供本機國際化支持。

2六、Swup

github.com/gmrchk/swup

一款適合初學者的框架，方便靈活易用，讓你能快速製做專業級的頁面轉場動畫效果。

2七、Selection.js

simonwep.github.io/selection/

簡單易用的可視化，支持鼠標拖拽、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇），大大節省了你的開發時間。只有3KB大小，不依賴jQuery。

2八、Glider.js

nickpiscitelli.github.io/Glider.js/

一個超快速(25毫秒加載)，輕量級(小於3KB)，無依賴性(不須要jQuery)的製做幻燈效果的前端庫，支持響應式，易於擴展，方便自定義事件等...，更多特性等待你的發現！

2九、ScrollOut

scroll-out.github.io/

一款幫你製做專業級Scroll滾動效果（滾動視差）的框架，框架大小不到1KB,使用回調的方式將相關動畫元素的屬性進行實時分配，方便你作出個性化的動態效果。

本身是從事了五年的前端工程師，很多人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，但願能幫助那些想學習前端，卻又不知道怎麼開始學習的朋友。

5、圖標、圖表工具

30、Orion Icon Library

orioniconlibrary.com/

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

3一、Frappe Charts

frappe.io/charts

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

3二、SVGator

www.svgator.com/

若是您但願將Web圖形提高到一個新的水平，那麼動畫SVG就是您的選擇，而SVGator是您能夠用來建立它們的最簡單的工具之一。

一款專業級的SVG動畫制在線製做工具。SVGator還具備代碼管理器面板，所以您能夠準確地看到應用程序生成的代碼。SVGator導出乾淨，格式良好的代碼。

3三、ApexCharts

apexcharts.com/

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

3四、MapKit JS

developer.apple.com

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

3五、Img2

github.com

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

3六、Lozad

github.com

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/

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

4三、React Spreadsheet Grid

github.com/

用於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請求檢索數據。大大方便了前端開發人員進行測試接口的集成，前端頁面製做完成就能進行接口測試，使用起來就是這麼簡單。