程式前沿 幫助程式設計師解決問題，增加專業技能，提升個人能力與未來世界競爭力。

2020年的前端資源

NO IMAGE

本文收錄在 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 和插件

包管理

框架

Canvas 相關

APP 相關

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

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

動畫庫

數據模擬

調試工具

其他

相關文章

格式化時間用了YYYYMMdd，元旦當天老闆喊我回去改Bug！

什麼是可迭代對象（Iterableobjects）？

如何將相同屬性的數組對象合併並統計個數

高逼格面試：線程封閉，新名詞√