2020年的前端資源

時間  2021-08-14
標籤 javascript php css html 前端 vue html5 java node react 欄目 JavaScript 简体版
原文   原文鏈接

本文收錄在 awesome-frontend 中，並將持續更新喲~javascript

打包工具

webpack loader 和插件

包管理

框架

Canvas 相關

APP 相關

CSS 相關

小程序 相關

  • mpvue - 基於 Vue.js 的小程序開發框架，從底層支持 Vue.js 語法和構建工具體系
  • wepy - 小程序組件化開發框架
  • westore - 微信小程序解決方案 - 1KB javascript 覆蓋狀態管理、跨頁通信、插件開發和雲數據庫開發
  • ColorUI - 鮮亮的高飽和色彩，專一視覺的小程序組件庫
  • Gitter - 採用 Taro 框架 + Taro UI 進行開發的 demo ， 多是目前顏值最高的 GitHub 微信小程序客戶端

⬆️ 返回首頁php

其餘

  • 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 相關庫

Vue 相關庫

UI 庫

其餘

阿里系

工具類

數據流

語言

文檔

工程

  • 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 兼容處理

請求處理

富文本相關

持續集成

  • CircleCI
  • GitlabCi
  • appveyor - 適用於Windows和Linux的持續集成解決方案
  • Jenkins - 一個支持 PHP 的連續集成平臺
  • JoliCi - 一個用 PHP 編寫並由 DOCKER 供電的集成客戶端
  • PHPCI - 一個開源的 PHP 連續集成平臺
  • SemaphoreCI - 開源和私人項目的集成平臺
  • Shippable - 一個基於 DOCKER 的開源和私有項目的連續集成平臺
  • Travis CI - 持續整合平臺
  • Wercker - 持續整合平臺
  • snyk.io - 前端依賴檢測
  • codecov.io - 測試覆蓋率報告

在線工具

在線編程

  • jsfiddle - 在線編程，生成在線預覽
  • plnkr - 在線編程，生成在線預覽
  • codepen - 在線編程，生成在線預覽
  • jsbin - 在線編程，生成在線預覽

轉換

圖標管理

其餘在線工具

代碼高亮

音頻/視頻

數據可視化庫

  • 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 組件，有效地呈現大型列表和表格數據。ES六、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 - 一個動態的基於瀏覽器的可視化庫

動畫庫

數據模擬

調試工具

其餘

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程