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

19年，又是新的一年，「前端屆」，又出了哪些新的「玩意」，今天小編向你推薦目前比較熱門新鮮度靠前的50款前端工具，但願在新的一年裏，對你有所幫助。

1、構建工具

一、 Parcel

https://parceljs.org/

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

二、 Critters

github.com/GoogleChrom…

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

三、sucrase

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

四、Webpack Config Tool

webpack.jakoblind.no/ 

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

五、JSUI

github.com/kitze/JSUI 

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（https://ant.design/docs/spec/colors-cn）

小節

今天的分享就到這裏，剩下的內容，小編將會在下篇文章進行分享，敬請期待，明天就是除夕夜了，小編在這裏祝你們新年快樂，闔家歡樂。

更多精彩內容，請微信關注」前端達人」公衆號！