俗话说，工欲善其事，必先利其器。在这篇文章中，阿宝哥将介绍一些优秀的开源项目。使用这些开源项目，你将能够轻松应对以下十大工作场景：文件上传、图片处理、文档处理、网络请求、数据存储、微前端、表单设计器、H5页面设计器、文档管理和API管理。文件上传uppy下一个用于网络浏览器的开源文件上传器🐶https://github.com/transloadit/uppyuppy是一个流畅的、模块化的JavaScript文件上传器，可以与任何应用程序无缝集成。它快速、易于使用，让您专注于比构建文件上传器更重要的问题。该库具有以下特点：支持I18n和可访问性；轻量级，基于模块化插件架构，可按需加载；通过opentus标准，可以实现文件上传续传，可以解决上传过程中出现网络故障的问题。文件池🌊一个灵活有趣的JavaScript文件上传库https://github.com/pqina/filepondfilepond是一个JavaScript库，它可以上传你扔给它的任何东西，优化图像以加快上传速度，并提供出色的、可访问的、流畅的用户体验。该库具有以下特性：接受目录、文件、blob、本地URL、远程URL和数据URI；图像优化，自动调整图像大小，支持裁剪、过滤和固定EXIF方向；支持拖放文件，从文件系统中选择文件，复制粘贴文件或使用API??添加文件；使用AJAX进行异步上传，支持分块上传，可以将文件编码为base64数据，可以通过表单提交。?延伸阅读?趣味前端文件上传大格式文件上传优化图片处理tui.image-editor🍞🎨使用画布的全功能照片图像编辑器。这真的很简单，而且它带有很棒的过滤器。https://github.com/nhn/tui.image-editortui.image-editor是一个使用HTML5Canvas的全功能图像编辑器。它易于使用并提供强大的过滤器。同时支持对图片进行裁剪、翻转、旋转、绘图、形状、文字、遮罩、图像过滤等操作。该库的浏览器兼容性如下：ChromeEdgeSafariFirefoxIE10+cropperjsJavaScriptimagecropper。https://github.com/fengyuanchen/cropperjsCropper.js是一款非常强大但简单的图片裁剪工具，可以进行非常灵活的配置，支持手机端使用，支持包括IE9及以上的现代浏览器。可用于满足上传裁剪头像、编辑商品图片等需求。该库具有以下特点：支持39个配置选项；支持27种方法；支持6个事件；支持触摸（移动）；支持缩放、旋转和翻转；支持在画布上裁剪；图片;支持处理Exif方向信息；跨浏览器支持。?延伸阅读?你不知道的Blob。玩前端二进制文件。阅读并理解Base64编码和图像处理。别着急，小编送你十个文档处理小帮手。、pptx、xls等文件在线预览。https://github.com/kekingcn/kkFileViewkkFileView是一款文件文档在线预览解决方案。项目使用流行的SpringBoot构建，使用和部署简单，基本支持在线预览主流办公文档，如doc、docx、xls、xlsx、ppt、pptx、pdf、txt、zip、rar、图片、视频、音频等。该库具有以下特点：一键部署，快速访问：支持Windows和Linux平台一键部署，两行JS代码即可访问预览；支持常用文件格式，兼容新版Office文档：支持文本、图片、Office文档、WPS文档、PDF、视频、音频、压缩文件等常用文件类型预览；支持多种预览模式灵活切换：支持PDF、懒加载分页、轮播图等预览模式的动态配置和灵活切换；独立部署，提供Restful接口，适用于微服务场景：独立于业务系统，提供RestfulHttp接口，独立于开发语言，在微服务场景直接提供在线预览服务。LuckysheetLuckysheet是一个类似于excel的在线电子表格，功能强大、配置简单且完全开源。https://github.com/mengshukeji/Luckysheet开源。该库具有以下特性：格式：样式、条件格式、文本对齐和旋转、支持文本截断、溢出、自动换行和多种单元格样式；单元格：拖拽修改单元格，选择下拉填充，自动填充选项，多选操作，查找替换，合并单元格；操作体验：撤销/重做、复制/粘贴/剪切操作、快捷键支持、格式刷；公式和函数：内置公式、公式支持数组、远程公式和自定义公式；数据透视图：字段拖放、聚合、过滤数据和数据透视表向下钻取。?延伸阅读?前端Axios如何玩Word文档网络请求浏览器和node.js基于Promise的HTTP客户端https://github.com/axios/axiosAxios是一个基于Promise的HTTP客户端，库有以下特性：支持PromiseAPI；能够拦截请求和响应；能够转换请求和响应数据；客户端支持抵御CSRF攻击；同时支持浏览器和Node.js环境；能够取消请求并自动转换JSON数据。react-query??React中用于获取、缓存和更新异步数据的钩子https://github.com/tannerlinsley/react-queryreact-query是React项目中用于获取、缓存和更新异步数据的钩子。该库具有以下特点：多层缓存+自动垃圾回收；支持分页和游标查询；支持加载更多，无限滚动查询和滚动恢复；自动缓存+重新获取（在重新验证、窗口重新聚焦、轮查询/实时时有效）。?延伸阅读?77.9KAxios项目数据存储PouchDB🐨有哪些值得学习的地方？-PouchDB是袖珍型数据库。https://github.com/pouchdb/pouchdbPouchDB是一个浏览器内数据库，允许应用程序将数据保存在本地，以便用户即使在离线时也可以享受应用程序的所有功能。此外，数据在客户端之间同步，因此用户无论身在何处都可以保持最新状态。PouchDB也在Node.js中运行，可用作CouchDB兼容服务器的直接接口。API在每个环境中都以相同的方式工作，因此您可以减少担心浏览器差异的时间，而将更多时间用于编写干净、一致的代码。PouchDB支持所有现代浏览器：Firefox29+（包括FirefoxOS和FirefoxforAndroid）Chrome30+Safari5+InternetExplorer10+Opera21+Android4.0+iOS7.1+WindowsPhone8+PouchDB在幕后使用IndexedDB，如果当前如果环境不支持IndexedDB，它将回退到WebSQL。Rxdb💻🔄📱用于JavaScript应用程序的实时数据库。https://github.com/pubkey/rxdbRxDB（ReactiveDatabase的缩写）是一个用于JavaScript应用程序的NoSQL数据库，例如网站、HybridApps、ElectronApps、ProgressiveWebApps和Node.js。响应式意味着你不仅可以查询当前状态，还可以订阅所有状态变化，比如查询的结果或者文档的单个字段。RxDB支持以下特性：Mango-Query：支持mqueryAPI从集合中获取数据，支持链式mongoDB查询风格。Replication：由于RxDB依赖于PouchDB，所以很容易实现终端设备和服务器之间的数据同步。反应式：RxDB可以轻松同步DOM的状态。MultiWindow/Tab：当两个RxDB实例使用同一个存储引擎时，它们的状态和操作流程将被广播。这意味着对于两个浏览器窗口，窗口#1中的数据更改也会自动影响窗口#2中的数据状态。Schema：Schemas由jsonschema定义，用于描述数据格式。加密：通过将模式字段设置为加密，该字段的值将以加密方式存储，没有密码无法读取。?延伸阅读?前端存储除了localStorage，还有哪些微前端qiankun📦🚀微前端实现库旨在帮助您更轻松、更轻松地构建可用于生产的微前端架构系统。目前，qiankun已经服务了超过200+个蚂蚁内部线上应用，在易用性和完备性上绝对值得信赖。该库具有以下特点：📦基于单spa封装，提供更加开箱即用的API；📱技术栈无关，任何技术栈应用都可以使用/接入，无论是React/Vue/Angular/JQuery还是其他框架；💪HTMLEntry接入方式，让您接入微应用就像使用iframe一样简单；🛡样式隔离，保证微应用之间的样式互不干扰；🧳JS沙盒，保证微应用之间全局变量/事件不冲突；??资源预加载，在浏览器空闲时预加载未打开的微应用资源，加速微应用的打开；🔌umi插件，提供@umijs/plugin-qiankun用于一键切换umi应用到微前端架构系统。single-spa简单微前端的路由器https://github.com/single-spa/single-spaSingle-spa是一个JavaScript微前端框架，它将多个单页应用程序聚合到一个整体应用程序中。使用single-spa进行前端架构设计可以带来很多好处，例如：独立部署每个单页应用；改善初始加载时间并延迟代码加载；新特性使用新框架，旧的单页应用无需重写即可共存；在不刷新页面的情况下，在同一页面上使用多个前端框架（React、AngularJS、Angular、Ember等）。?延伸阅读?最全微前端合集：https://juejin.cn/post/6844904030720770055表单设计器form-generator?ElementUI表单设计与代码生成器https://github.com/JakHuang/form-generatorform-render🚴??一个简单易用的跨组件系统表单渲染引擎-通过JSONSchema快速生成自定义表单配置界面https://github.com/alibaba/form-renderH5页面设计器gods-pen基于Vue的高扩展性在线网页创建平台，可自定义组件、添加脚本、统计。https://github.com/ymm-tech/gods-penluban-h5类似一奇秀的H5制作，建站工具，可视化搭建系统。https://github.com/ly525/luban-h5文档管理故事书📓UI组件资源管理器。为React、Vue、Angular、Ember、WebComponents等开发、记录和测试！https://github.com/storybookjs/storybook/Storybook是一个UI组件的开发环境。它允许您浏览组件库，查看每个组件的不同状态，并支持组件的交互式开发和测试。Storybook在您的应用程序之外运行。这使您可以独立开发UI组件，并且可以提高组件的可重用性、可测试性和开发速度。您可以快速构建而不用担心特定于应用程序的依赖关系。TypeScript项目的TypeDoc文档生成器。在线地址：https://typedoc.org/TypeDoc用于将TypeScript源码中的注释转换为HTML文档或JSON模型。它是可扩展的并支持多种配置。API管理yapiYApi是一个可视化界面管理平台，可本地部署，连接前端和QA。https://github.com/ymfe/yapiYApi是一个高效、易用、强大的API管理平台，旨在为开发、产品、测试人员提供更优雅的接口管理服务。它可以帮助开发人员轻松创建、发布和维护API。YApi还为用户提供了极佳的交互体验。开发者只需要使用平台提供的接口数据写入工具和简单的点击操作即可实现接口管理。项目具有以下特点：基于Json5和Mockjs定义接口返回数据的结构和文档，效率提升了数倍；扁平化的权限设计，既保证了大型企业级项目的管理，又保证了易用性；类似PostmanDebugging的界面；自动化测试，支持Response断言；MockServer在普通的随机mocks之外增加了Mock期望函数，根据设置的请求过滤规则返回期望的数据；支持postman、har、swagger数据导入；免费开源，内置网络部署，信息不再怕泄露。APIJSON🏆码云最具价值开源项目🚀后端接口和文档自动化，前端（客户端）自定义返回JSON数据和结构！https://github.com/Tencent/APIJSONAPIJSON是一个专门为API设计的JSON网络传输协议和基于该协议的ORM库。APIJSON为“简单的CRUD、复杂的查询、简单的事务操作”提供了完全自动化的API，可以大大降低开发和沟通成本，简化开发流程，缩短开发周期。适用于前后端分离的中小型项目，尤其是BaaS、Serverless、互联网创业项目和自用项目。该项目具有以下特点：通过自动化API，前端可以自定义任意数据、任意结构！大多数HTTP请求后端都不需要再写接口了，更不用说写文档了！前端不再需要在接口或文档问题上与后端沟通了！您将不再被文档中的各种错误所困！后台将不再需要编写新版本的接口和文档来兼容旧接口！再也不会随时随地被前端烦死了！
