2020年的前端资源

·  阅读 4684

本文收录在 awesome-frontend 中,并将持续更新哟~

打包工具

webpack loader 和插件

包管理

框架

Canvas 相关

APP 相关

CSS 相关

小程序 相关

  • mpvue - 基于 Vue.js 的小程序开发框架,从底层支持 Vue.js 语法和构建工具体系
  • wepy - 小程序组件化开发框架
  • westore - 微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发
  • ColorUI - 鲜亮的高饱和色彩,专注视觉的小程序组件库
  • Gitter - 采用 Taro 框架 + Taro UI 进行开发的 demo , 可能是目前颜值最高的 GitHub 微信小程序客户端

⬆️ 返回首页

其他

  • react
  • vue
  • next.js
  • nuxt.js
  • gastby
  • umi - 蚂蚁金服的前端框架
  • rekit - IDE and toolkit for building scalable web applications with React, Redux and React-router
  • choo - dva 最初的 API 是参考这个实现的,已经不怎么发展了,再关注一段时间
  • taro - 用 React 写小程序,适配微信和支付宝等
  • after.js
  • mint - 提供了语言层方案的框架
  • quasar - 基于 vue,一套代码多处适用
  • Angular
  • Foundation
  • Polymer - Google发布的Web组件构建框架
  • cyclejs
  • taro - 多端统一开发框架,支持用 React 的开发方式编写一次代码

React 相关库

Vue 相关库

UI 库

其他

阿里系

工具类

数据流

语言

文档

工程

  • lerna - monorepo 管理
  • lerna-changelog - 为 lerna 项目自动生成 changelog
  • eslint - JS 风格约束
  • eslint-config-airbnb
  • xo - 封装自 eslint
  • prettier - 更主观的风格自动修改
  • yeoman-generator - 脚手架工具
  • serve - 本地静态服务器
  • servor - 另一个静态服务器
  • budo - 又一个静态服务器
  • np - npm publish 辅助,自动 push、打 tag、升版本等
  • lint-staged - eslint 提速,只 lint 提交的代码
  • coveralls - 覆盖率
  • husky - 添加 git hooks
  • cross-env - 跨平台的环境变量声明
  • projj - 本地 git 项目管理,支持 github 和 gitlab
  • nvm - 管理 node 版本
  • concurrently - 在 npm scripts 里并行执行命令
  • @zeit/ncc - 打包为 npm 包为一个文件
  • npm-check - 检测依赖升级情况,和 yarn upgrade-interactive 配合着用,主要用来检测冗余依赖
  • cpx - 复制,支持 glob,并且可以 watch
  • onchange - 监听文件变动然后做一些事
  • just - 微软出的任务管理器
  • tern - 代码分析器,为不少编辑器服务
  • analyze-css - CSS选择器的复杂性和性能分析器

编辑器

命令行

  • yargs - 命令行入口套件
  • yargs-parser - 命令行参数解析
  • chalk - 输出不同颜色
  • cheerio - 用类 jQuery 语法处理 HTML
  • chokidar - 文件监听
  • clipboardy - 复制文本到粘贴板
  • debug - 打印调试信息
  • deprecate - 给过期警告
  • glob - 文件查找
  • tiny-glob - 文件查找
  • signale - 漂亮的日志打印
  • semver - semver 版本处理
  • update-notifier - 更新提醒
  • rimraf - 删除文件
  • depd - 给出 deprecated 警告
  • execa - 比 child_process 好用,返回 Promise
  • ora - 控制命令行光标,显示 loading 等
  • inquirer - 交互式命令接口,比如 prompt
  • enquirer - 同上,更 cool 一些
  • ajv - 参数校验
  • ink - 用 React 处理命令行输出
  • figures - ✔︎ 等特殊字符,做了 windows 兼容处理

请求处理

富文本相关

持续集成

  • CircleCI
  • GitlabCi
  • appveyor - 适用于Windows和Linux的持续集成解决方案
  • Jenkins - 一个支持 PHP 的连续集成平台
  • JoliCi - 一个用 PHP 编写并由 DOCKER 供电的集成客户端
  • PHPCI - 一个开源的 PHP 连续集成平台
  • SemaphoreCI - 开源和私人项目的集成平台
  • Shippable - 一个基于 DOCKER 的开源和私有项目的连续集成平台
  • Travis CI - 持续整合平台
  • Wercker - 持续整合平台
  • snyk.io - 前端依赖检测
  • codecov.io - 测试覆盖率报告

在线工具

在线编程

  • jsfiddle - 在线编程,生成在线预览
  • plnkr - 在线编程,生成在线预览
  • codepen - 在线编程,生成在线预览
  • jsbin - 在线编程,生成在线预览

转换

图标管理

其他在线工具

代码高亮

音频/视频

数据可视化库

  • echarts - 它是用纯 JavaScript 编写的,基于 zrender 画布。它支持以画布、SVG(4.0+) 和 VML 的形式绘制图表。除了 PC 和移动浏览器外,ECharts 还可以与 node 上的 node-canvas 一起使用,以便进行高效的服务器端渲染(SSR)
  • Highcharts JS - 是一个广受欢迎的基于 SVG 的 JavaScript 图表库,针对旧的浏览器可降级到 VML 和画布。世界上最大的 100 家公司中,有 72 家公司(Facebook、Twitter 等)使用了这个库,这使得它成为世界上最流行的 JS 图表 API
  • G2
  • F2 - 移动端可视化图表
  • D3 - 可能是最流行和使用最广泛的 JavaScript 数据可视化库。D3 用于基于数据的文档操作,并使用 HTML、SVG 和 CSS 让数据活起来。它基于 Web 标准,结合现代浏览器,不需要与专有框架耦合,将可视化组件和数据驱动的方法结合到 DOM 操作上。它允许你将任意数据绑定到文档对象模型(DOM),然后在文档上应用数据转换
  • Chart.js - 一个非常受欢迎的开源 HTML5 图表库,它使用画布元素构建响应式 Web 应用。ChartJS 提供了混合图表类型,新的图表轴类型和漂亮的动画。它的设计简单而优雅,有 8 种基本的图表类型,你可以将该库与 moment.js 结合在一起使用,用于渲染时间轴
  • three.js - ThreeJS 用 WebGL 创建 3D 动画。该项目的灵活性和抽象性意味着它也可用于 2 维或 3 维的数据可视化
  • Metric-Graphics - 用于可视化和布局时间序列数据。它相对较小(80kb),提供了小而优雅的线条图、散点图、直方图、柱状图和数据表,以及地格图(rug plot)和基本线性回归等特性
  • Recharts - 是一个使用 React 和 D3 构建的图表库,可以作为声明性的 React 组件使用。该库提供原生 SVG 支持,轻量级依赖树(D3 子模块)高度可定制。官网文档中可以找到很多例子
  • Raphael - 是一个 JavaScript 矢量库,可在 Web 中绘制矢量图形。该库使用 SVG W3C 和 VML 作为创建图形的基础,因此每个图形对象也是 DOM 对象,你可以附加 JavaScript 事件处理程序。Raphael 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+
  • C3 - 是一个基于 D3 的可重用 Web 应用图表库。该库为每个元素提供了相应的类,这样你就可以通过这些类来自定义样式,并通过 D3 直接扩展结构。它还提供了多种 API 和回调来访问图表状态。借助它们,你可以更新图表,即使是已经渲染好的图标
  • React-vis - 是 Uber 开发的一系列数据可视化组件,包括线 / 面 / 柱状图、热图、散热图、等高线图、六角热图等等。使用该库不需要事先掌握 D3 或任何其他 data-vis 库的知识,并提供了低级模块化的构建块组件,如 x/y 轴
  • React virtualized - 是一组 React 组件,有效地呈现大型列表和表格数据。ES6、CommonJS 和 UMD 版本可以在每个分发版中使用,该项目支持 Webpack 4 工作流。请注意,为了避免版本冲突,必须将 react,react-dom 指定为 peer 依赖
  • Victory - 在 Web 和 React Native 应用程序中使用相同的 API,以便于跨平台绘制图表。一种优雅而灵活的方式来利用 React 组件来支持实用的数据可视化
  • CartoDB - 是一个位置智能和数据可视化工具,用于发现位置数据中的见解。你可以通过 Web 表单上传地理空间数据(Shapefiles、GeoJSON 等),并在数据集或地图上将其可视化,使用 SQL 进行搜索,并使用 CartoCSS 来应用地图样式
  • Raw - 是电子表格和数据可视化之间的连接,基于 d3.js 库创建基于向量的自定义可视化。它可以处理表格数据(电子表格和 CSV)和从其他应用程序复制和粘贴的文本。因为是 SVG 格式,所以可以使用矢量图形编辑器编辑,或直接嵌入到网页中
  • Metabase - 是一种相当快速和简单的方法,可以在不了解 SQL 的情况下创建数据仪表盘(分析师和数据专业人士可使用 SQL 模式)。你可以创建片段和度量指标,发送数据到 Slack(通过 MetaBot 在 Slack 中查看数据)等等。它可能是一个很好的工具,可用它在团队内部可视化数据,尽管可能需要做一些维护工作
  • tauCharts - 一个基于 D3 的图表库。该库提供了一个声明接口,用于将数据字段快速映射到可视化属性,它的架构允许你使用插件构建切面和扩展图表行为
  • chartist-js - 简单的响应式图表
  • semiotic - 结合了 React 和 D3 的数据可视化框架
  • nvd3 - 一个用 D3.js 编写的可重用的图表库
  • viser - 一个适合数据工程师的工具箱
  • tui.chart - 漂亮的数据可视化图表
  • datamaps - 使用 D3.js 在单个 JavaScript 件中自定义 SVG 地图可视化
  • sheetsee.js - 用于对谷歌表格的数据进行可视化
  • BizCharts - 基于 G2 和 React 的数据可视化库
  • sigma.js - 一个专门用于图形绘制的 JavaScript 库
  • incubator-echarts - 一个强大的、交互式的图表和可视化的浏览器库
  • vis - 一个动态的基于浏览器的可视化库

动画库

数据模拟

调试工具

其他

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改