今天跟你分享一些目前比較熱門新鮮度靠前的50款前端工具绞愚，希望對你有所幫助屑那。

一路捧、構(gòu)建工具

1箩退、 Parcel

地址：https://parceljs.org/

Parcel是一款極速零配置WEB應(yīng)用打包工具扯再，快速芍耘、幾乎零配置是它最大的特點，開箱即用叔收。相比webpack齿穗，Parcel對于新手來說未嘗不是一個很好的選擇。

2饺律、 Critters

地址：github.com

一款webpack的插件窃页，它可以很方便的配置內(nèi)聯(lián)關(guān)鍵css( critical CSS ),其余的css部分則會異步加載，由于它不使用無頭瀏覽器(headless browser)呈現(xiàn)內(nèi)容复濒，因此快速輕巧脖卖。

3、sucrase

地址：sucrase.io

如果你用typscript構(gòu)建React項目巧颈，sucrase將是一個不錯的選著畦木，它的編譯速度將是Babel的20倍。sucrase——一款ES6+編譯器砸泛，重點關(guān)注非標(biāo)準(zhǔn)語言十籍，例如Typescript，JSX和Flow唇礁。

4勾栗、Webpack Config Tool

地址：webpack.jakoblind.no

一款可視化的在線工具網(wǎng)站，你只需要選擇前端項目運用到技術(shù)和相關(guān)配置盏筐，就能一鍵幫你生成webpack.config.js围俘，省去你不少的麻煩。

5琢融、JSUI

地址：github.com/kitze/JSUI

JSUI 是一個可視化分類界牡、構(gòu)建和管理 JavaScript 項目的工具。不管是前端應(yīng)用還是后端應(yīng)用漾抬，也不論使用的是哪種框架宿亡，只要項目有一個 package.json ，即可進行管理奋蔚。

6她混、PWA Universal Builder

地址：pwa.cafe/

一款腳手架構(gòu)建工具烈钞，方便創(chuàng)建基于Preact泊碑，React坤按，Vue和Svelte的項目，開箱及支持Babel馒过，Bublé臭脓，Browserlist，TypeScript腹忽，PostCSS来累，ESLint，Prettier和Service Workers窘奏！

7嘹锁、VuePress

地址：vuepress.vuejs.org/

VuePress 由兩部分組成：第一部分是一個極簡靜態(tài)網(wǎng)站生成器，它包含由 Vue 驅(qū)動的主題系統(tǒng)和插件 API着裹，另一個部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題领猾，它的誕生初衷是為了支持 Vue 及其子項目的文檔需求。

每一個由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML骇扇，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）摔竿。同時，一旦頁面被加載少孝，Vue 將接管這些靜態(tài)內(nèi)容继低，并將其轉(zhuǎn)換成一個完整的單頁應(yīng)用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需加載稍走。

二袁翁、框架和庫

8、 PWA Starter Kit

地址：pwa-starter-kit.polymer-project.org/

通過功能豐富的WEB組件快速幫你構(gòu)建功能齊全的PWA網(wǎng)站項目婿脸，幾乎零配置粱胜，完成了構(gòu)建、測試和快速部署盖淡。

9年柠、PaperCSS

地址：www.getpapercss.com/

一個不太常規(guī)的CSS框架，如果你希望你的網(wǎng)站有手繪風(fēng)格感覺褪迟，選擇它準(zhǔn)沒錯冗恨。

10、boardgame.io

地址：boardgame.io/

BOARDGAME.IO是 Google 開源的一個游戲框架味赃，旨在允許游戲作者將游戲規(guī)則從本質(zhì)上轉(zhuǎn)化為一系列簡單的函數(shù)掀抹，這些函數(shù)用于描述當(dāng)一個指定動作發(fā)生時游戲的狀態(tài)變化，框架負(fù)責(zé)處理表述性狀態(tài)傳遞心俗。無需再手動編寫任何網(wǎng)絡(luò)或后端代碼傲武。功能特性：

狀態(tài)管理：自動跨瀏覽器、服務(wù)器和存儲器無縫管理游戲狀態(tài)揪利；

快速成型：在渲染游戲之前調(diào)試界面以模擬更改态兴。

多人游戲：所有連接到同一游戲的瀏覽器都實時同步，無需刷新疟位。

私密狀態(tài)：私密信息可從客戶端隱藏瞻润。

日志：游戲日志可查看任意時間的信息。

UI 工具包：常用于游戲中的 React 組件甜刻。

11绍撞、Stimulus

地址：stimulusjs.org

Stimulus是一個適度的前端框架，它并不試圖接管整個前端的方方面面得院，不關(guān)心如何渲染HTML傻铣，相反用來增強HTML的相關(guān)行為。如果你的團隊規(guī)模較小祥绞，但又想要和那些使用比較費力的主流方案的較大團隊競爭李命，那么這是一個比較適合的前端框架方案鲫寄。

12恨统、sapper

地址：sapper.svelte.technology/

Sapper是一個類似Next.js的框架娩践，具有極高的性能和內(nèi)存效率，具備代碼分割丧荐，服務(wù)端渲染的現(xiàn)代框架功能缆瓣，是一款軍工級別的框架。

13虹统、Reakit

地址：reakit.io/

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

14、Evergreen

地址：evergreen.segment.com/

更為強大的React UI 框架车荔，有一套非常標(biāo)準(zhǔn)的UI設(shè)計語言幫你構(gòu)建企業(yè)級的具有國際范設(shè)計風(fēng)格的WEB應(yīng)用渡冻，這個框架類似我們國內(nèi)的ant.design（https://ant.design/docs/spec/colors-cn）

三、HTML和CSS工具

15忧便、 keyframes.app

地址：keyframes.app

一款基于時間關(guān)鍵幀族吻，在線制作網(wǎng)頁動畫的網(wǎng)站，你無需在編輯器和瀏覽器直接互相切換珠增，及所見即所得超歌。keyframes.app提供在線制作和谷歌瀏覽器擴展插件兩種形式。制作完成后蒂教，你能很方便的將自動產(chǎn)生的CSS代碼復(fù)制到你的項目中巍举。

16、 Emotion

地址：emotion.sh/

Emotion是一款用JavaScript編寫css的庫凝垛，支持字符串和對象兩種方式聲明CSS變量懊悯，如果你在使用React蜓谋，試用這個庫將讓你以更加優(yōu)雅的方式用JavaScript編寫CSS。

17炭分、modern-normalize

地址：github.com

normalize.css可以讓瀏覽器以接近標(biāo)準(zhǔn)的方式一致地渲染所有元素桃焕，而且不同于cssrest，只針對需要正城分希化的元素覆旭。modern-normalize只針對現(xiàn)代瀏覽器退子，而且足夠現(xiàn)代岖妄，甚至IE和Edge都已經(jīng)放棄寂祥。

18荐虐、layerJS

地址：layerjs.org/

一款你只需要編寫HTML就能很輕松實現(xiàn)菜單、畫框丸凭、彈出層福扬、滾動視察、縮放惜犀、觸摸手勢等眾多效果的框架铛碑，這個框架代碼壓縮版只有30KB,很方便與各種前端框架集成(Angular,VueJS,React),支持響應(yīng)式和觸摸，并且不依賴任何庫就能實現(xiàn)虽界。

19汽烦、css-blocks

地址：css-blocks.com/

一款受 CSS Modules, BEM 和 Atomic CSS 框架啟發(fā)，為你的web應(yīng)用組件提供完美的CSS模塊方案莉御。

20撇吞、usebasin

地址：usebasin.com/

一款你只需要設(shè)計表單，無需編寫后端代碼礁叔，就能很方便的將表單應(yīng)用集成到你的項目里牍颈。

21、mustard

地址：mustard-ui.com/

一款適合初學(xué)者的CSS框架琅关，但是看起來還蠻不錯煮岁，模塊化，開源涣易，壓縮版只有6KB画机，支持FLEX,Grid布局和自帶一些漂亮UI,比如進度條，表單都毒、按鈕等色罚，雖然小，但功能齊全账劲。

四戳护、javascript工具

22金抡、ScrollHint

地址：appleple.github.io

一個JS庫，用于指示元素可以水平滾動腌且，并帶有指針圖標(biāo)梗肝，如果你在做一個新手引導(dǎo)，這個工具將會是一個不錯的選擇铺董。

23巫击、ToastUI editor

地址：github.com

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

支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標(biāo)準(zhǔn)

支持豐富的擴展插件精续，如顏色選擇器坝锰、圖表、UML重付、表格合并

提供了所見即所得與 Markdown 這兩種模式顷级，在編輯過程中可以隨時切換，非常方便确垫。在所見即所得模式下弓颈，可以直接從瀏覽器、 Excel删掀、PPT等復(fù)制文本翔冀，并且保留原來的格式

24、FilePond

地址：github.com

Filepond 是一個用于文件上傳的 JavaScript 庫披泪，可以上傳任何內(nèi)容纤子，優(yōu)化圖像以獲得更快的上傳速度，并提供一個出色的付呕，可訪問的计福，流暢的用戶體驗。

Filepond 提供了多種上傳方式：拖放徽职，復(fù)制和粘貼文件象颖，瀏覽文件系統(tǒng)或僅使用庫的API。gzip 壓縮后僅有 21KB 姆钉，并且內(nèi)置了圖像優(yōu)化和圖像自動調(diào)整功能说订。

Filepond 適用于 React ， Vue 潮瓶， Angular 和 jQuery 陶冷。

25、Dinero.js

地址：sarahdayan.github.io/dinero.js/

一個用來創(chuàng)建毯辅、計算和格式化貨幣價值的不可變的框架埂伦。

無論在銀行應(yīng)用程序、電子商務(wù)網(wǎng)站還是證券交易所平臺思恐，我們每天都在與金錢互動沾谜。我們也越來越依賴技術(shù)來處理問題膊毁。

然而，關(guān)于如何以編程處理貨幣價值尚無共識基跑。雖然金錢是現(xiàn)代社會中普遍存在的概念婚温，但相較于日期和時間之類的東西，它并不是任何主流語言中的一流數(shù)據(jù)類型媳否。結(jié)果栅螟，每一種軟件都有自己的處理方式，且伴隨著陷阱篱竭。

Dinero.js遵循Fowler的模式更多一點兒力图。它允許你在JavaScript中創(chuàng)建、計算和格式化貨幣值室抽。你可以進行數(shù)學(xué)運算搪哪、解析和格式化對象，使你的開發(fā)過程更加輕松坪圾。

該庫設(shè)計為不可變和可鏈接的模式。它支持全局設(shè)置惑朦，具有擴展格式選項兽泄，并提供本機國際化支持。

26漾月、Swup

地址：github.com/gmrchk/swup

一款適合初學(xué)者的框架病梢，方便靈活易用，讓你能快速制作專業(yè)級的頁面轉(zhuǎn)場動畫效果梁肿。

27蜓陌、Selection.js

地址：simonwep.github.io/selection/

簡單易用的可視化，支持鼠標(biāo)拖拽吩蔑、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇）钮热，大大節(jié)省了你的開發(fā)時間。只有3KB大小烛芬，不依賴jQuery隧期。

28、Glider.js

地址：nickpiscitelli.github.io/Glider.js/

一個超快速(25毫秒加載)赘娄，輕量級(小于3KB)仆潮，無依賴性(不需要jQuery)的制作幻燈效果的前端庫，支持響應(yīng)式遣臼，易于擴展性置，方便自定義事件等...，更多特性等待你的發(fā)現(xiàn)揍堰！

29鹏浅、ScrollOut

地址：scroll-out.github.io/

一款幫你制作專業(yè)級Scroll滾動效果（滾動視差）的框架辟灰，框架大小不到1KB,使用回調(diào)的方式將相關(guān)動畫元素的屬性進行實時分配，方便你做出個性化的動態(tài)效果篡石。

自己是從事了五年的前端工程師芥喇，不少人私下問我，2019年前端該怎么學(xué)凰萨，方法有沒有继控？

沒錯，年初我花了一個多月的時間整理出來的學(xué)習(xí)資料胖眷，希望能幫助那些想學(xué)習(xí)前端武通，卻又不知道怎么開始學(xué)習(xí)的朋友。

五珊搀、圖標(biāo)冶忱、圖表工具

30、Orion Icon Library

地址：orioniconlibrary.com/

多達6000專業(yè)免費的SVG矢量圖標(biāo)境析，還支持深度的定制囚枪，比如更換配色，更改線條粗細(xì)劳淆，變換圖標(biāo)風(fēng)格(細(xì)線條链沼、粗線條、扁平)沛鸵，一鍵生成相關(guān)代碼括勺。

31、Frappe Charts

地址：frappe.io/charts

一款簡單曲掰、專業(yè)疾捍、開源、現(xiàn)代風(fēng)格的SVG報表工具,不需要任何依賴庫栏妖，代碼風(fēng)格簡單乱豆，簡單易用。支持一鍵導(dǎo)出svg代碼底哥。

32咙鞍、SVGator

地址：www.svgator.com/

如果您希望將Web圖形提升到一個新的水平，那么動畫SVG就是您的選擇趾徽，而SVGator是您可以用來創(chuàng)建它們的最簡單的工具之一续滋。

一款專業(yè)級的SVG動畫制在線制作工具。SVGator還具有代碼管理器面板孵奶，因此您可以準(zhǔn)確地看到應(yīng)用程序生成的代碼疲酌。SVGator導(dǎo)出干凈，格式良好的代碼。

33朗恳、ApexCharts

地址：apexcharts.com/

ApexCharts.JS 是一個現(xiàn)代化 JavaScript 圖表庫湿颅，用于使用簡單的 API 構(gòu)建交互式圖表和可視化，功能十分強大粥诫。方便你將圖表嵌入到你的Vue油航、React項目中。

34怀浆、MapKit JS

地址：developer.apple.com

一款蘋果公司提供的地圖工具谊囚，如果想制作和蘋果官方網(wǎng)站一樣的地圖風(fēng)格，這個工具將是一個不錯的選擇执赡，允許你在地圖上添加交互事件镰踏，豐富你的地圖應(yīng)用。

35沙合、Img2

地址：github.com

一款圖片自動預(yù)加載和緩存工具奠伪，防止圖片閃爍，并使用模糊濾鏡預(yù)先顯示圖片延遲圖片加載首懈，提高網(wǎng)頁加載速度绊率，使用起來非常簡單，你只需要使用<img-2>替代<img/>標(biāo)簽即可猜拾，使用起來就是這么簡單即舌！

36、Lozad

地址：github.com

Lozad.js 是基于 IntersectionObserver API 的輕量級挎袜、高性能、可配置的純 JavaScript并且無依賴的懶加載器肥惭，其能夠被用于進行圖片盯仪、iframe 等多種形式的元素。

通過gzip壓縮過后蜜葱，僅僅1kb大小全景，相對于常用的jquery.lazyload.js來說，lozad.js實力碾壓牵囤，雖然jquery.lazyload.js也才幾kb大小爸黄。在github上，已經(jīng)收獲了4800+的star揭鳞。

React工具

37炕贵、RSUITE

地址：rsuitejs.com/

React Suite 是一套 React 組件庫，為后臺產(chǎn)品而生野崇。由 HYPERS 前端團隊與 UX 團隊打造称开，主要服務(wù)于公司大數(shù)據(jù)產(chǎn)品線。

經(jīng)歷了三次大的版本更新后，累積了大量的組件和豐富的功能鳖轰。并支持在線定制個性化主題清酥，更重要的是有中文版，方便我們學(xué)習(xí)使用蕴侣。

38焰轻、Pagedraw

地址：pagedraw.io/

一款神奇的在線UI設(shè)計制作工具，你只需要拖動和布局頁面昆雀，這個工具就會給你自動生成質(zhì)量高的React組件代碼辱志，更多功能等待你的發(fā)掘。

39忆肾、react-smooth-dnd

地址：github.com/kutlugsahin…

一款拖拽頁面元素的React工具荸频，拖拽效果平滑，讓你輕松就能實現(xiàn)卡片客冈、列表旭从、表單組件的的拖拽。

40场仲、Unstated

地址：unstated.io/

一個新的狀態(tài)管理類庫 unstated.js：簡單易用/合理和悦。和之前的 state 管理庫思路完全不同，這個unstated主打 local state（不是全局store渠缕，一個小改動導(dǎo)致整棵樹 rerender）鸽素，多個 local state 之間也可以共享， 兼具了redux的易用性與flux的合理性亦鳞，令人耳目一新馍忽；unstated完全就是為React設(shè)計的，“足夠React”燕差，讓你感覺不到在用第三方組件遭笋。

41、Reach Router

地址：reach.tech/router

Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發(fā)的一套基于 react 的路由控件. 那么已經(jīng)有比較成熟的 ReactRouter 了, 為什么要”再”做一套 Router 呢, 有興趣的同學(xué)可以去了解一下,小編認(rèn)為主要有以下幾個特點值得你看看：

小徒探，就4kb,壓縮后比react-router小40kb左右瓦呼。

更少的配置

更好用

基本一樣的api,學(xué)習(xí)成本非常低

源碼非常簡潔，總共就3個文件测暗，900行央串，如果你想深入理解單頁應(yīng)用的路由是怎么實現(xiàn)的，reach-router,絕對是絕佳的下手資料

42碗啄、SVGR

地址：www.smooth-code.com/

svgr是一個將SVG轉(zhuǎn)換為React組件的工具质和，svgr由JavaScript實現(xiàn)。整個文檔也非常的小挫掏，已開源在github上侦另。

43、React Spreadsheet Grid

地址：github.com/

用于React類似于Excel的網(wǎng)格組件，具有自定義單元格編輯器褒傅，高性能滾動和可調(diào)整大小的列弃锐。

測試和數(shù)據(jù)工具

44、webhint

地址：webhint.io/

Webhint項目提供了一種用于檢查代碼的可訪問性殿托、性能和安全的開源檢查（Linting）工具霹菊。在創(chuàng)建Web站點和應(yīng)用中，有越來越多的細(xì)節(jié)問題亟待完善支竹。為此旋廷，Webhint力圖幫助開發(fā)人員標(biāo)記這些細(xì)節(jié)。

Webhint以命令行接口（CLI）工具和在線掃描器兩種形式提供礼搁，使用在線掃描器是最快的上手方式饶碘。使用在線掃描器需要為其提供一個公開的URL，用于運行報告并洞悉應(yīng)用的運行情況馒吴。

在測試應(yīng)用時扎运，Webhint提供三種運行環(huán)境：jsdom、Chrome和Edge饮戳。后兩種運行環(huán)境使用了Chrome DevTools協(xié)議豪治，第一種運行環(huán)境使用Node.js環(huán)境快速地執(zhí)行有限次數(shù)的檢查，無需瀏覽器的支持扯罐。

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

45歹河、Airtap

地址：github.com/airtap/airt…

Airtap 是一種在瀏覽器中測試 JavaScript 的簡單方法掩浙，號稱能覆蓋800多種瀏覽器，能夠在數(shù)秒內(nèi)開始在本地測試你的代碼秸歧，并無縫轉(zhuǎn)移到由 Sauce Labs 提供的基于云的瀏覽器上涣脚，以獲得更好的覆蓋測試。

Airtap 與其他跨瀏覽器測試運行器的不同之處在于其簡單性寥茫，以及能夠在許多瀏覽器中輕松運行測試套件而無需在本地安裝它們。它可以讓你在開發(fā)過程中快速迭代矾麻，并在發(fā)布前提供良好的瀏覽器覆蓋率纱耻，而不用擔(dān)心缺少瀏覽器支持。

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

46、mkcert

地址：github.com/FiloSottile…

HTTPS 是 Web 發(fā)展的趨勢甩牺，用于提高網(wǎng)站的安全性蘑志。使用 HTTPS 需要配置 TLS 證書，得益于 ACME 協(xié)議和 Let's Encrypt 證書，遠程環(huán)境可以很容易部署急但。但是對于本地環(huán)境澎媒，還沒有普遍有效的證書。

mkcert 被設(shè)計的足夠簡單波桩，隱藏了幾乎所有生成 TLS 證書所必須的知識戒努。它適用于任何主機名或者 IP，包括 localhost 镐躲，因為它只在你的本地環(huán)境使用储玫。

證書是由你的私有 CA 簽發(fā)，當(dāng)你運行 mkcert-install 會自動配置這些信任萤皂，因此撒穷，當(dāng)瀏覽器訪問時，就會顯示安全標(biāo)識裆熙。目前支持 MacOS端礼、Linux 和 Windows，以及 Firefox弛车、Chrome 和 Java齐媒。甚至支持一些手機設(shè)備。

47纷跛、Puppeteer Recorder

地址：checklyhq.com/docs/puppet…

Puppeteer 是一個Node庫喻括，它提供了一個高級API來控制DevTools協(xié)議上的Chrome或Chromium，常用于爬蟲贫奠、自動化測試等唬血，你在瀏覽器手動完成的大多數(shù)事情都可以使用它來完成。

48唤崭、jsonstore.io

地址：www.jsonstore.io/

jsonstore.io為小型項目提供免費拷恨，安全且基于JSON的云數(shù)據(jù)存儲。只需輸入https://www.jsonstore.io/谢肾，復(fù)制URL就可以開始發(fā)送HTTP數(shù)據(jù)請求腕侄。POST請求將保存數(shù)據(jù)，PUT請求修改數(shù)據(jù)芦疏，DELETE請求刪除數(shù)據(jù)和GET請求檢索數(shù)據(jù)冕杠。大大方便了前端開發(fā)人員進行測試接口的集成，前端頁面制作完成就能進行接口測試酸茴，使用起來就是這么簡單分预。

49、Initab

地址：initab.com/

一款為開發(fā)人員定制打造的工作臺薪捍，通過谷歌瀏覽器插件安裝即可使用笼痹，通過此工作臺你可以輕松訂閱你感興趣的git項目配喳、跟進相關(guān)問題、pull相關(guān)操作凳干，查看版本歷史晴裹，訂閱Stack Overflow相關(guān)的內(nèi)容，管理查看Gists相關(guān)內(nèi)容纺座，可以說一個主流技術(shù)平臺聚合工作臺息拜。

50、lambdatest

地址：www.lambdatest.com/

一款在線自動化測試云端平臺净响，號稱在2000多個真實瀏覽器和設(shè)備進行測試少欺，可以根據(jù)你的測試需求進行深度定制，并形成相關(guān)記錄馋贤，方便團隊的協(xié)作赞别，幫你發(fā)現(xiàn)跨平臺不同瀏覽器版本的各種問題。