Skip to content

Latest commit

 

History

History
1145 lines (1013 loc) · 50.1 KB

README.md

File metadata and controls

1145 lines (1013 loc) · 50.1 KB
Raw

front-end-awesome

front-end-awesome

目录

打包工具

⬆️ 返回首页

webpack loader 和插件

⬆️ 返回首页

包管理

框架

Canvas 相关

⬆️ 返回首页

APP 相关

CSS 相关

小程序 相关

  • mpvue - 基于 Vue.js 的小程序开发框架，从底层支持 Vue.js 语法和构建工具体系
  • wepy - 小程序组件化开发框架
  • westore - 微信小程序解决方案 - 1KB javascript 覆盖状态管理、跨页通讯、插件开发和云数据库开发
  • ColorUI - 鲜亮的高饱和色彩，专注视觉的小程序组件库
  • Gitter - 采用 Taro 框架 + Taro UI 进行开发的 demo ， 可能是目前颜值最高的 GitHub 微信小程序客户端
  • Taro - 多端统一开发框架，支持用 React 的开发方式编写一次代码
  • Painter - 小程序生成图片库，轻松通过 json 方式绘制一张可以发到朋友圈的图片
  • kbone - Web 与小程序同构解决方案，微信官方

⬆️ 返回首页

其他

React 相关库

⬆️ 返回首页

Vue 相关库

UI 库

其他

⬆️ 返回首页

Flutter-相关库

⬆️ 返回首页

阿里系

  • ant-design - 蚂蚁金服的 React UI 库
  • antvis - 数据可视化集合
  • ant-motion - 动画说明和Ant设计组件
  • @umijs/hooks - React Hooks 库
  • qiankun - 为微型前端提供快速，简单和完整的解决方案
  • F2 - 一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）

工具类

⬆️ 返回首页

数据流

语言

文档

⬆️ 返回首页

工程

  • 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选择器的复杂性和性能分析器
  • jscodeshift - 源码的转换，神似通过 AST ，可用于开发 VSCode 插件，或者 Lint
  • gitattributes - 有用的 .gitattributes 模板的集合
  • concurrently - 同时运行命令

⬆️ 返回首页

编辑器

命令行

  • 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 兼容处理
  • navi - 用于命令行的交互式备忘单工具

⬆️ 返回首页

请求处理

富文本相关

⬆️ 返回首页

持续集成

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

部署

  • netlify - 在全球范围内部署
  • walle - 在全球范围内部署

在线工具

在线编程

  • jsfiddle - 在线编程，生成在线预览
  • plnkr - 在线编程，生成在线预览
  • codepen - 在线编程，生成在线预览
  • jsbin - 在线编程，生成在线预览
  • astexplorer - 在线编程，可选类型，如 ast

⬆️ 返回首页

转换

图标管理

其他在线工具

⬆️ 返回首页

代码高亮

音频/视频

⬆️ 返回首页

数据可视化库

  • 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 - 一个动态的基于浏览器的可视化库

⬆️ 返回首页

动画库

⬆️ 返回首页

数据模拟

调试工具

源码分析

其他

⬆️ 返回首页