《吐血整理》系列 大廠前端組件庫工具集合（PC端、移動端、JS、CSS等）

前言

Coding 應當是一輩子的事業，而不只僅是 30 歲的青春🍚
本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新

上一篇《吐血整理》系列 大廠前端必備工具集合（抓包、調試、Mock 數據等等）發佈以後，不少小夥伴問怪怪有沒有大廠前端開發工具組件庫的集合，今天，它來了，它踏着七彩祥雲來了！！！

企業級中後臺

Ant Design

• 官網地址：ant.design/index-cn

螞蟻金服開源 React 組件庫首選，企業級中後臺就直接用它就完事兒，準沒錯~
組件很齊全，開發起來簡直神速~

估計已是不少公司的標配了，咱們公司也用~

​

飛冰

• 官網地址：ice.work/

可視化快速搭建企業級中後臺前端應用，仍是很值得試一試滴~

Ant Design Vue

• 官網地址：www.antdv.com/docs/vue/in…

若是大家公司技術棧是 Vue.js，用這個就完事兒了~

雖然有 Element UI，以及一些其它的組件庫，但掛怪仍是推薦這個~

跨端框架

Taro

• 官網地址：nervjs.github.io/taro/

React 開發方式的跨端開發框架，目前已支持，微信/百度/字節跳動/支付寶/QQ 小程序、快應用、H五、React Native 等多端的應用。

怪怪一直都以爲，前端側原本就不該該分這麼多端，多端統一是大趨勢~

怪怪好幾個朋友的公司都在用這個了😝~

Taro UI

• 官網地址：taro-ui.jd.com/

基於上面 Taro 跨端框架開發的多端 UI 組件庫，不得不說，京東仍是考慮得周到，點贊！

使用 Taro，就能夠實現全站技術棧統一了😝~

uni-app

• 官網地址：uniapp.dcloud.io/

Vue.js 開發方式的跨端開發框架，有多強大，去用用就知道啦~

最近這玩意兒好像有點火~

數據可視化

AntV

• 官網地址：antv.gitee.io/zh#products

數據可視化中的王者，別猶豫了，用它就對了~

pc 端，移動端都給你考慮到了~

圖片處理

Image Cropper

• 官網地址：elemefe.github.io/image-cropp…

給圖片顯示一個裁剪框，裁剪框容許用戶調整大小和位置，經常使用來作用戶自定義頭像的裁剪功能。

其實就是一個圖片裁剪工具啦😝~

img-2

• 官網地址：github.com/RevillWeb/i…

使用 web worker 作的圖片懶加載~

不過針對本身的公司，怪怪建議像懶加載、預加載這種東西，仍是本身作一套比較好哦~

Fabric.js

• 官網地址：fabricjs.com/

有時候會碰到圖片合成類的需求，這個庫是基於 canvas 開發滴，支持拖拽，有相似需求的小夥伴能夠試試~

nsfwjs

• 官網地址：github.com/infinitered…

這個庫就有點東西了，鑑定圖片是否符合要求，這個我沒用過，不過感受會有點用~

像這種不符合要求的圖片過濾，真正企業裏面，都是風控團隊來處理滴，不須要咱們前端來搞~

Squoosh

• 官網地址：squoosh.app/

谷歌在線圖片壓縮，怪怪常常用~

不過真正項目裏面，公司前端基建小分隊通常都會封裝一套圖片壓縮類的組件~

SpriteJS

• 官網地址：spritejs.org/#/

360 團隊開發的，高性能圖形系統，它可以支持 web、node、桌面應用和小程序的圖形繪製和實現各類動畫效果，對 360 的東西仍是挺有好感，齊舞週刊有點東西~

UI 樣式

imgcook

• 官網地址：imgcook.taobao.org/docs

很大程度上減輕了前端的工做量！！！，支持 Sketch、PSD、靜態圖片直接轉 code，也就是你們常說的 ui2code。能夠直接轉成代碼！！😝

沒用過的小夥伴，必定要去試試！！！

animate.css

• 官網地址：github.com/daneden/ani…

這大概是最全的 css 動畫庫了~

direction-reveal

• 官網地址：nigelotoole.github.io/direction-r…

根據鼠標進入位置，展示從不一樣方向 展示 hover 效果，pc 端仍是會遇到這樣的需求。

支持不少種效果，基本上包含了平常全部的狀況~

lax.js

• 官網地址：github.com/alexfoxy/la…

上面的動畫庫，配上這個滾動特效庫，簡直完美

壓縮完只有 2kb，很輕量

purifycss

• 官網地址：github.com/purifycss/p…

能夠幫助你移除沒使用到的 css，也算是一個小優化點~

Vue.js

vue-virtual-scroller

• 官網地址：github.com/Akryum/vue-…

基於 vue 的虛擬列表無限滾動，性能還不錯~

怪怪公司基建小分隊本身作了一套無限滾動加載滴，沒用這個~

Vue.Draggable

• 官網地址：github.com/SortableJS/…

之前怪怪實習的時候，就遇到了運營須要對後臺一些元素進行拖拽的場景，就是用的這個~

JavaScript

eslint

• 官網地址：github.com/eslint/esli…

這玩意的出現解決了大部分強迫症程序員的問題，統一 JavaScript 代碼風格

這不用猶豫，公司的代碼規範必須統一啊~

JavaScript Obfuscator Tool

• 官網地址：obfuscator.io/

JavaScript 代碼混淆工具，該混淆時就混淆~

lodash

• 官網地址：lodash.com/

lodash 是一套工具庫，內部封裝了字符串、數組、對象等常見數據類型的處理函數。

很實用，用過你就知道了~

jlb-tools

• 官網地址：jielibang.github.io/jtools/inde…

前端 js 工具庫: 封裝經常使用的工具函數，如日期格式化、瀏覽器判斷等，提升開發效率

若是是本身的公司，這種東西必定要有一套封裝到腳手架裏面，對於開發很省事兒~

jscodeshift

• 官網地址：github.com/facebook/js…

將 js 內容解析成 AST 語法樹，而後提供一些便利的操做接口，方便咱們對各個節點進行更改

有時候，須要去作一些底層的高級處理，這個東西就能派上用場了~

移動端

Swiper

• 官網地址：swiperjs.com/

主要用來解決移動端觸摸滑動，像什麼輪播圖啊，上下滑動啊，用它就對了~

fullPage

• 官網地址：alvarotrigo.com/fullPage/zh…

很是好用的全屏滑動庫，去官網看 demo 就能感覺到了~

PhotoSwipe

• 官網地址：github.com/dimsemenov/…

圖片預覽組件，支持移動端，相對上面組件庫裏面自帶的，比較輕量~

Swiper + PhotoSwipe + fullPage 這 3 個一配合，微信裏常見的 H5 頁徹底不是問題噠！！！😝

HAMMER.JS

• 官網地址：hammerjs.github.io/

移動端手勢庫，挺不錯滴~

其它經常使用小工具

Moment.js

• 官網地址：momentjs.com/

用 JavaScript 解析、驗證、操做和顯示日期和時間，很方便哦~

axios

• 官網地址：github.com/axios/axios

目前最多見的請求庫，強推~

Can I use

• 官網地址：caniuse.com

開發必備，查看瀏覽器對各類新特性的兼容狀況

果真，瀏覽器還不支持接水怪，傷心😭💔

regexr

• 官網地址：regexr.com/

平常本身寫一個正則的時候，這個網站很爽~

nodeppt

• 官方網址：github.com/ksky521/nod…

用 node 寫 ppt，就頗有格局~

以這個工具結束，是但願你們都能作得一手好 ppt，都可以順利晉升！！！

總結

本文已收錄 Github https://github.com/ponkans/F2E，歡迎 Star，持續更新💧

上一期的《吐血整理》系列 大廠前端必備工具集合（抓包、調試、Mock 數據等等），得到你們一致好評，因而怪怪我加班加點，寫下了這一期。

上面的組件庫，工具都是怪怪精心挑選滴，但願能幫助到小夥伴減輕工做，happy work！！

近期在寫 Node.js 的系列，傳送門：

• 《大前端進階 Node.js》系列 必知、必會、必問
• 《大前端進階 Node.js》系列 雙十一秒殺系統（進階必看）
• 《大前端進階 Node.js》系列 多進程底層原理（字節跳動被問）
• 《大前端進階 Node.js》系列 P6 前端必備腳手架/CI 構建能力（上）

---

喜歡的小夥伴麻煩加個關注，點個贊哦，感恩💕😊

聯繫我 / 公衆號

微信搜索【接水怪】或掃描下面二維碼回覆」加羣「，我會拉你進技術交流羣。講真的，在這個羣，哪怕您不說話，光看聊天記錄也是一種成長。（阿里技術專家、敖丙做者、Java3y、蘑菇街資深前端、螞蟻金服安全專家、各路大牛都在）。

接水怪也會按期原創，按期跟小夥伴進行經驗交流或幫忙看簡歷。加關注，不迷路，有機會一塊兒跑個步🏃 ↓↓↓