共计 6197 个字符，预计需要花费 16 分钟才能阅读完成。
俗话说得好，工欲善其事必先利其器。本文阿宝哥将介绍一些优良的开源我的项目，利用这些开源我的项目，你将能能轻松应答以下十个工作场景：文件上传、图片解决、文档解决、网络申请、数据存储、微前端、表单设计器、H5 页面设计器、文档治理和 API 治理。
文件上传
uppy
The next open source file uploader for web browsers ????
https://github.com/transloadi…
uppy 是一个体验顺滑、模块化的 JavaScript 文件上传器，能够无缝地与任何应用程序集成。它速度快，使用方便，能够让你专一比构建文件上传器更重要的问题。该库领有以下个性：
- 反对 I18n 及可拜访性；
- 轻量，基于模块化的插件架构，可按需加载；
- 通过凋谢的 tus 规范，可复原文件上传，能够解决上传过程中网络故障的问题。
filepond
???? A flexible and fun JavaScript file upload library
https://github.com/pqina/file…
filepond 是一个 JavaScript 库，能够上传你扔给它的任何内容，优化图像以放慢上传速度，并提供杰出的，可拜访的，柔滑的用户体验。该库领有以下个性：
- 承受目录，文件，Blobs，本地 URL，近程 URL 和 Data URIs；
- 图像优化，主动调整图像大小，反对裁剪，过滤和修复 EXIF 方向；
- 反对拖拽文件，从文件系统抉择文件，复制和粘贴文件或应用 API 增加文件；
- 应用 AJAX 进行异步上传，反对分块上传，能够将文件编码为 base64 数据，并能够通过表单提交。
✨ 扩大浏览 ✨
- 玩转前端文件上传
- 大规格文件的上传优化
关注「全栈修仙之路」浏览阿宝哥原创的 3 本收费电子书（累计下载近 2 万）及 50 几篇“重学 TS”教程。
图片解决
tui.image-editor
???????? Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.
https://github.com/nhn/tui.im…
tui.image-editor 是应用 HTML5 Canvas 的全功能图像编辑器。它易于应用，并提供弱小的过滤器。同时它反对对图像进行裁剪、翻转、旋转、绘图、形态、文本、遮罩和图片过滤等操作。该库的浏览器兼容状况如下：
- Chrome
- Edge
- Safari
- Firefox
- IE 10+
cropperjs
JavaScript image cropper.
https://github.com/fengyuanch…
Cropper.js 是一款十分弱小却又简略的图片裁剪工具，它能够进行非常灵活的配置，反对手机端应用，反对包含 IE9 以上的古代浏览器。它能够用于满足诸如裁剪头像上传、商品图片编辑之类的需要。该库领有以下个性：
- 反对 39 个配置选项；
- 反对 27 个办法；
- 反对 6 种事件；
- 反对 touch（挪动端）；
- 反对缩放、旋转和翻转；
- 反对在画布上裁剪；
- 反对在浏览器端通过画布裁剪图像；
- 反对解决 Exif 方向信息；
- 跨浏览器反对。
✨ 扩大浏览 ✨
- 你不晓得的 Blob
- 玩转前端二进制
- 一文读懂 Base64 编码
- 图片解决不必愁，给你十个小帮手
文档解决
kkFileView
应用 Spring Boot 打造文件文档在线预览我的项目解决方案，反对 doc、docx、ppt、pptx、xls 等文件在线预览。
https://github.com/kekingcn/k…
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.
https://github.com/mengshukej…
Luckysheet，一款纯前端相似 excel 的在线表格，功能强大、配置简略、齐全开源。该库领有以下个性：
- 格局设置：款式、条件格局、文本对齐及旋转、反对文本的截断、溢出、主动换行和单元格多样式；
- 单元格：拖拽选取来批改单元格、选取下拉填充、主动填充选项、多选区操作、查找与替换和合并单元格；
- 操作体验：撤销 / 重做、复制 / 粘贴 / 剪切操作、快捷键反对和格局刷；
- 公式和函数：内置公式、公式反对数组、近程公式和自定义公式；
- 数据透视图：字段拖拽、聚合形式、筛选数据和数据透视表下钻。
✨ 扩大浏览 ✨
- 在前端如何玩转 Word 文档
网络申请
Axios
Promise based HTTP client for the browser and node.js
https://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
https://github.com/tannerlins…
react-query 是一个用在 React 我的项目中，用于获取、缓存和更新异步数据的钩子。该库领有以下个性：
- 多层缓存 + 主动垃圾回收；
- 反对分页和基于游标的查问；
- 反对加载更多、有限滚动查问和滚动复原；
- 主动缓存 + 从新获取（从新验证时无效，窗口从新聚焦，轮询 / 实时）。
✨ 扩大浏览 ✨
- 77.9K 的 Axios 我的项目有哪些值得借鉴的中央
数据存储
PouchDB
???? – PouchDB is a pocket-sized database.
https://github.com/pouchdb/po…
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.
https://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.
https://github.com/umijs/qiankun
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
https://github.com/single-spa…
Single-spa 是一个将多个单页面利用聚合为一个整体利用的 JavaScript 微前端框架。应用 single-spa 进行前端架构设计能够带来很多益处，例如：
- 独立部署每一个单页面利用；
- 改善初始加载工夫，迟加载代码；
- 新性能应用新框架，旧的单页利用不必重写能够共存；
- 在同一页面上应用多个前端框架 而不必刷新页面 (React，AngularJS，Angular，Ember 等)。
✨ 扩大浏览 ✨
- 最全微前端汇合：https://juejin.cn/post/684490…
表单设计器
form-generator
✨Element UI 表单设计及代码生成器
https://github.com/JakHuang/f…
form-render
????♀️ 易用的跨组件体系的表单渲染引擎 – 通过 JSON Schema 疾速生成自定义表单配置界面
https://github.com/alibaba/fo…
H5 页面设计器
gods-pen
基于 vue 的高扩大在线网页制作平台，可自定义组件，可增加脚本，可数据统计。
https://github.com/ymm-tech/g…
luban-h5
相似易企秀的 H5 制作、建站工具、可视化搭建零碎.
https://github.com/ly525/luba…
文档治理
storybook
???? The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!
https://github.com/storybookj…
Storybook 是一个 UI 组件的开发环境。它容许你可能浏览一个组件库，查看每个组件的不同状态，以及反对交互式的形式开发和测试组件。
Storybook 在你的应用程序之外运行。这容许你可能独立的开发 UI 组件，你能够进步组件的可重用性、可测试性和开发速度。你能够疾速构建，而无需放心应用程序特定的依赖项。
TypeDoc
Documentation generator for TypeScript projects.
在线地址：https://typedoc.org/
TypeDoc 用于将 TypeScript 源代码中的正文转换为 HTML 文档或 JSON 模型。它可灵便扩大，并反对多种配置。
API 治理
yapi
YApi 是一个可本地部署的、买通前后端及 QA 的、可视化的接口治理平台
https://github.com/ymfe/yapi
YApi 是 高效 、 易用 、 功能强大 的 api 治理平台，旨在为开发、产品、测试人员提供更优雅的接口治理服务。能够帮忙开发者轻松创立、公布、保护 API，YApi 还为用户提供了优良的交互体验，开发人员只需利用平台提供的接口数据写入工具以及简略的点击操作就能够实现接口的治理。
该我的项目领有以下个性：
- 基于 Json5 和 Mockjs 定义接口返回数据的构造和文档，效率晋升多倍；
- 扁平化权限设计，即保障了大型企业级我的项目的治理，又保障了易用性；
- 相似 Postman 的接口调试；
- 自动化测试, 反对对 Response 断言；
- MockServer 除反对一般的随机 mock 外，还减少了 Mock 冀望性能，依据设置的申请过滤规定，返回冀望数据；
- 反对 postman, har, swagger 数据导入；
- 收费开源，内网部署，信息再也不怕泄露了。
APIJSON
???? 码云最有价值开源我的项目 ???? 后端接口和文档自动化，前端(客户端) 定制返回 JSON 的数据和构造！
https://github.com/Tencent/AP…
APIJSON 是一种专为 API 而生的 JSON 网络传输协定 以及 基于这套协定实现的 ORM 库。APIJSON 为“简略的增删改查、简单的查问、简略的事务操作”提供了齐全自动化的 API，能大幅升高开发和沟通老本，简化开发流程，缩短开发周期。它适宜中小型前后端拆散的我的项目，尤其是 BaaS、Serverless、互联网创业项目和企业自用我的项目。
该我的项目领有以下个性：
- 通过自动化 API，前端能够定制任何数据、任何构造！
- 大部分 HTTP 申请后端再也不必写接口了，更不必写文档了！
- 前端再也不必和后端沟通接口或文档问题了！再也不会被文档各种谬误坑了！
- 后端再也不必为了兼容旧接口写新版接口和文档了！再也不会被前端随时随地没完没了地烦了！
关注「全栈修仙之路」浏览阿宝哥原创的 3 本收费电子书（累计下载近 2 万）及 7 篇源码剖析系列教程。
本文阿宝哥介绍了可应答十大工作场景的开源我的项目，心愿对大家能有所帮忙或启发。如果你有其余好的开源我的项目，欢送留言举荐给阿宝哥哟。