本文收錄在 awesome-frontend 中,並將持續更新喲~
目錄
打包工具
- webpack – 打包項目
- rollup – 打包 npm 庫
- parcel – webpack 競品,但發展前景不樂觀,再觀察一段時間
- @pikapkg/pack – 又一組件打包工具
- systemjs – 針對一些特殊場景會比較有用,比如雲 ide,支付寶小程序 IDE 等
- microbundle – 基於 rollup,簡化配置
- bili – 基於 rollup,同上
- webpack-dev-server – webpack 開發服務器
- webpack-dev-middleware – webpack 中間件
- vue-cli – vue 命令行工具
- create-react-app – react 官方腳手架
- webpack-merge – 合併 webpack 配置
- webpack-chain – 通過 chain 風格 api 的方式修改 webpack 配置
- prepack – 通過預先執行的方式優化打包結果
- swc – 基於 rust 的語法轉換器,babel 的競爭者
- nathan/pax – 基於 rust,據說是這個星球最快的 JavaScript 打包工具
- pikapkg/web – 瀏覽器裡跑 npm 依賴,面向現代瀏覽器
- lebab/lebab – 把 es5 代碼轉成 es6,反向 babel
- palmerhq/tsdx – Zero-config CLI for TypeScript package development
webpack loader 和插件
- hard-source-webpack-plugin – 性能提升 70%,但有坑
- svgr – svg 轉 react 組件
- postcss – CSS 界的 babel
- autoprefixer – 為 CSS 選擇權自動加 prefix
- cssnano – CSS 壓縮,也有類 preset 的概念
- mini-css-extract-plugin – 提取 CSS 為單獨文件
- webpackbar – webpack 進度條
- webpack-bundle-analyzer – 構建產物佔比分析
- uglifyjs-webpack-plugin – JS 壓縮,產物為 ES5 語法
- terser-webpack-plugin – JS 壓縮,產物為 ES6 語法
- webpack-manifest-plugin – 生成 manifest.json
- copy-webpack-plugin – 複製額外的文件到輸出目錄
- case-sensitive-paths-webpack-plugin – 大小寫敏感檢測,能規避一些問題,但構建時性能消耗較大
- css-hot-loader – CSS 熱更新,搭配 mini-css-extract-plugin 使用
- duplicate-package-checker-webpack-plugin – 重複依賴檢測
- fork-ts-checker-webpack-plugin – ts 語法檢測
- speed-measure-webpack-plugin – 統計 webpack 各階段耗時
包管理
框架
Canvas 相關
- cocos2d-html5
- Egret Engine
- LimeJS
- EaselJS
- three.js
- AlloyStick
- The-Best-JS-Game-Framework
- CanvasEngine
- Quintus
- Stage.js
- phaser – 一個快速、免費、開源的 HTML5 遊戲框架
- lufylegend.js
- pixi.js
APP 相關
- weex
- react-native
- 原生APP體驗的高性能框架 mui
- Fries
- Flutter – 使構建精美的移動應用程序變得輕鬆快捷
CSS 相關
小程序 相關
- mpvue – 基於 Vue.js 的小程序開發框架,從底層支持 Vue.js 語法和構建工具體系
- wepy – 小程序組件化開發框架
- westore – 微信小程序解決方案 – 1KB javascript 覆蓋狀態管理、跨頁通訊、插件開發和雲數據庫開發
- ColorUI – 鮮亮的高飽和色彩,專注視覺的小程序組件庫
- Gitter – 採用 Taro 框架 + Taro UI 進行開發的 demo , 可能是目前顏值最高的 GitHub 微信小程序客戶端
其他
- react
- vue
- next.js
- nuxt.js
- gastby
- umi – 螞蟻金服的前端框架
- rekit – IDE and toolkit for building scalable web applications with React, Redux and React-router
- choo – dva 最初的 API 是參考這個實現的,已經不怎麼發展了,再關注一段時間
- taro – 用 React 寫小程序,適配微信和支付寶等
- after.js
- mint – 提供了語言層方案的框架
- quasar – 基於 vue,一套代碼多處適用
- Angular
- Foundation
- Polymer – Google發佈的Web組件構建框架
- cyclejs
- taro – 多端統一開發框架,支持用 React 的開發方式編寫一次代碼
React 相關庫
- preact – 輕量級 React 實現
- inferno – 輕量級 React 實現
- react-router – React 路由方案
- reach-router – React 路由方案,較新,優勢是可訪問性
- router5 – 通用的路由方案
- react-loadable – 按需加載 react 組件
- material-ui – UI 庫
- react-intl – React 的國際化方案
- react-dnd – 拖拽實現
- react-helmet – 修改 html 的 header 內容
- react-jsonschema-form – A React component for building Web forms from JSON Schema
Vue 相關庫
UI 庫
- quasar
- vue-material
- vuetify
- muse-ui
- buefy
- element-ui
- vulma
- vue-bulma-components
- iview-ui
- AT-UI
- v-semantic
- bootstrap-vue
- fish-ui
- Zircle UI
- vue-mdc-adapter
- Material Components Vue
- PrimeVue
- vuesax
- vuecidity
- water
其他
- vue-router
- vue-cropper – 一個簡單的圖片剪輯插件,支持海報圖片剪輯
- vue-pretty-logger – 本編輯器的 Vue 版
- vue-icon – 簡單的 icon 組件
- vue-baidu-map – 百度地圖的 vue 版
- Vue.Draggable – 基於Sortable.js的Vue拖放組件
- vue-codemirror – codemirror 的 vue 封裝
- vue-apollo – 連接 Vue 和 GraphQL/Apollo 的一座橋樑
- eagle.js – 一個使用 Vue 構建的功能強大、靈活且獨特的幻燈片系統
- vue-color – 顏色選擇器
- seat-select – 選座 C 端
- seat-select-controller – 選座 B 端後臺
- vue-cli3-config – Vue-cli3 配置 vue.config.js 持續更新
- sing-app-vue-dashboard – Sing App Vue 儀表板
- vue-storefront – 這是一個 PWA 應用,可以與任何後端(或幾乎任何後端)連接
- vue-virtual-scroller – 快速滾動條
- v-calendar – 用於構建日曆的無依賴插件
- vue-design-system – 一組 UI 工具
- light-blue-vue-admin – 用於管理信息中心的 Vue.js 模板
- vue-grid-layout – Vue.js 的網格佈局
- vue-content-loader – 創建佔位符加載
- vue-js-modal – 高度可定製的 Modal
- vue2-animate – 集成 Animate.css 的動畫庫
- vuetensils – 一些常用組件
- easyjs – 擁有 Egg Vue SSR 服務端渲染
阿里系
- ant-design – 螞蟻金服的 React UI 庫
- antvis – 數據可視化集合
- ant-motion – 動畫說明和Ant設計組件
工具類
- history
- path-to-regexp – path 轉正則,路由相關處理的底層庫
- lodash – 工具集合
- fastclick
- date-fns – 時間處理
- immutable-js – 數據集控制
- sprint
- dayjs – 在javascript中解析,驗證,操作和顯示日期,類似 moment
- fecha – 小巧的時間格式化庫
- tui.calendar – 日曆庫
- em-cookie – cookie 的處理
- EM-NORMALIZE – 樣式重置
- modernizr – Modernizr是一個JavaScript庫,可以在用戶的瀏覽器中檢測HTML5和CSS3功能
- gpu.js – GPU 加速
- js-cookie – cookie 的封裝
- moment – 在javascript中解析,驗證,操作和顯示日期
- lazy.js – 像 underscore.js 的工具庫
- licia
- underscore.js
- rgbaster.js – 圖片的主色次色提取
- nanoid – 一款非常小巧的唯一 ID 生成工具
- hotkeys – 鍵盤按鍵的封裝,如 ctrl+r
- JsBarcode – js 生成條形碼(條碼)
- comlink – 讓 WebWorker 更好用
- await-timeout – Timeout 依託 Promise 的封裝
- dsa.js – 數據結構及方法
- copy-to-clipboard – 複製的插件
- tesseract.js – 圖片的文字識別工具
- svg.js – SVG 動畫
- html2canvas – HTML 排版,用 canvas 截圖
- shepherd – 引導您的用戶瀏覽您的應用
- intro.js – 為您的網站和項目提供新功能介紹和逐步用戶指南的更好方式可用於新手指引,功能介紹,更新指引等
- crypto-js – 加密標準的JavaScript庫
- ulid – 生成UUID類庫
- RSA – 用 RSA 加密實現 Web 數據加密傳輸
- detector – 客戶端環境識別
- ua-parser-js – 客戶端環境識別, userAgent
- platform.js – 平臺檢測庫
- qrious – 用於使用 Canvas 生成二維碼
- qart.js – 生成藝術二維碼
數據流
語言
文檔
工程
- lerna – monorepo 管理
- lerna-changelog – 為 lerna 項目自動生成 changelog
- eslint – JS 風格約束
- eslint-config-airbnb
- xo – 封裝自 eslint
- prettier – 更主觀的風格自動修改
- yeoman-generator – 腳手架工具
- serve – 本地靜態服務器
- servor – 另一個靜態服務器
- budo – 又一個靜態服務器
- np – npm publish 輔助,自動 push、打 tag、升版本等
- lint-staged – eslint 提速,只 lint 提交的代碼
- coveralls – 覆蓋率
- husky – 添加 git hooks
- cross-env – 跨平臺的環境變量聲明
- projj – 本地 git 項目管理,支持 github 和 gitlab
- nvm – 管理 node 版本
- concurrently – 在 npm scripts 裡並行執行命令
- @zeit/ncc – 打包為 npm 包為一個文件
- npm-check – 檢測依賴升級情況,和
yarn upgrade-interactive
配合著用,主要用來檢測冗餘依賴 - cpx – 複製,支持 glob,並且可以 watch
- onchange – 監聽文件變動然後做一些事
- just – 微軟出的任務管理器
- tern – 代碼分析器,為不少編輯器服務
- analyze-css – CSS選擇器的複雜性和性能分析器
編輯器
命令行
- yargs – 命令行入口套件
- yargs-parser – 命令行參數解析
- chalk – 輸出不同顏色
- cheerio – 用類 jQuery 語法處理 HTML
- chokidar – 文件監聽
- clipboardy – 複製文本到粘貼板
- debug – 打印調試信息
- deprecate – 給過期警告
- glob – 文件查找
- tiny-glob – 文件查找
- signale – 漂亮的日誌打印
- semver – semver 版本處理
- update-notifier – 更新提醒
- rimraf – 刪除文件
- depd – 給出 deprecated 警告
- execa – 比 child_process 好用,返回 Promise
- ora – 控制命令行光標,顯示 loading 等
- inquirer – 交互式命令接口,比如 prompt
- enquirer – 同上,更 cool 一些
- ajv – 參數校驗
- ink – 用 React 處理命令行輸出
- figures – ✔︎ 等特殊字符,做了 windows 兼容處理
請求處理
- whatwg-fetch
- got
- axios
- request
- reqwest
- ajax – Standalone AJAX library
- then-request
- browser-request
- superagent
- minAjax.js
- qwest – 第三方的 Ajax 庫
- whatwg-fetch
- jsonp – 跨域處理
- isomorphic-fetch
- em-jsonp – 跨域處理
富文本相關
- Simditor – 簡單快速的富文本編輯器
- BachEditor – 一個有情懷的編輯器
- TinyMCE
- bootstrap-markdown
- marked – markdown解析器
- Markdown Plus
- Editor.md – 開源在線Markdown編輯器
- stackedit
- Redactor Text Editor
- micromarkdown.js – 輕量級的md解析器
- wangEditor – 支持移動端的輕量級web富文本框
- CKEditor – 可視化 HTML 編輯器
- Quill – 富文本編輯器
- iEditor – 富文本編輯器
- medium-editor – Vue.js 官方推薦支持 Vue 的編輯器
- slate – 一個完全可定製的框架,用於構建富文本編輯器
- tiptap – Vue 的編輯器
持續集成
- CircleCI
- GitlabCi
- appveyor – 適用於Windows和Linux的持續集成解決方案
- Jenkins – 一個支持 PHP 的連續集成平臺
- JoliCi – 一個用 PHP 編寫並由 DOCKER 供電的集成客戶端
- PHPCI – 一個開源的 PHP 連續集成平臺
- SemaphoreCI – 開源和私人項目的集成平臺
- Shippable – 一個基於 DOCKER 的開源和私有項目的連續集成平臺
- Travis CI – 持續整合平臺
- Wercker – 持續整合平臺
- snyk.io – 前端依賴檢測
- codecov.io – 測試覆蓋率報告
在線工具
在線編程
轉換
圖標管理
其他在線工具
- 正則
- 文件對比
- 辦公軟件(文檔、表格、幻燈片、表單)
- svg
- markdown
- 圖片壓縮
- 流程圖,思維導圖、UML、網絡拓撲圖
- jsdiff – 在線對比工具
- transfonter – 字體文件轉換成 base64 格式
- send – 來自 Firefox 製造商的簡單私密文件共享
- faviator – 一個生成圖標的庫
- emoji – emoji 總覽
代碼高亮
- google-code-prettify – 一個可嵌入的腳本,可以使HTML代碼更漂亮。
- highlight.js
- Rainbow
- ACE
- CodeMirror – 瀏覽器內代碼編輯器
- Crayon Syntax Highlighter
- prism – 輕巧,健壯,優雅的語法高亮
音頻/視頻
- jPlayer – HTML5 Audio & Video for jQuery
- video.js – HTML5 & Flash video player
- Accessible HTML5 Video Player – PayPal 開源的 HTML5 視頻播放器
- Clappr – 開源的Web視頻播放器
- Plyr – A simple HTML5 media player
- FitVids.js – A lightweight, easy-to-use jQuery plugin for fluid width video embeds
- BigVideo.js – The jQuery Plugin for Big Background Video
- BigScreen – A simple library for using the JavaScript Full Screen API
- Vide – 視頻背景
- winamp2-js
- Buzz – A Javascript HTML5 Audio library
- MediaElement.js – 播放器 jquery 插件
- html-canvas-video-player – 支持 iOS 和 Android 的播放器
- iphone-inline-video – 讓視頻在iPhone上內聯播放(防止自動全屏顯示)
數據可視化庫
- echarts – 它是用純 JavaScript 編寫的,基於 zrender 畫布。它支持以畫布、SVG(4.0+) 和 VML 的形式繪製圖表。除了 PC 和移動瀏覽器外,ECharts 還可以與 node 上的 node-canvas 一起使用,以便進行高效的服務器端渲染(SSR)
- Highcharts JS – 是一個廣受歡迎的基於 SVG 的 JavaScript 圖表庫,針對舊的瀏覽器可降級到 VML 和畫布。世界上最大的 100 家公司中,有 72 家公司(Facebook、Twitter 等)使用了這個庫,這使得它成為世界上最流行的 JS 圖表 API
- G2
- F2 – 移動端可視化圖表
- D3 – 可能是最流行和使用最廣泛的 JavaScript 數據可視化庫。D3 用於基於數據的文檔操作,並使用 HTML、SVG 和 CSS 讓數據活起來。它基於 Web 標準,結合現代瀏覽器,不需要與專有框架耦合,將可視化組件和數據驅動的方法結合到 DOM 操作上。它允許你將任意數據綁定到文檔對象模型(DOM),然後在文檔上應用數據轉換
- Chart.js – 一個非常受歡迎的開源 HTML5 圖表庫,它使用畫布元素構建響應式 Web 應用。ChartJS 提供了混合圖表類型,新的圖表軸類型和漂亮的動畫。它的設計簡單而優雅,有 8 種基本的圖表類型,你可以將該庫與 moment.js 結合在一起使用,用於渲染時間軸
- three.js – ThreeJS 用 WebGL 創建 3D 動畫。該項目的靈活性和抽象性意味著它也可用於 2 維或 3 維的數據可視化
- Metric-Graphics – 用於可視化和佈局時間序列數據。它相對較小(80kb),提供了小而優雅的線條圖、散點圖、直方圖、柱狀圖和數據表,以及地格圖(rug plot)和基本線性迴歸等特性
- Recharts – 是一個使用 React 和 D3 構建的圖表庫,可以作為聲明性的 React 組件使用。該庫提供原生 SVG 支持,輕量級依賴樹(D3 子模塊)高度可定製。官網文檔中可以找到很多例子
- Raphael – 是一個 JavaScript 矢量庫,可在 Web 中繪製矢量圖形。該庫使用 SVG W3C 和 VML 作為創建圖形的基礎,因此每個圖形對象也是 DOM 對象,你可以附加 JavaScript 事件處理程序。Raphael 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+
- C3 – 是一個基於 D3 的可重用 Web 應用圖表庫。該庫為每個元素提供了相應的類,這樣你就可以通過這些類來自定義樣式,並通過 D3 直接擴展結構。它還提供了多種 API 和回調來訪問圖表狀態。藉助它們,你可以更新圖表,即使是已經渲染好的圖標
- React-vis – 是 Uber 開發的一系列數據可視化組件,包括線 / 面 / 柱狀圖、熱圖、散熱圖、等高線圖、六角熱圖等等。使用該庫不需要事先掌握 D3 或任何其他 data-vis 庫的知識,並提供了低級模塊化的構建塊組件,如 x/y 軸
- React virtualized – 是一組 React 組件,有效地呈現大型列表和表格數據。ES6、CommonJS 和 UMD 版本可以在每個分發版中使用,該項目支持 Webpack 4 工作流。請注意,為了避免版本衝突,必須將 react,react-dom 指定為 peer 依賴
- Victory – 在 Web 和 React Native 應用程序中使用相同的 API,以便於跨平臺繪製圖表。一種優雅而靈活的方式來利用 React 組件來支持實用的數據可視化
- CartoDB – 是一個位置智能和數據可視化工具,用於發現位置數據中的見解。你可以通過 Web 表單上傳地理空間數據(Shapefiles、GeoJSON 等),並在數據集或地圖上將其可視化,使用 SQL 進行搜索,並使用 CartoCSS 來應用地圖樣式
- Raw – 是電子表格和數據可視化之間的連接,基於 d3.js 庫創建基於向量的自定義可視化。它可以處理表格數據(電子表格和 CSV)和從其他應用程序複製和粘貼的文本。因為是 SVG 格式,所以可以使用矢量圖形編輯器編輯,或直接嵌入到網頁中
- Metabase – 是一種相當快速和簡單的方法,可以在不瞭解 SQL 的情況下創建數據儀表盤(分析師和數據專業人士可使用 SQL 模式)。你可以創建片段和度量指標,發送數據到 Slack(通過 MetaBot 在 Slack 中查看數據)等等。它可能是一個很好的工具,可用它在團隊內部可視化數據,儘管可能需要做一些維護工作
- tauCharts – 一個基於 D3 的圖表庫。該庫提供了一個聲明接口,用於將數據字段快速映射到可視化屬性,它的架構允許你使用插件構建切面和擴展圖表行為
- chartist-js – 簡單的響應式圖表
- semiotic – 結合了 React 和 D3 的數據可視化框架
- nvd3 – 一個用 D3.js 編寫的可重用的圖表庫
- viser – 一個適合數據工程師的工具箱
- tui.chart – 漂亮的數據可視化圖表
- datamaps – 使用 D3.js 在單個 JavaScript 件中自定義 SVG 地圖可視化
- sheetsee.js – 用於對谷歌表格的數據進行可視化
- BizCharts – 基於 G2 和 React 的數據可視化庫
- sigma.js – 一個專門用於圖形繪製的 JavaScript 庫
- incubator-echarts – 一個強大的、交互式的圖表和可視化的瀏覽器庫
- vis – 一個動態的基於瀏覽器的可視化庫
動畫庫
- velocity
- GreenSock-JS
- tween.js
- anime
- animate.css – A cross-browser library of CSS animations
- Transit – CSS transitions and transformations for jQuery
- WOW – 在滾動過程中展示CSS效果(默認觸發animate.css)
- AniJS – A Library to Raise your Web Design without Coding
- Move.js – 簡化CSS3的JS庫
- ScrollMe – 在網頁中加入各種滾動效果
- Effeckt.css – A Performant Transitions and Animations Library
- NEC
- csshake – CSS classes to move your DOM
- magic – CSS3 Animations with special effects
- SpinKit
- lenticular.js – 響應傾斜或鼠標事件創建圖片
- interactive_3d – jQuery Interactive 3D – Create a 3D interactive object using images
- AnimateScroll – A Simple jQuery Plugin for Animating Scroll
- Blast.js
- Bounce.js – A JS library for making beautiful CSS3 keyframe animations
- Sticker.js – create a Sticker Effect
- scrollReveal.js – The element enters the visible area and automatically triggers the set animation
- stroll.js – CSS3 list scroll effects
- jQuery Easing – 運動方式擴展
- animations – CSS3 ANIMATION CHEAT SHEET
- iconate.js – 將 icons 增加運動效果的 JS 庫
- Odometer – 數字之間的垂直切換
- Hover.css – 很多鼠標Hover態的效果
- imagehover.css – 為圖片添加懸停效果
- iHover – 圖片懸停效果
- ImageCaptionHoverAnimation
- Bootstrap Hover Image Gallery
- AlloyFinger – 騰訊 AlloyTeam 出品的超級小的 Web 手勢庫
數據模擬
調試工具
- eruda
- vConsole
- vue-pretty-logger – 一個還在持續更新的本地 log 輸出插件
- signale – Hackable console logger
其他
- yazl – zip 壓縮
- yauzl – zip 解壓縮
- tar-fs – tar 的壓縮和解壓縮
- esquery – 語法樹查詢
- remark – Markdown 語法解析器
- markdown-it – Markdown 轉 HTML
- electron
- DeskGap – 類 electron ,由於不包含瀏覽器的部分,所以產物更小
- fx – 交互式 JSON 查看
- fontawesome – 字體資源