这些开源项目，让你轻松应对十大工做场景

俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优秀的开源项目，利用这些开源项目，你将能能轻松应对如下十个工做场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5 页面设计器、文档管理和 API 管理。前端

阅读阿宝哥近期热门文章（感谢掘友的鼓励与支持🌹🌹🌹）：vue

77.9K Star 的 Axios 项目有哪些值得借鉴的地方（1018+ 个👍）
使用这些思路与技巧，我读懂了多个优秀的开源项目（724+ 个👍）
这些高阶的函数技术，你掌握了么（629+ 个👍）

文件上传

uppy

The next open source file uploader for web browsers 🐶node

github.com/transloadit…react

uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，能够无缝地与任何应用程序集成。它速度快，使用方便，可让你专一比构建文件上传器更重要的问题。该库拥有如下特性：ios

支持 I18n 及可访问性；
轻量，基于模块化的插件架构，可按需加载；
经过开放的 tus 标准，可恢复文件上传，能够解决上传过程当中网络故障的问题。

filepond

🌊 A flexible and fun JavaScript file upload librarygit

github.com/pqina/filep…github

filepond 是一个 JavaScript 库，能够上传你扔给它的任何内容，优化图像以加快上传速度，并提供出色的，可访问的，柔滑的用户体验。该库拥有如下特性：web

接受目录，文件，Blobs，本地 URL，远程 URL 和 Data URIs；
图像优化，自动调整图像大小，支持裁剪，过滤和修复 EXIF 方向；
支持拖拽文件，从文件系统选择文件，复制和粘贴文件或使用 API 添加文件；
使用 AJAX 进行异步上传，支持分块上传，能够将文件编码为 base64 数据，并能够经过表单提交。

✨ 扩展阅读 ✨数据库

关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 50 几篇 “重学TS” 教程。json

图片处理

tui.image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

github.com/nhn/tui.ima…

tui.image-editor 是使用 HTML5 Canvas 的全功能图像编辑器。它易于使用，并提供强大的过滤器。同时它支持对图像进行裁剪、翻转、旋转、绘图、形状、文本、遮罩和图片过滤等操做。该库的浏览器兼容状况以下：

Chrome
Edge
Safari
Firefox
IE 10+

cropperjs

JavaScript image cropper.

github.com/fengyuanche…

Cropper.js 是一款很是强大却又简单的图片裁剪工具，它能够进行很是灵活的配置，支持手机端使用，支持包括 IE9 以上的现代浏览器。它能够用于知足诸如裁剪头像上传、商品图片编辑之类的需求。该库拥有如下特性：

支持 39 个配置选项；
支持 27 个方法；
支持 6 种事件；
支持 touch（移动端）；
支持缩放、旋转和翻转；
支持在画布上裁剪；
支持在浏览器端经过画布裁剪图像；
支持处理 Exif 方向信息；
跨浏览器支持。

✨ 扩展阅读 ✨

文档处理

kkFileView

使用 Spring Boot 打造文件文档在线预览项目解决方案，支持 doc、docx、ppt、pptx、xls 等文件在线预览。

github.com/kekingcn/kk…

kkFileView 为文件文档在线预览解决方案，该项目使用流行的 Spring Boot 搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc，docx，xls，xlsx，ppt，pptx，pdf，txt，zip，rar，图片，视频，音频等等。该库拥有如下特性：

一键部署，快速接入：支持 Windows、Linux 平台一键部署，两行 JS 代码就能够接入预览；
支持常见文件格式，兼容新版 Office 文档：支持文本、图片、Office 文档、WPS 文档、PDF、视频、音频、压缩包等常见文件类型预览；
支持多种预览模式灵活切换：支持 PDF、懒加载分页图、轮播图片等预览模式动态配置、灵活切换；
独立部署，提供 Restful 接口，适用于微服务场景：独立于业务系统外，提供 Restful Http 接口，开发语言无关，微服务场景下直接提供在线预览服务。

Luckysheet

Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

github.com/mengshukeji…

Luckysheet ，一款纯前端相似 excel 的在线表格，功能强大、配置简单、彻底开源。该库拥有如下特性：

格式设置：样式、条件格式、文本对齐及旋转、支持文本的截断、溢出、自动换行和单元格多样式；
单元格：拖拽选取来修改单元格、选取下拉填充、自动填充选项、多选区操做、查找与替换和合并单元格；
操做体验：撤销/重作、复制/粘贴/剪切操做、快捷键支持和格式刷；
公式和函数：内置公式、公式支持数组、远程公式和自定义公式；
数据透视图：字段拖拽、聚合方式、筛选数据和数据透视表下钻。

✨ 扩展阅读 ✨

在前端如何玩转 Word 文档

网络请求

Axios

Promise based HTTP client for the browser and node.js

github.com/axios/axios

Axios 是一个基于 Promise 的 HTTP 客户端，该库拥有如下特性：

支持 Promise API；
可以拦截请求和响应；
可以转换请求和响应数据；
客户端支持防护 CSRF 攻击；
同时支持浏览器和 Node.js 环境；
可以取消请求及自动转换 JSON 数据。

react-query

⚛️ Hooks for fetching, caching and updating asynchronous data in React

github.com/tannerlinsl…

react-query 是一个用在 React 项目中，用于获取、缓存和更新异步数据的钩子。该库拥有如下特性：

多层缓存 + 自动垃圾回收；
支持分页和基于游标的查询；
支持加载更多、无限滚动查询和滚动恢复；
自动缓存 + 从新获取（从新验证时有效，窗口从新聚焦，轮询/实时）。

✨ 扩展阅读 ✨

77.9K 的 Axios 项目有哪些值得借鉴的地方

数据存储

PouchDB

🐨 - PouchDB is a pocket-sized database.

github.com/pouchdb/pou…

PouchDB 是一个浏览器内数据库，容许应用程序在本地保存数据，以便用户即便在离线时也能够享受应用程序的全部功能。另外，数据在客户端之间是同步的，所以用户能够随时随地保持最新状态。

PouchDB 也在 Node.js 中运行，能够用做与 CouchDB 兼容的服务器的直接接口。该 API 在每一个环境中工做都是相同的，所以你能够花更少的时间来担忧浏览器的差别，而花更多的时间来编写干净、一致的代码。

PouchDB 支持全部现代浏览器：

Firefox 29+ (Including Firefox OS and Firefox for Android)
Chrome 30+
Safari 5+
Internet Explorer 10+
Opera 21+
Android 4.0+
iOS 7.1+
Windows Phone 8+

PouchDB 在幕后使用 IndexedDB，若当前环境不支持 IndexedDB 则回退到 Web SQL。

Rxdb

💻 🔄 📱 A realtime Database for JavaScript Applications.

github.com/pubkey/rxdb

RxDB（Reactive Database 的缩写）是 NoSQL 数据库，用于 JavaScript 应用程序，如网站，混合应用程序，Electron Apps，Progressive Web Apps 和 Node.js。响应式意味着你不只能够查询当前状态，还能够订阅全部状态更改，好比查询的结果或文档的单个字段。

RxDB 支持如下特性：

Mango-Query：支持 mquery API 从集合中获取数据，支持链式的 mongoDB 查询风格。
Replication：由于 RxDB 依赖于 PouchDB，所以很容易实现终端设备与服务器之间的数据同步。
Reactive：RxDB 使得同步 DOM 的状态变得很简单。
MultiWindow/Tab：当 RxDB 的两个实例使用相同的存储引擎，它们的状态和操做流将会被广播。这意味着对于两个浏览器窗口，窗口 #1 的数据变化也会自动影响窗口 #2 的数据状态。
Schema：经过 jsonschema 来定义 Schemas，它们用来描述数据格式。
Encryption：经过将模式字段设置为encrypted，该字段的值将以加密模式存储，没有密码就没法读取。

✨ 扩展阅读 ✨

前端存储除了 localStorage 还有啥

微前端

qiankun

📦 🚀 Blazing fast, simple and completed solution for micro frontends.

github.com/umijs/qiank…

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助你们能更简单、无痛的构建一个生产可用微前端架构系统。目前 qiankun 已在蚂蚁内部服务了超过 200+ 线上应用，在易用性及完备性上，绝对是值得信赖的。

该库拥有如下特性：

📦 基于 single-spa 封装，提供了更加开箱即用的 API；
📱 技术栈无关，任意技术栈的应用都可使用/接入，不管是 React/Vue/Angular/JQuery 仍是其余等框架；
💪 HTML Entry 接入方式，让你接入微应用像使用 iframe 同样简单；
🛡 样式隔离，确保微应用之间样式互相不干扰；
🧳 JS 沙箱，确保微应用之间全局变量/事件不冲突；
⚡️ 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度；
🔌 umi 插件，提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。

single-spa

The router for easy microfrontends

github.com/single-spa/…

Single-spa 是一个将多个单页面应用聚合为一个总体应用的 JavaScript 微前端框架。使用 single-spa 进行前端架构设计能够带来不少好处，例如：

独立部署每个单页面应用；
改善初始加载时间，迟加载代码；
新功能使用新框架，旧的单页应用不用重写能够共存；
在同一页面上使用多个前端框架而不用刷新页面 (React，AngularJS，Angular，Ember 等)。

✨ 扩展阅读 ✨

最全微前端集合

表单设计器

form-generator

✨Element UI 表单设计及代码生成器

github.com/JakHuang/fo…

form-render

🚴‍♀️ 易用的跨组件体系的表单渲染引擎 - 经过 JSON Schema 快速生成自定义表单配置界面

github.com/alibaba/for…

H5 页面设计器

gods-pen

基于 vue 的高扩展在线网页制做平台，可自定义组件，可添加脚本，可数据统计。

github.com/ymm-tech/go…

luban-h5

相似易企秀的 H5 制做、建站工具、可视化搭建系统.

github.com/ly525/luban…

文档管理

storybook

📓 The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!

github.com/storybookjs…

Storybook 是一个 UI 组件的开发环境。它容许你可以浏览一个组件库，查看每一个组件的不一样状态，以及支持交互式的方式开发和测试组件。

Storybook 在你的应用程序以外运行。这容许你可以独立的开发 UI 组件，你能够提升组件的可重用性、可测试性和开发速度。你能够快速构建，而无需担忧应用程序特定的依赖项。

TypeDoc

Documentation generator for TypeScript projects.

在线地址：typedoc.org/

TypeDoc 用于将 TypeScript 源代码中的注释转换为 HTML 文档或 JSON 模型。它可灵活扩展，并支持多种配置。

API 管理

yapi

YApi 是一个可本地部署的、打通先后端及QA的、可视化的接口管理平台

github.com/ymfe/yapi

YApi 是高效、易用、功能强大的 api 管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。能够帮助开发者轻松建立、发布、维护 API，YApi 还为用户提供了优秀的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简单的点击操做就能够实现接口的管理。

该项目拥有如下特性：

基于 Json5 和 Mockjs 定义接口返回数据的结构和文档，效率提高多倍；
扁平化权限设计，即保证了大型企业级项目的管理，又保证了易用性；
相似 Postman 的接口调试；
自动化测试, 支持对 Response 断言；
MockServer 除支持普通的随机 mock 外，还增长了 Mock 指望功能，根据设置的请求过滤规则，返回指望数据；
支持 postman, har, swagger 数据导入；
免费开源，内网部署，信息不再怕泄露了。

APIJSON

🏆码云最有价值开源项目 🚀后端接口和文档自动化，前端(客户端) 定制返回 JSON 的数据和结构！

github.com/Tencent/API…

APIJSON 是一种专为 API 而生的 JSON 网络传输协议以及基于这套协议实现的 ORM 库。APIJSON 为 “简单的增删改查、复杂的查询、简单的事务操做” 提供了彻底自动化的 API，能大幅下降开发和沟通成本，简化开发流程，缩短开发周期。它适合中小型先后端分离的项目，尤为是 BaaS、Serverless、互联网创业项目和企业自用项目。

该项目拥有如下特性：

经过自动化API，前端能够定制任何数据、任何结构！
大部分 HTTP 请求后端不再用写接口了，更不用写文档了！
前端不再用和后端沟通接口或文档问题了！不再会被文档各类错误坑了！
后端不再用为了兼容旧接口写新版接口和文档了！不再会被前端随时随地没完没了地烦了！

关注「全栈修仙之路」阅读阿宝哥原创的 3 本免费电子书（累计下载近2万）及 7 篇源码分析系列教程。

本文阿宝哥介绍了可应对十大工做场景的开源项目，但愿对你们能有所帮助或启发。若是你有其余好的开源项目，欢迎留言推荐给阿宝哥哟。