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

文章目录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-designVue 配 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 是一个内容全面的前端工具索引。它不会告诉你该用什么但会告诉你有什么。在做技术选型时先来这里扫一眼能省下不少搜索时间。是一个内容全面的前端工具索引。它不会告诉你该用什么但会告诉你有什么。在做技术选型时先来这里扫一眼能省下不少搜索时间。