2022前端，推荐7款值得深入学习的“👑新贵前端库”!

「2022 年什么会火？什么该学？本文正在参与“聊聊 2022 技术趋势”征文活动 」

2022年前端到底应该学什么，大家众说纷纭各执一词。

但我始终相信，数据，从不撒谎！

让我们看看那些在 2021 年 star 数爆炸式增长的库当中，有哪些值得前端一学的“黑马”和“霸主”吧！

一、 👑 ZX： 使用js编写更便捷shell脚本

ZX.js 2021年 star 增量 +24.3K

时至今日，前端工程化已经是越来越火热，前端人需要面对的工程化问题也已经越来越复杂，经常出现需要前端研发需要动手写 shell 脚本。
但因为技术栈的关系，脚本质量和开发效率都非常着急。
zx.js 的出现，正是为了解决这一尴尬困境！

不就是 shell 嘛，我用 js 也能写！

#!/usr/bin/env zx

await $`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 年异军突起呢？

凭两个杀招：

1. 更小！它的构建物比 Electron 的构建物更小，因为它放弃了体积巨大的 Chromium 和 nodejs，前端使用操作系统的 webview，后端集成了 Rust。
2. 更加小！它对内存的开销更加小。

五、 👑 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 一定有更广阔的空间。

结束

我是春哥。
我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。

你可以在掘金关注我，也可以在公众号里找到我：前端要摸鱼。
希望大家在 2022 变得更强。