2021 年 JavaScript 明星项目榜：zx、Vite 、Next.js 、React 大受欢迎
<div class="css-78p1r9"><div class="css-1hm49zr">
<div class="css-1ld0bim"><img src="https://pica.zhimg.com/70/v2-ccd8351ce8ef0724ff3a18d64d495853_1440w.image?source=172ae18b&biz_tag=Post" srcset="https://pica.zhimg.com/70/v2-ccd8351ce8ef0724ff3a18d64d495853_1440w.image?source=172ae18b&biz_tag=Post 1x, https://pica.zhimg.com/70/v2-ccd8351ce8ef0724ff3a18d64d495853_1440w.image?source=172ae18b&biz_tag=Post 2x" alt="2021 年 JavaScript 明星项目榜：zx、Vite 、Next.js 、React 大受欢迎" width="100%"></div>
</div>
</div>
<h1 class="Post-Title">2021 年 JavaScript 明星项目榜：zx、Vite 、Next.js 、React 大受欢迎</h1>
<div class="Post-Author">
<div class="AuthorInfo">
<div class="AuthorInfo">
<div class="css-1gomreu"><img src="https://pica.zhimg.com/2274f6f8f0806aa566bd065905eebc81_l.jpg?source=172ae18b" srcset="https://pica.zhimg.com/2274f6f8f0806aa566bd065905eebc81_l.jpg?source=172ae18b 2x" alt="思否小姐姐" class="Avatar AuthorInfo-avatar css-1syywx2"></div>
<div class="AuthorInfo-content">
<div class="AuthorInfo-head">
<div class="css-1gomreu">思否小姐姐</div>
</div>
<div class="AuthorInfo-detail">
<div class="AuthorInfo-badge">
<div class="ztext AuthorInfo-badgeText css-0">SegmentFault 思否社区管理员小姐姐</div>
</div>
</div>
</div>
</div>
</div>
<button class="Button FollowButton FEfUrdfMIKpQDJDqkjte Button--primary Button--blue epMJl0lFQuYbC7jrwr_o JmYzaky7MEPMFcJDLNMG" type="button">关注她</button></div>
<div>
<div class="css-dvccr2">
<div class="css-1lr85n">88 人赞同了该文章</div>
</div>
</div>
<div class="Post-RichTextContainer">
<div class="css-1od93p9">
<div class="css-376mun">
<div class="RichText ztext Post-RichText css-ob6uua">
<p data-first-child="" data-pid="KODYfNOp">近日，risingstars 出炉了“2021 JavaScript Rising Stars”报告。该报告结合过去 12 个月里 GitHub 上新增的 star 数而对 2021 年 JavaScript 领域的优秀项目做了总结。</p>
<img src="https://pic4.zhimg.com/v2-2ce313a978413a14a2135ee6126589b9_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="190" data-original-token="v2-e5d846605f7989b3cfce98aca9383d81" data-original="https://pic4.zhimg.com/v2-2ce313a978413a14a2135ee6126589b9_r.jpg">
<p data-pid="mDDIx-uG">本次“2021 JavaScript Rising Stars”报告里共包括以下部分：最受欢迎项目、前端框架、Node.js 框架、构建工具、Vue 生态圈、React 生态圈、CSS in JavaScript、测试框架、移动开发、桌面开发、静态网站生成器、状态管理GraphQL。</p>
<p data-pid="du_S7da5">本次总结报告里，有不少有意思的结果，比如在“最受欢迎项目”里，此次的新 “冠军”居然是一个命令行工具。下面就是此次报告的主要部分，快一起来看看吧！</p>
<h3>最受欢迎项目</h3>
<p data-pid="Fz7gv_MA">Top10</p>
<img src="https://picx.zhimg.com/v2-e23a9a5dc973e6960ec19964990f9965_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="131" data-original-token="v2-de8236849fe780a282f5872de0695245" data-original="https://picx.zhimg.com/v2-e23a9a5dc973e6960ec19964990f9965_r.jpg">
<p class="ztext-empty-paragraph"> </p>
<img src="https://pic3.zhimg.com/v2-4f71c4ec7a8947b9c67ad8e0219f6fe6_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="650" data-original-token="v2-a7fc06a49ea99d0c3ee0818b21f404cb" data-original="https://pic3.zhimg.com/v2-4f71c4ec7a8947b9c67ad8e0219f6fe6_r.jpg">
<p class="ztext-empty-paragraph"> </p>
<img src="https://pic2.zhimg.com/v2-8409bc9254582268c8b844cdb6388d4d_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="166" data-original-token="v2-d1010bd07e7d5b4c8c38ad4c155a8521" data-original="https://pic2.zhimg.com/v2-8409bc9254582268c8b844cdb6388d4d_r.jpg">
<p data-pid="MK3l_vfg">本次年度流行项目 Top10 里最受欢迎的是 zx —— 一款由谷歌推出的全新的工具，可用于以 JavaScript 或 TypeScript 编写简单的命令行脚本。基本上它可以让你在代码中嵌入任何 bash 表达式（ls, cat, git...等任何命令），并 await 使用 JavaScript 模板字符串的结果。</p>
<p data-pid="iJLslu4k">它引入了由几个流行的软件包提供的实用工具：</p>
<ul>
<li data-pid="-fLnToTj">node-fetch 与浏览器中 fetch 有着相同的 API， 可创建 HTTP 请求。</li>
<li data-pid="yqlN_dcS">fs-extra 可处理文件系统操作。</li>
<li data-pid="yON0NyZN">globby 以用户友好模式来匹配给定的文件名。</li>
</ul>
<p data-pid="2XX-5oCH">排在第二位的 Vite 是一款采用 esbuild 编译器的性能优秀的构建工具。最初创建时，它仅与 Vue.js 社区相连，但现在它已经为 React、Svelte、Lit 这些主流的 UI 框架都提供了支持。</p>
<p data-pid="29JGx0aw">排在第三位的 Next.js 依旧保持了其在 React 世界中 “元框架” 的领先地位。除了前三位，前十位里的第五名 Tauri 是一款使用 Web 技术构建桌面应用程序的解决方案。与 Electron 相比，Tauri 是用 Rust 编写的，且它不在每一个应用程序中搭载 Node.js runtime（Tauri 的 1.0 测试版刚于 5 月发布）。</p>
<p data-pid="nrj_gkZx">除了前十位，也有一些特选项目值得讨论。比如 Astro 尽管没有进入前十名，但却是今年最值得注意的项目之一。由于采用较少的 JavaScript， Astro 也因此成为了一款加载速度更快的建站工具。</p>
<p data-pid="QgU9QuM5">它的概念接近于静态网站生成（SSG），但关键的区别在于，Astro 可以让你在网页中引入被称为 “岛屿” 的动态互动部分。</p>
<p data-pid="mLi_Ox64">在客户端渲染动态组件时可应用不同的策略：</p>
<ul>
<li data-pid="SCojvfMI">当页面加载时</li>
<li data-pid="R4dH-NI5">当页面空闲时，如果它是一个低优先级的组件（考虑跟踪。）</li>
<li data-pid="S5GTI-ZY">当组件可见时，使用游览器 Intersection Observer API</li>
</ul>
<p data-pid="mKTpbcNn">最厉害的部分之一是 Astro 页面可以用任何框架（React、Vue.js 或 Svelte...）编写的 HTML 和组件来进行组合构建。</p>
<h3>前端框架</h3>
<img src="https://pic4.zhimg.com/v2-a8ed311e89cd12965cbcaf9daa4e4531_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="427" data-original-token="v2-a0d5a6aa9c809d4a24f2706fe50c7bbf" data-original="https://pic4.zhimg.com/v2-a8ed311e89cd12965cbcaf9daa4e4531_r.jpg">
<p data-pid="mUY1pc-i">此次报告结果中，“前端框架”一栏里的排名前五分别是：React，Vue.js，Svelte，Angular，Solid。</p>
<p data-pid="ue1EmVK_">其中，排名第一的 React ，是“JavaScript Rising Stars "活动评选以来首次被评为头号 UI 框架的项目，但考虑到 Vue.js 被分成了两个仓库（第二和第三版本），所以实际上 Vue.js 才是第一名。</p>
<p data-pid="YZ28qa5q">本次”前段框架“一栏排名最大的变化是 Svelte 的崛起，它超越 Angular 占据第三位。如今，已有越来越多的工具或组件将 Svelte 纳入目标框架中（如 Vite）。</p>
<p data-pid="ejMOEvfi">此前关于“Svelte 的创造者 Rich Harris 正在加入 Next.js 背后的 Vercel 团队”的重磅新闻相信大家都有所耳闻。与 Next.js 一样，Svelte 也有自己的元框架来构建高性能的应用程序：SvelteKit。</p>
<p data-pid="xAQRb_rC">排在第五名的 Solid —— 一款 React 有趣的替代品，其组件是用 JSX 编写的，但它不像 React 那样依赖虚拟 DOM。</p>
<p data-pid="syvlKFav">值得注意的是，Solid 的出现也启发了 Mitosis，后者一个针对任何框架（React, Vue.js, Angular, Svelte...）编写和编译组件的工具。</p>
<h3>Node.js 框架</h3>
<p data-pid="3JTNF4FD">本次榜单的“Node.js 框架”一栏里，排名前五的项目分别是 Next.js，Nest，Strapi，Remix，Nuxt。</p>
<img src="https://pic3.zhimg.com/v2-0659ca016f408b3037a4e9467062af4a_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="417" data-original-token="v2-eff245c85ab8df78491c1d748dc2f14a" data-original="https://pic3.zhimg.com/v2-0659ca016f408b3037a4e9467062af4a_r.jpg">
<p data-pid="eCMsBwDV">一般而言，主要的 UI 框架都有自己的 “元框架” 来构建现代和可扩展的应用程序，提供诸如路由、服务器端渲染、提前静态生成页面、为生产优化构建...等功能。</p>
<ul>
<li data-pid="nzq27Hvq">React 的 Next.js，是这个类别的冠军，也可以说是这个领域的先驱者</li>
<li data-pid="ZIcPFils">Vue.js 的 Nuxt，现在分为 Vue.js v2 和 v3 两个版本</li>
<li data-pid="X59FSXHj">Svelte 也有 SvelteKit</li>
</ul>
<p data-pid="0V6p9niC">如排在第四的 Remix 就是一款构建 React 应用的全栈框架。作为该类别中的新秀，Remix 也是今年最“有故事”的项目之一，因为它是由 React Router 的作者创建的，在 10 月之前，它只对付费支持者开放。</p>
<p data-pid="VXB-y9ty">Remix 项目自公开以来得到了很多助力，其座右铭很明确：“Web 基础，现代用户体验”，因为它的 API 尽可能遵循 web 标准（HTTP响应，表单提交...）。</p>
<p data-pid="yNZbjI8m">除了这些元框架，在第二位的 Nest 是更传统的服务器端 Node.js 框架的领导者，不与任何 UI 库相联系。</p>
<p data-pid="UWra2kLm">而排在第三位的 Strapi 像是个 “无头 CMS” 的领导者，就是那些提供丰富的仪表盘让用户管理数据和现代 API 让开发者从数据中建立任何东西的应用程序（最新版本提供了一个建立在 React 组件库之上的设计系统）。</p>
<h3>构建工具</h3>
<p data-pid="vRfk45iq">在“构建工具”一项里，排名前五的分别为：Vite，esbuild，swc，Turborepo，Nx。</p>
<img src="https://pic4.zhimg.com/v2-a82caf292a1853d0d577645c83d736a7_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="436" data-original-token="v2-f9ecb1b336fa3873f2bd7c7196c5d4f0" data-original="https://pic4.zhimg.com/v2-a82caf292a1853d0d577645c83d736a7_r.jpg">
<p data-pid="gs-EuiSc">刚刚过去的 2021 年里，一些显现的趋势更进一步在发展。比如对原生 ES 模块的接纳仍在持续，而 Vite 也已被广泛采用（比 snowpack 更快），引领了一个新的工具生态系统（如 Vitest —— 一款基于 ES 的现代测试框架）。ES 模块也在 Node.js 生态系统中逐渐被接纳，TypeScript 甚至在 Node.js 中推迟了对 ES 模块的支持。</p>
<p data-pid="7WidQXrx">知名开发者 Lee Robinson 曾称“Rust 是 JavaScript 基础设施的未来”。Rust 特别有趣，因为它既有很好的性能，又与 JavaScript 有互操作性。NAPI-RS允许 JavaScript 和 Rust 在没有任何序列化成本的情况下相互通信。而 Next.js 正押注 SWC（一款可扩展的 Rust 编译器，允许他们将最流行的 Babel 插件移植到 Rust）。</p>
<p data-pid="tIGOZujA">Parcel2 已经发布了一个新的 Rust 编译器。Rome 工具链也正在用 Rust 重写，但其创始人之一Jamie Kyle 刚悄无声息地离开了公司。</p>
<p data-pid="herXkTIt">Rust 显然是一款领先的非 JS 语言，但它并不是唯一提供出色性能的语言。Bun 是用 Zig 语言写的，该项里排名第四的 Turborepo 和排名第二的 esbuild 是用 Go 语言写的。值得注意的是，Evan Wallace 离开了 Figma：这可能让他有更多的时间来研究 esbuild。</p>
<p data-pid="AxMGUCAP">在 monorepo 领域，Lerna 仍然被广泛使用，但维护得不是很好。而 Nx 则是一个有助于大幅减少构建时间的单引擎工具，一直在快速增长。其较新的竞争者Turborepo 在被 Vercel 收购后受益于巨大的营销。</p>
<h3>Vue 生态圈</h3>
<p data-pid="rVAqNLrY">在 Vue 生态圈“一项里，排名前五的分别是：Slidev，Vue Element Admin，</p>
<p data-pid="_YseIG6T">Headless UI，Naive UI，vue-next。</p>
<img src="https://pic2.zhimg.com/v2-37783f849e7265e39ee17397bf8a4eed_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="417" data-original-token="v2-938366c181cd2ee5c860460e2522a0bd" data-original="https://pic2.zhimg.com/v2-37783f849e7265e39ee17397bf8a4eed_r.jpg">
<p data-pid="zxAo-aHu">在 Vue 3 正式发布一年后，我们看到这个生态系统正伴随着许多伟大的创新迅速发展。如 Vue 3 核心中的 <script setup>，将组件创作的体验提升到一个新的水平；新的 VS Code 扩展 Volar 为 Vue 带来了一流的 TypeScript 支持；以 Composition API 为基础建立的新状态管理器 Pinia 成为 Vuex 的继承者。</p>
<p data-pid="ZNKVQjso">随着 Vite 成为 Vue 新的默认工具，Nuxt 3、Quasar 和 VitePress 等元框架现在都使用 Vite 作为其默认引擎，让开发者体验有了巨大的改进的同时，也为创新打开了许多新的大门。</p>
<p data-pid="Fo1zDu1H">同时，社区也在调整 Vue2 到 Vue3 的开发者体验上付出了许多努力，使迁移过程更加顺利。对于 Vue 开发者来说，这是伟大的一年，他们的应用在开发者体验和性能方面都得到了巨大的改善，期待看到 2022 年的更进一步发展。</p>
<h3>React 生态圈</h3>
<p data-pid="cJSPXG5U">在”React 生态圈“一项里，我们看到排名前五的分别为：Next.js，Ant Design，MUI (Material UI)，Remix，react-use。</p>
<img src="https://pic1.zhimg.com/v2-99d6959c6fc499f5fc93b60d2f779638_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="425" data-original-token="v2-9772c0efa8a7ae68e4e86a0da67b8a6f" data-original="https://pic1.zhimg.com/v2-99d6959c6fc499f5fc93b60d2f779638_r.jpg">
<p data-pid="KYFvV-Km">随着 React 18 即将发布，现在已经可以使用 RC 版，并从一些开箱即用的改进中获益，比如自动批处理以减少渲染或 SSR 对 Suspense 的支持。</p>
<p data-pid="rFRj7v8W">React 18 增加了期待已久的并发渲染器和对 Suspense 的更新，但没有任何重大的突破性变化。</p>
<p data-pid="VqDuR_Hs">React 继续发力于浏览器和服务端，而且在 React Native 的多平台愿景下，它正变得无处不在。</p>
<p data-pid="3sBgRlVZ">最后，我们也将后续几个类如 CSS in JavaScript、测试框架、移动开发、桌面开发、静态网站生成器、状态管理，GraphQL 里的明星项目榜单一一列出：</p>
<p data-pid="ti5VWQpF">CSS in JavaScript：</p>
<img src="https://pic1.zhimg.com/v2-1d041e32d1e911d3a6f5a8fb3dd6373e_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="496" data-original-token="v2-7c5396d1d28fe115c0ee24332562a1d6" data-original="https://pic1.zhimg.com/v2-1d041e32d1e911d3a6f5a8fb3dd6373e_r.jpg">
<p data-pid="C7wIyEeP">排名前五分别是 vanilla-extract，Styled，Components，Stitches，Twin，Emotion。</p>
<p data-pid="e4QMYyM-">测试框架：</p>
<img src="https://pic1.zhimg.com/v2-fbcfd522e808354f9df0431ef08bad86_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="482" data-original-token="v2-04a311ecfb373abcdb4e543581727310" data-original="https://pic1.zhimg.com/v2-fbcfd522e808354f9df0431ef08bad86_r.jpg">
<p data-pid="preQnVdp">排名前五分别是 Playwright，Storybook，Cypress，Puppeteer，Jest。</p>
<p data-pid="dQGmjLNT">移动开发：</p>
<img src="https://pic4.zhimg.com/v2-2bc5c552ca86874ef24046d647525e69_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="458" data-original-token="v2-b4bb479cbbceef883a17702ff364810b" data-original="https://pic4.zhimg.com/v2-2bc5c552ca86874ef24046d647525e69_r.jpg">
<p data-pid="IL6C-F4M">排名前五分别是 React Native，Ionic，Expo，Quasar，Flipper。</p>
<p data-pid="gm3DbwKH">桌面开发：</p>
<img src="https://pic3.zhimg.com/v2-f053711195c560038b9a89ffad90f530_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="496" data-original-token="v2-0a2799df4fed6569b67983d92f0958eb" data-original="https://pic3.zhimg.com/v2-f053711195c560038b9a89ffad90f530_r.jpg">
<p data-pid="S_nwOsio">排名前五分别是 Tauri，Electron，Svelte NodeGUI，NodeGUI</p>
<p data-pid="5QwV26Di">，Neutralino。</p>
<p data-pid="LNktYeO8">静态网站生成器：</p>
<img src="https://pica.zhimg.com/v2-0d8571c267c0637e5db51ee74469ad4a_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="494" data-original-token="v2-c31f1c37ed3edd7ee851ed72ff62d43c" data-original="https://pica.zhimg.com/v2-0d8571c267c0637e5db51ee74469ad4a_r.jpg">
<p data-pid="lCJT_C2I">排名前五分别是 Next.js，Astro，Docusaurus，Nuxt，Nuxt 3。</p>
<p data-pid="p8TFH5Io">状态管理：</p>
<img src="https://pic2.zhimg.com/v2-171b50beb7c7f03fad7dc9b16d9ba67f_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="500" data-original-token="v2-6ce6c095e5bd544ba9f511c3b8ae8330" data-original="https://pic2.zhimg.com/v2-171b50beb7c7f03fad7dc9b16d9ba67f_r.jpg">
<p data-pid="yQfRJsHZ">排名前五分别是 Zustand，XState，Jotai，Recoil，Pinia。</p>
<p data-pid="TSVRVTa1">GraphQL：</p>
<img src="https://pic3.zhimg.com/v2-50791f3476b00dcff226c180a67a0b32_1440w.jpg" width="732" class="origin_image zh-lightbox-thumb" data-caption="" data-size="normal" data-rawwidth="732" data-rawheight="502" data-original-token="v2-c3995ea5df89f723b63622e425fddc79" data-original="https://pic3.zhimg.com/v2-50791f3476b00dcff226c180a67a0b32_r.jpg">
<p data-pid="w6dpXdGK">排名前五分别是 Prisma，Hasura GraphQL Engine，Redwood，Gatsby，GraphQL Code Generator。</p>
<p data-pid="WtC5sUtw">综述：</p>
<p data-pid="0I9u-tTJ">为了构建现代网站和应用程序，我们似乎已经进入了元框架的时代：Next.js、Nuxt、SvelteKit......以及前景广阔的新秀 Remix。</p>
<p data-pid="VeahMJzL">如今，更有许多 JavaScript 社区的知名成员加入了科技公司，如 Kent C. Dodds 加入了 Remix 团队，Svelte 创建者的 Rich Harris 及 Turborepo 创始人 Jared Palmer 均加入了 Vercel......越来越多的优秀的创作者共同从事这些解决方案的工作。</p>
<p data-pid="KorQyyXI">正如 Lee Robinson 放出豪言：Rust 是 JavaScript 基础设施的未来。关于工具，对速度的需求导致了对 Rust 和 Go 等语言的转变，而非 JavaScript。</p>
<p data-pid="QrySTvwa">作为 2021 年的一个重要主题，无服务器功能及边缘计算被人们常常谈起，这里就有 Vercel Edge Functions、CloudFlare Workers 或 Netlify Edge 等解决方案，在靠近用户的地方运行后端代码。如 Next.js 或 Remix 这样的元框架恰好就利用了边缘计算的优势，使 React 应用程序中后端代码的整合变得轻而易举。</p>
<p data-pid="qwmy4aT_">让我们大胆预测一下，2022 年会不会是一个进入 JavaScript 全栈应用的鼎盛年份呢？如果您有相关看法，也欢迎在评论区交流互动。</p>
<p data-pid="jpGntR1O">点击查看完整报告：<span class="invisible">https://<span class="visible">risingstars.js.org/2021</span></span></p>
</div>
</div>
</div>
</div>
</div>
<div id="MySignature" role="contentinfo">
漫思<br><br>
来源：https://www.cnblogs.com/sexintercourse/p/18811792
頁:
[1]