sorrycc/awesome-javascript · 上手攻略
- 仓库：sorrycc/awesome-javascript
- 链接：https://github.com/sorrycc/awesome-javascript
- 分类：skill
- 作者：Jay
- 更新：2026-07-14
这是什么
awesome-javascript 是由前端知名技术博主 sorrycc（子溯）维护的 JavaScript 库精选列表，目前 GitHub 星标 35,000+，是前端领域最有影响力的 awesome 系列清单之一。
它的本质是一份分类清晰、精选校对过的浏览器端 JavaScript 资源目录，覆盖从包管理器、模块加载器、构建工具，到框架、UI 组件、可视化、测试、安全等数十个分类，总计收录数百个优质开源项目。每个分类下列出代表性库的名字和一句话介绍，适合快速了解某个领域有哪些主流选择，以及它们各自的特点。
这不是一个库，而是一张前端生态地图。
解决什么问题
前端生态极其庞大，任何一个细分领域（如图库、状态管理、日期处理、UI 框架）都有数十个候选库。awesome-javascript 帮你解决：
- 快速了解某个领域有哪些库：比如"我要做国际化，有哪些选择？"——翻一下 i18n 章节就知道了
- 筛选靠谱库：列表经过维护者筛选，收录的库大多是有活跃社区的主流选择，减少踩坑概率
- 追踪生态演进：每个分类都是一个小型技术调研报告，可以看到从 jQuery 时代到 React 时代再到今天的工具链演变
快速上手
这个仓库本身不需要安装，使用方式就是阅读。
# 直接 clone 下来本地查阅
git clone https://github.com/sorrycc/awesome-javascript.git
cd awesome-javascript
# 用任意 Markdown 阅读器打开
# 推荐：Typora / VS Code + Markdown Preview / Obsidian
或者直接点 GitHub 链接在线阅读，配合目录跳转使用体验最好。
核心内容速览
以下是各分类的核心库速查（按仓库原文顺序，精选代表性条目）：
包管理与构建
| 分类 | 代表库 |
|---|---|
| 包管理器 | npm, yarn, pnpm, bun, jspm |
| 模块加载器 | RequireJS, browserify, SeaJS, SystemJS, ESM |
| 打包构建 | webpack, Rollup, Parcel, Vite, Snowpack, Brunch |
| 转译/压缩 | SWC, Terser, UglifyJS, Babel（已更名为@babel） |
注意：Babel 官方已将项目重命名为
@babel，很多地方"Babel"这个名字仍在使用，但 npm 包已迁移。如搜索babel-preset-env应改为对应的新 preset 名称，建议直接查 babel.dev。
类型与质量
| 分类 | 代表库 |
|---|---|
| 类型检查 | TypeScript, Flow.js, Zod（schema 验证）, Yup |
| 代码格式化 | Prettier, ESLint, StandardJS |
| 测试框架 | Jest, Mocha, Ava, Tape, Cypress, Playwright, Puppeteer, TestCafe |
| 测试断言 | Chai, Sinon, Enzyme（React）, react-testing-library |
Cypress vs Playwright：两者都是现代 E2E 测试框架，Cypress 生态更成熟但只支持 Chromium；Playwright 支持 Chromium / Firefox / WebKit 三引擎，且微软背书，2024 年后新项目选择 Playwright 的越来越多。
框架与 UI
| 分类 | 代表库 |
|---|---|
| 全栈框架 | Next.js（React）, Nuxt（Vue）, SvelteKit, Remix |
| UI 库 | React, Vue, Svelte, Angular, Alpine.js, Inferno, Preact |
| 状态管理 | Redux, MobX, Zustand, Pinia, Recoil, Jotai |
| 响应式 | RxJS, xstream, Flyd, Bacon.js |
数据可视化与图形
| 分类 | 代表库 |
|---|---|
| 图表 | ECharts, D3.js, Chart.js, ApexCharts, AntV（G2/F2/X6） |
| 图形/游戏 | Three.js, PixiJS, Babylon.js, Phaser |
| GIS 地图 | Leaflet, OpenLayers, Mapbox GL JS |
图表选型建议：快速简单仪表盘 → Chart.js；复杂定制可视化 → D3.js；中国区项目 → ECharts / AntV（文档中文、生态好）；3D 可视化 → Three.js。
工具类
| 分类 | 代表库 |
|---|---|
| 日期时间 | Day.js, date-fns, Luxon, Moment.js（已停止维护，不推荐新项目） |
| 字符串/正则 | lodash, Underscore.js, string.js |
| 函数式 | lodash, Ramda, immutable.js |
| HTTP 请求 | axios, ky, got, superagent |
| 存储 | localForage, Dexie.js（IndexedDB 封装） |
| 颜色 | chroma-js, color, tinycolor2 |
| i18n | i18next, react-intl, lingui.js |
| 验证 | Yup, Zod, joi |
| 文档生成 | JSDoc, TypeDoc, Storybook |
Generative AI（近年新增分类）
仓库中收录了与 AI 相关的 JavaScript 工具：
- Vercel AI SDK：ai 包，支持主流 LLM 提供商的流式调用
- LangChain.js：LLM 应用开发框架的 JS 版
- OpenAI Node SDK：OpenAI 官方 Node.js SDK
⚠️ Generative AI 部分内容相对较新，可能存在收录不全的情况，建议同时参考各项目官方文档。
典型适用场景
| 场景 | 推荐操作 |
|---|---|
| 新项目技术选型 | 按分类找主流选项，对比后做决策 |
| 学习某个领域 | 按分类逐条阅读，了解该领域完整生态图景 |
| 技术分享/文章调研 | 直接引用分类清单，快速建立内容覆盖面 |
| 找不到某个功能的库 | 在对应分类下搜索，一行一行的列表不会错过 |
| 了解前端工具演进历史 | 看目录底部的 Timeline 章节 |
坑与注意
-
这是列表，不是文档：awesome-javascript 只告诉你"有什么库"，不教你"怎么用"。学会还是要去看对应库的官方文档。
-
部分库已过时或废弃：列表收录历史跨度大，有些库（如 Moment.js、PhantomJS、Backbone）在当时是主流但现在已不推荐新项目使用。维护者会打标签或说明，但阅读时需保持判断力。
-
Babel 已更名：很多地方"Babel"仍在用，但 npm 包已迁移到
@babel/*。遇到babel-preset-env等旧包名时，实际应查新命名，避免安装已弃用的包。 -
GitHub 页面较慢时用本地阅读：目录条目很多，在 GitHub 网页加载较慢，可以 clone 下来用本地 Markdown 编辑器阅读，配合全局搜索体验更好。
-
维护者风格决定内容倾向：sorrycc 是中文技术社区知名博主，列表对中文友好的库（ECharts、AntV、SeaJS 等）收录较为完整，但整体偏向个人审美，有自己的精选标准，不代表"唯一正确"。
-
awesome 系列都有的通病：列表会越来越长，维护频率决定了质量天花板。如果发现某个分类特别陈旧，那个分类可能就缺人维护了。
与同类对比
| 清单 | 侧重点 | 规模 | 维护状态 |
|---|---|---|---|
| awesome-javascript | 浏览器端 JS 库 | ★★★★★（极大） | 活跃 |
| javascript-algorithms | 算法与数据结构实现 | ★★★ | 活跃 |
| You-Dont-Know-JS | JS 语言深度系列 | ★★★★ | 活跃（书籍） |
| awesome-react | React 生态 | ★★★★ | 活跃 |
| frontend-dev-bookmarks | 前端开发者资源导航 | ★★★★ | 一般 |
awesome-javascript 是覆盖面最广的浏览器端 JS 清单，特点是广而浅，适合找方向；其他列表更垂直，适合找深度。
一句话结论
awesome-javascript 是前端开发者必备的生态地图——不管你是想了解某个领域有什么选择，还是做技术选型时快速扫盲，这份 35k+ stars 的清单都是最高效的起点。收藏它，别收藏一堆零散的书签。