俗話說得好，工欲善其事必先利其器。本文阿寶哥將介紹一些優秀的開源項目，利用這些開源項目，你將能能輕松應對以下十個工作場景：文件上傳、圖片處理、文檔處理、網絡請求、數據存儲、微前端、表單設計器、H5 頁面設計器、文檔管理和 API 管理。

文件上傳

uppy

• The next open source file uploader for web browsers 🐶
• https://github.com/transloadit/uppy

uppy 是一個體驗順滑、模塊化的 JavaScript 文件上傳器，可以無縫地與任何應用程序集成。它速度快，使用方便，可以讓你專注比構建文件上傳器更重要的問題。該庫擁有以下特性：

• 支持 I18n 及可訪問性;
• 輕量，基于模塊化的插件架構，可按需加載;
• 通過開放的 tus 標準，可恢復文件上傳，可以解決上傳過程中網絡故障的問題。

 

 

filepond

• 🌊 A flexible and fun JavaScript file upload library
• https://github.com/pqina/filepond

filepond 是一個 JavaScript 庫，可以上傳你扔給它的任何內容，優化圖像以加快上傳速度，并提供出色的，可訪問的，柔滑的用戶體驗。該庫擁有以下特性：

• 接受目錄，文件，Blobs，本地 URL，遠程 URL 和 Data URIs;
• 圖像優化，自動調整圖像大小，支持裁剪，過濾和修復 EXIF 方向;
• 支持拖拽文件，從文件系統選擇文件，復制和粘貼文件或使用 API 添加文件;
• 使用 AJAX 進行異步上傳，支持分塊上傳，可以將文件編碼為 base64 數據，并可以通過表單提交。

✨ 擴展閱讀 ✨

玩轉前端文件上傳

大規格文件的上傳優化

圖片處理

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.image-editor

tui.image-editor 是使用 HTML5 Canvas 的全功能圖像編輯器。它易于使用，并提供強大的過濾器。同時它支持對圖像進行裁剪、翻轉、旋轉、繪圖、形狀、文本、遮罩和圖片過濾等操作。該庫的瀏覽器兼容情況如下：

• Chrome
• Edge
• Safari
• Firefox
• IE 10+

cropperjs

• JavaScript image cropper.
• https://github.com/fengyuanchen/cropperjs

Cropper.js 是一款非常強大卻又簡單的圖片裁剪工具，它可以進行非常靈活的配置，支持手機端使用，支持包括 IE9 以上的現代瀏覽器。它可以用于滿足諸如裁剪頭像上傳、商品圖片編輯之類的需求。該庫擁有以下特性：

• 支持 39 個配置選項;
• 支持 27 個方法;
• 支持 6 種事件;
• 支持 touch(移動端);
• 支持縮放、旋轉和翻轉;
• 支持在畫布上裁剪;
• 支持在瀏覽器端通過畫布裁剪圖像;
• 支持處理 Exif 方向信息;
• 跨瀏覽器支持。

✨ 擴展閱讀 ✨

• 你不知道的 Blob
• 玩轉前端二進制
• 一文讀懂Base64編碼
• 圖片處理不用愁，給你十個小幫手

文檔處理

kkFileView

• 使用 Spring Boot 打造文件文檔在線預覽項目解決方案，支持 doc、docx、ppt、pptx、xls 等文件在線預覽。
• https://github.com/kekingcn/kkFileView

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/mengshukeji/Luckysheet

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/tannerlinsley/react-query

react-query 是一個用在 React 項目中，用于獲取、緩存和更新異步數據的鉤子。該庫擁有以下特性：

• 多層緩存 + 自動垃圾回收;
• 支持分頁和基于游標的查詢;
• 支持加載更多、無限滾動查詢和滾動恢復;
• 自動緩存 + 重新獲取(重新驗證時有效，窗口重新聚焦，輪詢/實時)。

✨ 擴展閱讀 ✨

77.9K 的 Axios 項目有哪些值得借鑒的地方

數據存儲

PouchDB

• 🐨 - PouchDB is a pocket-sized database.
• https://github.com/pouchdb/pouchdb

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

Single-spa 是一個將多個單頁面應用聚合為一個整體應用的 JavaScript 微前端框架。使用 single-spa 進行前端架構設計可以帶來很多好處，例如：

• 獨立部署每一個單頁面應用;
• 改善初始加載時間，遲加載代碼;
• 新功能使用新框架，舊的單頁應用不用重寫可以共存;
• 在同一頁面上使用多個前端框架 而不用刷新頁面 (React，AngularJS，Angular，Ember 等)。

 

✨ 擴展閱讀 ✨

• 最全微前端集合：https://juejin.cn/post/6844904030720770055

表單設計器

form-generator

• ✨Element UI 表單設計及代碼生成器
• https://github.com/JakHuang/form-generator

 

form-render

• 🚴‍♀️ 易用的跨組件體系的表單渲染引擎 - 通過 JSON Schema 快速生成自定義表單配置界面
• https://github.com/alibaba/form-render

H5 頁面設計器

gods-pen

• 基于 vue 的高擴展在線網頁制作平臺，可自定義組件，可添加腳本，可數據統計。
• https://github.com/ymm-tech/gods-pen

luban-h5

• 類似易企秀的 H5 制作、建站工具、可視化搭建系統.
• https://github.com/ly525/luban-h5

文檔管理

storybook

• 📓 The UI component explorer. Develop, document, & test for React, Vue, Angular, Ember, Web Components, & more!
• https://github.com/storybookjs/storybook/

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/APIJSON

APIJSON 是一種專為 API 而生的 JSON 網絡傳輸協議 以及 基于這套協議實現的 ORM 庫。APIJSON 為 “簡單的增刪改查、復雜的查詢、簡單的事務操作” 提供了完全自動化的 API，能大幅降低開發和溝通成本，簡化開發流程，縮短開發周期。它適合中小型前后端分離的項目，尤其是 BaaS、Serverless、互聯網創業項目和企業自用項目。

該項目擁有以下特性：

• 通過自動化API，前端可以定制任何數據、任何結構!
• 大部分 HTTP 請求后端再也不用寫接口了，更不用寫文檔了!
• 前端再也不用和后端溝通接口或文檔問題了!再也不會被文檔各種錯誤坑了!
• 后端再也不用為了兼容舊接口寫新版接口和文檔了!再也不會被前端隨時隨地沒完沒了地煩了!