19年暂雹，又是新的一年，“前端屆”创夜，又出了哪些新的“玩意”杭跪，今天向你推薦目前比較熱門新鮮度靠前的50款前端工具，希望在新的一年里，對(duì)你有所幫助涧尿。
https://parceljs.org/
Parcel是一款極速零配置WEB應(yīng)用打包工具现斋，快速、幾乎零配置是它最大的特點(diǎn)偎蘸，開箱即用庄蹋。相比webpack，Parcel對(duì)于新手來說未嘗不是一個(gè)很好的選擇迷雪。
github.com
一款webpack的插件，它可以很方便的配置內(nèi)聯(lián)關(guān)鍵css( critical CSS ),其余的css部分則會(huì)異步加載章咧，由于它不使用無頭瀏覽器(headless browser)呈現(xiàn)內(nèi)容倦西，因此快速輕巧。
sucrase.io/ 如果你用typscript構(gòu)建React項(xiàng)目扰柠，sucrase將是一個(gè)不錯(cuò)的選著，它的編譯速度將是Babel的20倍疼约。sucrase——一款ES6+編譯器卤档，重點(diǎn)關(guān)注非標(biāo)準(zhǔn)語言，例如Typescript程剥，JSX和Flow劝枣。
webpack.jakoblind.no/
一款可視化的在線工具網(wǎng)站织鲸，你只需要選擇前端項(xiàng)目運(yùn)用到技術(shù)和相關(guān)配置舔腾，就能一鍵幫你生成webpack.config.js，省去你不少的麻煩搂擦。
github.com/kitze/JSUI
JSUI 是一個(gè)可視化分類、構(gòu)建和管理 JavaScript 項(xiàng)目的工具盾饮。不管是前端應(yīng)用還是后端應(yīng)用采桃，也不論使用的是哪種框架，只要項(xiàng)目有一個(gè) package.json 丘损，即可進(jìn)行管理普办。
pwa.cafe/
一款腳手架構(gòu)建工具徘钥，方便創(chuàng)建基于Preact衔蹲，React，Vue和Svelte的項(xiàng)目，開箱及支持Babel舆驶，Bublé橱健，Browserlist，TypeScript沙廉，PostCSS拘荡，ESLint，Prettier和Service Workers撬陵！
vuepress.vuejs.org/
VuePress 由兩部分組成：第一部分是一個(gè)極簡(jiǎn)靜態(tài)網(wǎng)站生成器，它包含由 Vue 驅(qū)動(dòng)的主題系統(tǒng)和插件 API巨税，另一個(gè)部分是為書寫技術(shù)文檔而優(yōu)化的默認(rèn)主題蟋定，它的誕生初衷是為了支持 Vue 及其子項(xiàng)目的文檔需求。
每一個(gè)由 VuePress 生成的頁面都帶有預(yù)渲染好的 HTML草添，也因此具有非常好的加載性能和搜索引擎優(yōu)化（SEO）驶兜。同時(shí)，一旦頁面被加載远寸，Vue 將接管這些靜態(tài)內(nèi)容抄淑，并將其轉(zhuǎn)換成一個(gè)完整的單頁應(yīng)用（SPA），其他的頁面則會(huì)只在用戶瀏覽到的時(shí)候才按需加載而晒。
pwa-starter-kit.polymer-project.org/
通過功能豐富的WEB組件快速幫你構(gòu)建功能齊全的PWA網(wǎng)站項(xiàng)目倡怎，幾乎零配置迅耘，完成了構(gòu)建、測(cè)試和快速部署监署。
www.getpapercss.com/
一個(gè)不太常規(guī)的CSS框架，如果你希望你的網(wǎng)站有手繪風(fēng)格感覺钠乏，選擇它準(zhǔn)沒錯(cuò)栖秕。
boardgame.io/
BOARDGAME.IO是 Google 開源的一個(gè)游戲框架晓避，旨在允許游戲作者將游戲規(guī)則從本質(zhì)上轉(zhuǎn)化為一系列簡(jiǎn)單的函數(shù)簇捍，這些函數(shù)用于描述當(dāng)一個(gè)指定動(dòng)作發(fā)生時(shí)游戲的狀態(tài)變化，框架負(fù)責(zé)處理表述性狀態(tài)傳遞俏拱。 無需再手動(dòng)編寫任何網(wǎng)絡(luò)或后端代碼暑塑。 功能特性：
狀態(tài)管理：自動(dòng)跨瀏覽器、服務(wù)器和存儲(chǔ)器無縫管理游戲狀態(tài)锅必；
快速成型：在渲染游戲之前調(diào)試界面以模擬更改事格。
多人游戲：所有連接到同一游戲的瀏覽器都實(shí)時(shí)同步，無需刷新。
私密狀態(tài)：私密信息可從客戶端隱藏驹愚。
日志：游戲日志可查看任意時(shí)間的信息远搪。
UI 工具包：常用于游戲中的 React 組件。
stimulusjs.org
Stimulus是一個(gè)適度的前端框架谁鳍，它并不試圖接管整個(gè)前端的方方面面，不關(guān)心如何渲染HTML劫瞳，相反用來增強(qiáng)HTML的相關(guān)行為棠耕。如果你的團(tuán)隊(duì)規(guī)模較小，但又想要和那些使用比較費(fèi)力的主流方案的較大團(tuán)隊(duì)競(jìng)爭(zhēng)柠新，那么這是一個(gè)比較適合的前端框架方案。
sapper.svelte.technology/
Sapper是一個(gè)類似Next.js的框架恨憎，具有極高的性能和內(nèi)存效率，具備代碼分割郊楣，服務(wù)端渲染的現(xiàn)代框架功能憔恳，是一款軍工級(jí)別的框架。
reakit.io/
使用這個(gè)框架能讓你快速搭建漂亮的React UI 交互站點(diǎn)钥组。
evergreen.segment.com/
更為強(qiáng)大的React UI 框架今瀑，有一套非常標(biāo)準(zhǔn)的UI設(shè)計(jì)語言幫你構(gòu)建企業(yè)級(jí)的具有國(guó)際范設(shè)計(jì)風(fēng)格的WEB應(yīng)用程梦，這個(gè)框架類似我們國(guó)內(nèi)的ant.design（https://ant.design/docs/spec/colors-cn）
三、HTML和CSS工具
keyframes.app
一款基于時(shí)間關(guān)鍵幀屿附，在線制作網(wǎng)頁動(dòng)畫的網(wǎng)站，你無需在編輯器和瀏覽器直接互相切換哥童，及所見即所得挺份。keyframes.app提供在線制作和谷歌瀏覽器擴(kuò)展插件兩種形式。制作完成后贮懈，你能很方便的將自動(dòng)產(chǎn)生的CSS代碼復(fù)制到你的項(xiàng)目中匀泊。
emotion.sh/
Emotion是一款用JavaScript編寫css的庫朵你，支持字符串和對(duì)象兩種方式聲明CSS變量各聘，如果你在使用React，試用這個(gè)庫將讓你以更加優(yōu)雅的方式用JavaScript編寫CSS撬呢。
github.com
normalize.css可以讓瀏覽器以接近標(biāo)準(zhǔn)的方式一致地渲染所有元素，而且不同于cssrest，只針對(duì)需要正趁牵化的元素搁嗓。modern-normalize只針對(duì)現(xiàn)代瀏覽器，而且足夠現(xiàn)代箱靴，甚至IE和Edge都已經(jīng)放棄腺逛。
layerjs.org/
一款你只需要編寫HTML就能很輕松實(shí)現(xiàn)菜單衡怀、畫框棍矛、彈出層、滾動(dòng)視察抛杨、縮放够委、觸摸手勢(shì)等眾多效果的框架，這個(gè)框架代碼壓縮版只有30KB,很方便與各種前端框架集成(Angular,VueJS,React),支持響應(yīng)式和觸摸怖现，并且不依賴任何庫就能實(shí)現(xiàn)茁帽。
css-blocks.com/
一款受 CSS Modules, BEM 和 Atomic CSS 框架啟發(fā)屈嗤，為你的web應(yīng)用組件提供完美的CSS模塊方案潘拨。
usebasin.com/
一款你只需要設(shè)計(jì)表單饶号，無需編寫后端代碼铁追，就能很方便的將表單應(yīng)用集成到你的項(xiàng)目里。
mustard-ui.com/
一款適合初學(xué)者的CSS框架琅束，但是看起來還蠻不錯(cuò)，模塊化算谈，開源狰闪，壓縮版只有6KB，支持FLEX,Grid布局和自帶一些漂亮UI,比如進(jìn)度條濒生，表單埋泵、按鈕等，雖然小罪治，但功能齊全丽声。
appleple.github.io
一個(gè)JS庫雁社，用于指示元素可以水平滾動(dòng)，并帶有指針圖標(biāo)晒骇，如果你在做一個(gè)新手引導(dǎo)霉撵，這個(gè)工具將會(huì)是一個(gè)不錯(cuò)的選擇磺浙。
github.com
強(qiáng)大的Markdown編輯器tui.editor,方便集成到你的項(xiàng)目里徒坡，這款強(qiáng)大的富媒體編輯器有以下特點(diǎn)：
支持 CommonMark 與 GFM（GitHub Flavored Markdown）兩種標(biāo)準(zhǔn)
支持豐富的擴(kuò)展插件撕氧，如顏色選擇器、圖表喇完、UML伦泥、表格合并
提供了所見即所得與 Markdown 這兩種模式，在編輯過程中可以隨時(shí)切換锦溪，非常方便不脯。在所見即所得模式下，可以直接從瀏覽器刻诊、 Excel防楷、PPT等復(fù)制文本，并且保留原來的格式
github.com
Filepond 是一個(gè)用于文件上傳的 JavaScript 庫域帐，可以上傳任何內(nèi)容，優(yōu)化圖像以獲得更快的上傳速度是整，并提供一個(gè)出色的，可訪問的民假，流暢的用戶體驗(yàn)浮入。
Filepond 提供了多種上傳方式：拖放，復(fù)制和粘貼文件羊异，瀏覽文件系統(tǒng)或僅使用庫的API事秀。 gzip 壓縮后僅有 21KB ，并且內(nèi)置了圖像優(yōu)化和圖像自動(dòng)調(diào)整功能野舶。
Filepond 適用于 React 易迹， Vue ， Angular 和 jQuery 平道。
sarahdayan.github.io/dinero.js/
一個(gè)用來創(chuàng)建、計(jì)算和格式化貨幣價(jià)值的不可變的框架一屋。
無論在銀行應(yīng)用程序窘疮、電子商務(wù)網(wǎng)站還是證券交易所平臺(tái)，我們每天都在與金錢互動(dòng)冀墨。我們也越來越依賴技術(shù)來處理問題闸衫。
然而，關(guān)于如何以編程處理貨幣價(jià)值尚無共識(shí)诽嘉。雖然金錢是現(xiàn)代社會(huì)中普遍存在的概念蔚出，但相較于日期和時(shí)間之類的東西弟翘，它并不是任何主流語言中的一流數(shù)據(jù)類型。結(jié)果骄酗，每一種軟件都有自己的處理方式稀余，且伴隨著陷阱。
Dinero.js遵循Fowler的模式更多一點(diǎn)兒酥筝。它允許你在JavaScript中創(chuàng)建滚躯、計(jì)算和格式化貨幣值。你可以進(jìn)行數(shù)學(xué)運(yùn)算嘿歌、解析和格式化對(duì)象掸掏，使你的開發(fā)過程更加輕松。
該庫設(shè)計(jì)為不可變和可鏈接的模式宙帝。它支持全局設(shè)置丧凤，具有擴(kuò)展格式選項(xiàng)，并提供本機(jī)國(guó)際化支持步脓。
github.com/gmrchk/swup
一款適合初學(xué)者的框架，方便靈活易用靴患，讓你能快速制作專業(yè)級(jí)的頁面轉(zhuǎn)場(chǎng)動(dòng)畫效果仍侥。
simonwep.github.io/selection/
簡(jiǎn)單易用的可視化鸳君，支持鼠標(biāo)拖拽农渊、使用Cmd/Ctrl+click 選擇頁面元素的庫（支持分組選擇），大大節(jié)省了你的開發(fā)時(shí)間或颊。只有3KB大小砸紊，不依賴jQuery。
nickpiscitelli.github.io/Glider.js/
一個(gè)超快速(25毫秒加載)醉顽，輕量級(jí)(小于3KB)，無依賴性(不需要jQuery)的制作幻燈效果的前端庫平挑，支持響應(yīng)式游添，易于擴(kuò)展，方便自定義事件等...通熄，更多特性等待你的發(fā)現(xiàn)否淤！
scroll-out.github.io/
一款幫你制作專業(yè)級(jí)Scroll滾動(dòng)效果（滾動(dòng)視差）的框架棠隐，框架大小不到1KB,使用回調(diào)的方式將相關(guān)動(dòng)畫元素的屬性進(jìn)行實(shí)時(shí)分配石抡，方便你做出個(gè)性化的動(dòng)態(tài)效果。
自己是從事了五年的前端工程師助泽，不少人私下問我啰扛，2019年前端該怎么學(xué)嚎京，方法有沒有？
沒錯(cuò)隐解，年初我花了一個(gè)多月的時(shí)間整理出來的學(xué)習(xí)資料鞍帝，希望能幫助那些想學(xué)習(xí)前端，卻又不知道怎么開始學(xué)習(xí)的朋友煞茫。
orioniconlibrary.com/
多達(dá)6000專業(yè)免費(fèi)的SVG矢量圖標(biāo)蚓曼，還支持深度的定制，比如更換配色钦扭，更改線條粗細(xì)纫版，變換圖標(biāo)風(fēng)格(細(xì)線條、粗線條客情、扁平)其弊，一鍵生成相關(guān)代碼。
frappe.io/charts
一款簡(jiǎn)單梭伐、專業(yè)、開源仰担、現(xiàn)代風(fēng)格的SVG報(bào)表工具,不需要任何依賴庫糊识，代碼風(fēng)格簡(jiǎn)單，簡(jiǎn)單易用惰匙。支持一鍵導(dǎo)出svg代碼。
www.svgator.com/
如果您希望將Web圖形提升到一個(gè)新的水平项鬼，那么動(dòng)畫SVG就是您的選擇，而SVGator是您可以用來創(chuàng)建它們的最簡(jiǎn)單的工具之一劲阎。
一款專業(yè)級(jí)的SVG動(dòng)畫制在線制作工具绘盟。SVGator還具有代碼管理器面板，因此您可以準(zhǔn)確地看到應(yīng)用程序生成的代碼悯仙。SVGator導(dǎo)出干凈龄毡，格式良好的代碼。
apexcharts.com/
ApexCharts.JS 是一個(gè)現(xiàn)代化 JavaScript 圖表庫沦零，用于使用簡(jiǎn)單的 API 構(gòu)建交互式圖表和可視化，功能十分強(qiáng)大货岭。方便你將圖表嵌入到你的Vue路操、React項(xiàng)目中疾渴。
developer.apple.com
一款蘋果公司提供的地圖工具屯仗，如果想制作和蘋果官方網(wǎng)站一樣的地圖風(fēng)格搞坝，這個(gè)工具將是一個(gè)不錯(cuò)的選擇，允許你在地圖上添加交互事件魁袜，豐富你的地圖應(yīng)用桩撮。
github.com
一款圖片自動(dòng)預(yù)加載和緩存工具峰弹，防止圖片閃爍店量，并使用模糊濾鏡預(yù)先顯示圖片延遲圖片加載，提高網(wǎng)頁加載速度垮卓，使用起來非常簡(jiǎn)單垫桂，你只需要使用<img-2>替代<img/>標(biāo)簽即可，使用起來就是這么簡(jiǎn)單粟按！
github.com
Lozad.js 是基于 IntersectionObserver API 的輕量級(jí)、高性能灭将、可配置的純 JavaScript并且無依賴的懶加載器疼鸟，其能夠被用于進(jìn)行圖片、iframe 等多種形式的元素庙曙。
通過gzip壓縮過后空镜，僅僅1kb大小，相對(duì)于常用的jquery.lazyload.js來說捌朴，lozad.js實(shí)力碾壓吴攒，雖然jquery.lazyload.js也才幾kb大小。在github上砂蔽，已經(jīng)收獲了4800+的star洼怔。
rsuitejs.com/
React Suite 是一套 React 組件庫左驾，為后臺(tái)產(chǎn)品而生镣隶。由 HYPERS 前端團(tuán)隊(duì)與 UX 團(tuán)隊(duì)打造，主要服務(wù)于公司大數(shù)據(jù)產(chǎn)品線诡右。
經(jīng)歷了三次大的版本更新后安岂，累積了大量的組件和豐富的功能。并支持在線定制個(gè)性化主題帆吻，更重要的是有中文版域那，方便我們學(xué)習(xí)使用。
pagedraw.io/
一款神奇的在線UI設(shè)計(jì)制作工具琉雳，你只需要拖動(dòng)和布局頁面样眠，這個(gè)工具就會(huì)給你自動(dòng)生成質(zhì)量高的React組件代碼，更多功能等待你的發(fā)掘翠肘。
github.com/kutlugsahin…
一款拖拽頁面元素的React工具，拖拽效果平滑束倍，讓你輕松就能實(shí)現(xiàn)卡片被丧、列表、表單組件的的拖拽绪妹。
unstated.io/
一個(gè)新的狀態(tài)管理類庫 unstated.js：簡(jiǎn)單易用/合理。和之前的 state 管理庫思路完全不同邮旷，這個(gè)unstated主打 local state（不是全局store黄选，一個(gè)小改動(dòng)導(dǎo)致整棵樹 rerender），多個(gè) local state 之間也可以共享婶肩， 兼具了redux的易用性與flux的合理性办陷，令人耳目一新；unstated完全就是為React設(shè)計(jì)的律歼，“足夠React”民镜，讓你感覺不到在用第三方組件。
reach.tech/router
Reach-Router 是前 ReactRouter 成員 Ryan Florence 開發(fā)的一套基于 react 的路由控件. 那么已經(jīng)有比較成熟的 ReactRouter 了, 為什么要”再”做一套 Router 呢, 有興趣的同學(xué)可以去了解一下,小編認(rèn)為主要有以下幾個(gè)特點(diǎn)值得你看看：
小制圈，就4kb,壓縮后比react-router小40kb左右。
更少的配置
更好用
基本一樣的api,學(xué)習(xí)成本非常低
源碼非常簡(jiǎn)潔畔况，總共就3個(gè)文件鲸鹦，900行，如果你想深入理解單頁應(yīng)用的路由是怎么實(shí)現(xiàn)的跷跪，reach-router,絕對(duì)是絕佳的下手資料
www.smooth-code.com/
svgr是一個(gè)將SVG轉(zhuǎn)換為React組件的工具，svgr由JavaScript實(shí)現(xiàn)域庇。整個(gè)文檔也非常的小嵌戈，已開源在github上覆积。
github.com/
用于React類似于Excel的網(wǎng)格組件，具有自定義單元格編輯器宽档，高性能滾動(dòng)和可調(diào)整大小的列尉姨。
webhint.io/
Webhint項(xiàng)目提供了一種用于檢查代碼的可訪問性吗冤、性能和安全的開源檢查（Linting）工具又厉。在創(chuàng)建Web站點(diǎn)和應(yīng)用中九府，有越來越多的細(xì)節(jié)問題亟待完善。為此覆致，Webhint力圖幫助開發(fā)人員標(biāo)記這些細(xì)節(jié)侄旬。
Webhint以命令行接口（CLI）工具和在線掃描器兩種形式提供，使用在線掃描器是最快的上手方式煌妈。使用在線掃描器需要為其提供一個(gè)公開的URL儡羔，用于運(yùn)行報(bào)告并洞悉應(yīng)用的運(yùn)行情況。
在測(cè)試應(yīng)用時(shí)璧诵，Webhint提供三種運(yùn)行環(huán)境：jsdom汰蜘、Chrome和Edge。后兩種運(yùn)行環(huán)境使用了Chrome DevTools協(xié)議之宿，第一種運(yùn)行環(huán)境使用Node.js環(huán)境快速地執(zhí)行有限次數(shù)的檢查族操，無需瀏覽器的支持。
還有更多強(qiáng)大的功能比被，還有待你試用挖掘色难。
github.com/airtap/airt…
Airtap 是一種在瀏覽器中測(cè)試 JavaScript 的簡(jiǎn)單方法姐赡，號(hào)稱能覆蓋800多種瀏覽器莱预，能夠在數(shù)秒內(nèi)開始在本地測(cè)試你的代碼，并無縫轉(zhuǎn)移到由 Sauce Labs 提供的基于云的瀏覽器上项滑，以獲得更好的覆蓋測(cè)試依沮。
Airtap 與其他跨瀏覽器測(cè)試運(yùn)行器的不同之處在于其簡(jiǎn)單性，以及能夠在許多瀏覽器中輕松運(yùn)行測(cè)試套件而無需在本地安裝它們枪狂。它可以讓你在開發(fā)過程中快速迭代危喉，并在發(fā)布前提供良好的瀏覽器覆蓋率，而不用擔(dān)心缺少瀏覽器支持州疾。
不要只是聲稱你的 JavaScript 支持“所有瀏覽器”辜限，用測(cè)試證明它！
github.com/FiloSottile…
HTTPS 是 Web 發(fā)展的趨勢(shì)薄嫡，用于提高網(wǎng)站的安全性。使用 HTTPS 需要配置 TLS 證書颗胡，得益于 ACME 協(xié)議和 Let's Encrypt 證書毫深，遠(yuǎn)程環(huán)境可以很容易部署。但是對(duì)于本地環(huán)境毒姨，還沒有普遍有效的證書哑蔫。
mkcert 被設(shè)計(jì)的足夠簡(jiǎn)單，隱藏了幾乎所有生成 TLS 證書所必須的知識(shí)。它適用于任何主機(jī)名或者 IP闸迷，包括 localhost 嵌纲，因?yàn)樗辉谀愕谋镜丨h(huán)境使用。
證書是由你的私有 CA 簽發(fā)腥沽，當(dāng)你運(yùn)行 mkcert-install 會(huì)自動(dòng)配置這些信任逮走，因此，當(dāng)瀏覽器訪問時(shí)今阳，就會(huì)顯示安全標(biāo)識(shí)言沐。目前支持 MacOS、Linux 和 Windows酣栈，以及 Firefox险胰、Chrome 和 Java。甚至支持一些手機(jī)設(shè)備矿筝。
checklyhq.com/docs/puppet…
Puppeteer 是一個(gè)Node庫，它提供了一個(gè)高級(jí)API來控制DevTools協(xié)議上的Chrome或Chromium窖维，常用于爬蟲榆综、自動(dòng)化測(cè)試等，你在瀏覽器手動(dòng)完成的大多數(shù)事情都可以使用它來完成铸史。
www.jsonstore.io/
jsonstore.io為小型項(xiàng)目提供免費(fèi)粒没，安全且基于JSON的云數(shù)據(jù)存儲(chǔ)吊档。只需輸入https://www.jsonstore.io/转培，復(fù)制URL就可以開始發(fā)送HTTP數(shù)據(jù)請(qǐng)求。POST請(qǐng)求將保存數(shù)據(jù)崭篡，PUT請(qǐng)求修改數(shù)據(jù)挪哄，DELETE請(qǐng)求刪除數(shù)據(jù)和GET請(qǐng)求檢索數(shù)據(jù)。大大方便了前端開發(fā)人員進(jìn)行測(cè)試接口的集成琉闪，前端頁面制作完成就能進(jìn)行接口測(cè)試迹炼，使用起來就是這么簡(jiǎn)單。
initab.com/
一款為開發(fā)人員定制打造的工作臺(tái)斯入，通過谷歌瀏覽器插件安裝即可使用，通過此工作臺(tái)你可以輕松訂閱你感興趣的git項(xiàng)目蛀蜜、跟進(jìn)相關(guān)問題刻两、pull相關(guān)操作，查看版本歷史涵防，訂閱Stack Overflow相關(guān)的內(nèi)容闹伪，管理查看Gists相關(guān)內(nèi)容，可以說一個(gè)主流技術(shù)平臺(tái)聚合工作臺(tái)壮池。
www.lambdatest.com/
一款在線自動(dòng)化測(cè)試云端平臺(tái)，號(hào)稱在2000多個(gè)真實(shí)瀏覽器和設(shè)備進(jìn)行測(cè)試椰憋，可以根據(jù)你的測(cè)試需求進(jìn)行深度定制厅克，并形成相關(guān)記錄，方便團(tuán)隊(duì)的協(xié)作橙依，幫你發(fā)現(xiàn)跨平臺(tái)不同瀏覽器版本的各種問題证舟。
（轉(zhuǎn)載自CSDN? /? IT智云編程）
