這些開源項目，讓你輕鬆應對十大工做場景

時間 2020-11-30

標籤前端 vue node react ios git github web 數據庫 json 欄目 React 简体版

原文原文鏈接

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

文件上傳

uppy

The next open source file uploader for web browsers 🐶
https://github.com/transloadi...vue

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

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

filepond

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

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

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

✨ 擴展閱讀 ✨git

關注「全棧修仙之路」閱讀阿寶哥原創的 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...github

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

Chrome
Edge
Safari
Firefox
IE 10+

cropperjs

JavaScript image cropper.
https://github.com/fengyuanch...數據庫

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

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

✨ 擴展閱讀 ✨

文檔處理

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、互聯網創業項目和企業自用項目。

該項目擁有如下特性：