這50款前端熱門工具簡直不要太好用了！（1）

19年，又是新的一年，“前端屆”，又出了哪些新的“玩意”，今天向你推薦目前比較熱門新鮮度靠前的50款前端工具，希望在新的一年裡，對你有所幫助。

一、構建工具

1、 Parcel

https://parceljs.org/

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

2、 Critters

github.com/GoogleChrom…

一款webpack的外掛，它可以很方便的配置內聯關鍵css( critical CSS ),其餘的css部分則會非同步載入，由於它不使用無頭瀏覽器(headless browser)呈現內容，因此快速輕巧。

3、sucrase

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

4、Webpack Config Tool

webpack.jakoblind.no/

一款視覺化的線上工具網站，你只需要選擇前端專案運用到技術和相關配置，就能一鍵幫你生成webpack.config.js，省去你不少的麻煩。

5、JSUI

github.com/kitze/JSUI

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

6、PWA Universal Builder

pwa.cafe/

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

7、VuePress

vuepress.vuejs.org/

VuePress 由兩部分組成：第一部分是一個極簡靜態網站生成器，它包含由 Vue 驅動的主題系統和外掛 API，另一個部分是為書寫技術文件而優化的預設主題，它的誕生初衷是為了支援 Vue 及其子專案的文件需求。

每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML，也因此具有非常好的載入效能和搜尋引擎優化（SEO）。同時，一旦頁面被載入，Vue 將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在使用者瀏覽到的時候才按需載入。

二、框架和庫

8、 PWA Starter Kit

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

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

9、PaperCSS

www.getpapercss.com/

一個不太常規的CSS框架，如果你希望你的網站有手繪風格感覺，選擇它準沒錯。

10、boardgame.io

boardgame.io/

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

• 狀態管理：自動跨瀏覽器、伺服器和儲存器無縫管理遊戲狀態；
• 快速成型：在渲染遊戲之前除錯介面以模擬更改。
• 多人遊戲：所有連線到同一遊戲的瀏覽器都實時同步，無需重新整理。
• 私密狀態：私密資訊可從客戶端隱藏。
• 日誌：遊戲日誌可檢視任意時間的資訊。
• UI 工具包：常用於遊戲中的 React 元件。

11、Stimulus

stimulusjs.org

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

12、sapper

sapper.svelte.technology/

Sapper是一個類似Next.js的框架，具有極高的效能和記憶體效率，具備程式碼分割，服務端渲染的現代框架功能，是一款軍工級別的框架。

13、Reakit

reakit.io/

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

14、Evergreen

evergreen.segment.com/

更為強大的React UI 框架，有一套非常標準的UI設計語言幫你構建企業級的具有國際範設計風格的WEB應用，這個框架類似我們國內的ant.design （https://ant.design/docs/spec/colors-cn）

自己是從事了五年的前端工程師，不少人私下問我，2019年前端該怎麼學，方法有沒有？

沒錯，年初我花了一個多月的時間整理出來的學習資料，希望能幫助你快速學習前端，拿高薪offer！

這裡推薦一下我的前端學習交流群：731771211，裡面都是學習前端的從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴。2019最新技術，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!

點選： 加入

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2636149/，如需轉載，請註明出處，否則將追究法律責任。