「
2022 年什麼會火？什麼該學？本文正在參與“聊聊 2022 技術趨勢”徵文活動
」
2022年前端到底應該學什麼，大家眾說紛紜各執一詞。
但我始終相信，資料，從不撒謊！
讓我們看看那些在 2021 年
star
數爆炸式增長的庫當中，有哪些值得前端一學的“黑馬”和“霸主”吧！
一、 ZX：使用js編寫更便捷shell指令碼
ZX。js 2021年
star
增量 +24。3K
時至今日，前端工程化已經是越來越火熱，前端人需要面對的工程化問題也已經越來越複雜，經常出現需要前端研發需要動手寫
shell
指令碼。
但因為技術棧的關係，指令碼質量和開發效率都非常著急。
zx。js
的出現，正是為了解決這一尷尬困境！
不就是 shell 嘛，我用 js 也能寫！
#！/usr/bin/env zxawait $`cat package。json | grep name`let branch = await $`git branch ——show-current`await $`dep deploy ——branch=${branch}`await Promise。all（［ $`sleep 1； echo 1`， $`sleep 2； echo 2`， $`sleep 3； echo 3`，］）
zx。js
再次向世人證明了一件事：“凡是能用
js
實現的庫，那就一定會有人用
js
來實現的。”
如果你也經常有寫指令碼的需求，那一定不能錯過這款
zx
！
二、 Vite：下一代前端工具
Vite 2021年
star
增量 +21。4K
Vite（讀音類似於［weɪt］，法語，快的意思） 是一個由原生 ES Module 驅動的 Web 開發構建工具。在開發環境下基於瀏覽器原生 ES imports 開發，在生產環境下基於 Rollup 打包。
雖然 2021 年
webpack
仍然是毫無爭議的
構建之王
，但活躍的前端社群，終於出現了一位
能打
的挑戰者。
vite
一出手就直接瞄準了
webpack
最遭人詬病的軟肋：“開發時構建實在太慢”。
vite
劍走偏鋒，在
dev
時，透過
esbuild
進行
esm
格式進行模組載入，幾乎實現了“秒開”的效果。讓那些被
webpack
如同蝸牛般開發時構建速度折磨的研發人員直呼“牛嗶”。
在生產構建時，
vite
則透過對老牌構建工具
rollup
進行了適度封裝，降低了普通開發者的介入難度。
無論你是
React
開發者亦或是
Vue
開發者，
Vite
都是一款覺得值得嘗試的工具。
相信我，你會愛上它的。
三、 React & Next。js：互相成就的好基友
React 2021年
star
增量 +18。5K
Next。js 2021年
star
增量 +19。7K
React
是什麼就不多介紹了，懂的都懂，讓人沒想到的是
React
在 2022 實現這麼猛的增量。
而
Next。js
則是基於
React
的一款應用框架，基於
Next。js
你可以更便捷地上手開發
React
應用。
構建指令碼、打包命令、開發工具、路由、狀態管理、網路請求、SASS/LESS、服務端渲染。
這些你統統都無需再在社群中“選擇困難症”了，你可以快速開始開發功能。
Sooooo Coooooool！
雖然
Next。js
基於
React
，但是
Next。js
又何嘗不是在成就
React
呢？
四、 Tauri：構建更小更快的跨平臺桌面應用
Tauri 2021年
star
增量 +18。0K
Tauri 是一個為所有主流桌面平臺構建小型、快速二進位制檔案的框架。開發人員可以整合任何編譯成 HTML、 JS 和 CSS 的前端框架來構建他們的使用者介面。應用程式的後端是一個
Rust
二進位制檔案，具有前端可以與之互動的 API。
看到上面這段話，一定有不少人想到了另一個庫：
electron。js
。
同樣的寫
HTML/JS/CSS
，同樣的跨平臺，同樣的桌面應用。
那
Tauri
憑什麼在 2022 年異軍突起呢？
憑兩個殺招：
更小！它的構建物比
Electron
的構建物更小，因為它放棄了體積巨大的
Chromium
和
nodejs
，前端使用作業系統的
webview
，後端集成了
Rust
。
更加小！它對記憶體的開銷更加小。
五、 Tailwind CSS：新時代的“原子類”CSS實用框架
Tailwind CSS 2021年
star
增量 +18。0K
這是一個實用程式優先的
CSS
框架，它的使用方法和 10 年前的“原子類”用法類似：
你可以透過諸如
flex
，
pt-4
，
text-center
這樣的命名，生成相應的
CSS
程式碼。
有人說，這是在開歷史的倒車。
但是大人，時代變了。
在目前高度元件化、
CSS IN JS
橫行的年代，在
Tailwind CSS
的助力下，原子化
CSS
展現了它便捷、高度語義化、高度約束性的優勢。
“老樹發新枝”或許不太合適，可能我們只有由衷地感嘆一句“原子CSS”迎來了適合它的時代。
六、 Slidev：基於markdown的演示幻燈片
Slidev 2021年
star
增量 +16。9K
你是否還在苦於不太會玩
Powerpoint
導致你的彙報總是看起來特別
low
？你是否也曾希望自己可以像操控自己的程式碼一樣操控自己的演示文件？
來吧！這些在
Slidev
裡全都有！
markdown
深度愛好者的福音！為開發人員設計的幻燈片開源庫。透過
Slidev
，可以透過
Markdown
快速製作出更加靈活性、更具表現力和吸引力的幻燈片。
七、 Esbuild：賊快的Javascript打包器
Esbuild 2021年
star
增量 +12。9K
Esbuild 官方認為：“當前所有其他打包工具，都比他們理應達到的速度慢了10-100倍。”
“我不是針對誰。而是在做的
webpack
/
rollup
等都不太行。”
為什麼？
它基於
golang
，就是比
node。js
快。
高度並行的處理演算法。
節制的功能設計。
重寫核心工具鏈。
2021 年，
Esbuild
在前端圈可謂大放異彩，本年度最大黑馬
Vite
也毫不猶豫地選擇了
Esbuild
作為自己的構建工具之一。
可以說，在這個追求效率的年代，
Esbuild
一定有更廣闊的空間。
