awesome-frontend：前端开发者的工具箱

awesome-frontend：前端开发者的工具箱

做前端开发，最头疼的事情之一就是选型。UI 框架用哪个？图表库选哪家？轮播组件哪个好用？每次开新项目，都要花大量时间在各个仓库之间来回对比。

GitHub 上有一个仓库，专门解决这个问题。JingwenTian 维护的 awesome-frontend，目前收获了 1730 个 Star，把前端开发中常用的工具、库、框架全部整理到了一起。从构建工具到 UI 组件，从动画库到图表绘制，基本涵盖了日常开发的方方面面。

覆盖范围

这个仓库的分类很细，总共列了二十多个大类。每个大类下面还有子分类，比如表单处理就拆成了验证、上传、日期选择、自动完成等九个子类。

前端自动化部分收录了 Webpack、Gulp、Grunt 这些构建工具，还有 Bower、RequireJS 等模块管理器。UI 框架覆盖了 Bootstrap、Foundation、Semantic UI、Material UI 等主流方案，也包括国内团队做的 Layui、MUI、Amaze UI。

JavaScript 框架这块，React、Angular、Vue 三大框架都有收录，每个框架下面还列出了对应的 UI 组件库。比如 React 配 ant-design，Vue 配 Element、iView、Vuetify，方便开发者快速找到配套方案。

移动端优先

从仓库的定位来看，作者强调的是移动优先。收录的框架和组件大多考虑了移动端场景。比如混合开发框架里有 Electron、React Native、Weex、Flutter，微信小程序开发库也单独列了一类，包含 wepy、Taro、uni-app、vant-weapp 等。

适配方案部分有手淘的 lib-flexible，页面交互部分有 Swiper、better-scroll 这些触屏滑动组件，触控事件有 Hammer.js。这些都能看出来，仓库的重点偏向移动端和跨平台开发。

实用性

仓库里的每个条目都带了链接和简短说明。说明通常是中文，一两句话讲清楚这个库是干什么的。比如 EaselJS 被描述为功能强大的 JavaScript 图形库，layzr.js 是一个小巧快速的图片懒加载库。

这种结构让查找变得方便。想找个日期选择器，直接看 10.6 节，里面有 Moment.js、Day.js、Pikaday、airbnb/react-dates 等多个选择。想找个图表库，看第 11 节，ECharts、D3.js、Chart.js、Highcharts 都在列。

有些条目还标注了出处。比如 GMU 标注了来自百度，FrozenUI 标注了来自腾讯，AlloyFinger 标注了来自腾讯 AlloyTeam。这对评估库的可靠性有帮助。

混合开发与跨平台

除了传统的 Web 开发，这个仓库还覆盖了不少跨平台方案。Electron 可以用 Web 技术做桌面应用，React Native 可以做原生移动应用，Flutter 是谷歌的跨平台框架。

微信小程序生态也在收录范围内。从腾讯官方的 weui-wxss，到组件化框架 wepy、Taro，再到各种 UI 组件库如 vant-weapp、minui，基本覆盖了小程序开发的主流工具链。

还有一类是 uni-app 和 chameleon，这两个都是"一套代码多端运行"的方案。一个基于 Vue，一个自研语法，各有侧重。

其他分类

富文本编辑器部分收录了 TinyMCE、Simditor、BachEditor 等。PDF 相关有 Mozilla 的 PDF.js 和 jsPDF。音视频播放器有 video.js、hls.js、chimee 等。

动画库部分有 animate.css、anime.js、Velocity.js，粒子特效有 particles.js。字体图标有字节跳动的 IconPark 和 Font Awesome。

本地存储部分有 localForage、pouchdb、LokiJS。模板引擎有 Handlebars、doT.js、nunjucks。通知弹框有 SweetAlert、PNotify、layer。

适合谁用

这个仓库适合几类人。刚入门前端的开发者，可以用它来了解整个生态有哪些工具。有经验的开发者，可以在开新项目时快速做技术选型。团队负责人可以用它来统一团队的技术栈。

仓库的组织方式是纯 Markdown，没有复杂的网站界面。直接在 GitHub 上就能浏览，也可以 clone 到本地离线查看。分类清晰，目录结构一目了然。

不足之处

仓库最后更新的时间需要留意。前端技术迭代快，有些库可能已经停止维护了。比如 Bower 已经不推荐使用，PhantomJS 也停止开发了。使用时需要自己判断库的活跃度。

另外，仓库主要以列表形式呈现，缺少横向对比。同一个功能类别下可能有十几个选项，但没有说明各自的优劣。开发者还需要自己做进一步调研。

总体来说，awesome-frontend 是一个内容全面的前端工具索引。它不会告诉你该用什么，但会告诉你有什么。在做技术选型时，先来这里扫一眼，能省下不少搜索时间。

是一个内容全面的前端工具索引。它不会告诉你该用什么，但会告诉你有什么。在做技术选型时，先来这里扫一眼，能省下不少搜索时间。