19年,又是新的一年,“前端屆”,又出了哪些新的“玩意”,今天小編向你推薦目前比較熱門新鮮度靠前的50款前端工具,希望在新的一年裡,對你有所幫助。
一、構建工具
1、 Parcel
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/1e30ab96078e9779f4650f06777cc52e81c9706504e3b49c6f4de34d6f61e16f.png)
Parcel是一款極速零配置WEB應用打包工具,快速、幾乎零配置是它最大的特點,開箱即用。相比webpack,Parcel對於新手來說未嘗不是一個很好的選擇。
2、 Critters
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/7bdf5303cad3c9793375340178dbbc82cbe92b2c473473339104344ebe438e41.png)
一款webpack的外掛,它可以很方便的配置內聯關鍵css( critical CSS ),其餘的css部分則會非同步載入,由於它不使用無頭瀏覽器(headless browser)呈現內容,因此快速輕巧。
3、sucrase
sucrase.io/ 如果你用typscript構建React專案,sucrase將是一個不錯的選著,它的編譯速度將是Babel的20倍。sucrase——一款ES6+編譯器,重點關注非標準語言,例如Typescript,JSX和Flow。
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/1ec1dab783b71c1a1ce2f71d590a2269b7d69e3b5a0f4f19c327df082b6805b6.png)
4、Webpack Config Tool
一款視覺化的線上工具網站,你只需要選擇前端專案運用到技術和相關配置,就能一鍵幫你生成webpack.config.js,省去你不少的麻煩。
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/866e7a25094ae6168e2aff2a5ea07ee63824c79145fae6ee79471f6a765e9306.png)
5、JSUI
JSUI 是一個視覺化分類、構建和管理 JavaScript 專案的工具。不管是前端應用還是後端應用,也不論使用的是哪種框架,只要專案有一個 package.json ,即可進行管理。
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/dfd1db6362e7a12f5e5ce139f32180c902bb3926641d87a35c40dcbc2e7ff4c8.png)
6、PWA Universal Builder
一款腳手架構建工具,方便建立基於Preact,React,Vue和Svelte的專案,開箱及支援Babel,Bublé,Browserlist,TypeScript,PostCSS,ESLint,Prettier和Service Workers!
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/490b0d13451d61d0ae44c60758ddefe07e1b877e7c97e04bf70dc7df8f804204.png)
7、VuePress
VuePress 由兩部分組成:第一部分是一個極簡靜態網站生成器,它包含由 Vue 驅動的主題系統和外掛 API,另一個部分是為書寫技術文件而優化的預設主題,它的誕生初衷是為了支援 Vue 及其子專案的文件需求。
每一個由 VuePress 生成的頁面都帶有預渲染好的 HTML,也因此具有非常好的載入效能和搜尋引擎優化(SEO)。同時,一旦頁面被載入,Vue 將接管這些靜態內容,並將其轉換成一個完整的單頁應用(SPA),其他的頁面則會只在使用者瀏覽到的時候才按需載入。
二、框架和庫
8、 PWA Starter Kit
pwa-starter-kit.polymer-project.org/
通過功能豐富的WEB元件快速幫你構建功能齊全的PWA網站專案,幾乎零配置,完成了構建、測試和快速部署。
9、PaperCSS
一個不太常規的CSS框架,如果你希望你的網站有手繪風格感覺,選擇它準沒錯。
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/94a9fdf98771d3a2a5b065dc5fc384104e0b4baa745faa9a26d7cee0019ec930.png)
10、boardgame.io
BOARDGAME.IO是 Google 開源的一個遊戲框架,旨在允許遊戲作者將遊戲規則從本質上轉化為一系列簡單的函式,這些函式用於描述當一個指定動作發生時遊戲的狀態變化,框架負責處理表述性狀態傳遞。 無需再手動編寫任何網路或後端程式碼。 功能特性:
- 狀態管理:自動跨瀏覽器、伺服器和儲存器無縫管理遊戲狀態;
- 快速成型:在渲染遊戲之前除錯介面以模擬更改。
- 多人遊戲:所有連線到同一遊戲的瀏覽器都實時同步,無需重新整理。
- 私密狀態:私密資訊可從客戶端隱藏。
- 日誌:遊戲日誌可檢視任意時間的資訊。
- UI 工具包:常用於遊戲中的 React 元件。
11、Stimulus
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/1e0831f902479116d96c6bce655cc5b2bd1386ca4db14946a19306d210f91ef2.png)
Stimulus是一個適度的前端框架,它並不試圖接管整個前端的方方面面,不關心如何渲染HTML,相反用來增強HTML的相關行為。如果你的團隊規模較小,但又想要和那些使用比較費力的主流方案的較大團隊競爭,那麼這是一個比較適合的前端框架方案。
12、sapper
Sapper是一個類似Next.js的框架,具有極高的效能和記憶體效率,具備程式碼分割,服務端渲染的現代框架功能,是一款軍工級別的框架。
13、Reakit
使用這個框架能讓你快速搭建漂亮的React UI 互動站點。
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/9e20ee868d0bb9f940c4ce5e10bdb71e2036f1881a8955f7f5882dd4ebb6e291.png)
14、Evergreen
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/9cbe6f22eac9ca092a3be14a5fe4d764ae19b0b69a7feab023383f67c533b48a.png)
更為強大的React UI 框架,有一套非常標準的UI設計語言幫你構建企業級的具有國際範設計風格的WEB應用,這個框架類似我們國內的ant.design(https://ant.design/docs/spec/colors-cn)
小節
今天的分享就到這裡,剩下的內容,小編將會在下篇文章進行分享,敬請期待,明天就是除夕夜了,小編在這裡祝大家新年快樂,闔家歡樂。
更多精彩內容,請微信關注”前端達人”公眾號!
![19年你應該關注這50款前端熱門工具(上)](https://i.iter01.com/images/8cb57eeef30b033c7244f5ee7f3b3d6db561ef2cf5e654ac7b56fe10b88d8ba3.jpg)