前端能效提高之不可忽略的工具、庫和資源

序言

指望有那麼一兩個工具能讓你眼前一亮。

這個列表包含許多種類的資源，因此這裏將它們分組整理 並附相關連接

---

CSS 庫 / 設計相關

---

• Bulma一Bulma。有了它，即便徹底不懂 CSS，也能夠垂手可得作出美觀的網頁

• Foundation一Foundation號稱世界上最早進的響應式前端框架

• Spectre.css一Spectre.css一個 輕量級， 響應和 現代 CSS框架

• Animate.css — 動畫庫

• Flat UI Colors — 扁平化設計配色

• Material design lite— 基於 Google material design 的框架

• Colorrrs — 隨機顏色生成器

• Section separators — CSS 實現區域分割

• Topcoat — 框架

• Create ken burns effect — 使用 CSS3 動畫實現 Ken burns 特效

• DynCSS — 給 CSS 添加 function，動態化 CSS

• CSSpin — css spinners 合集

• Feather icons — Icon 集合

• Ion icons — Icon 集合

• Font awesome — Icon 集合

• Font generator — 組合多個字體建立混合字體

pure.css 一組小型的自適應CSS模塊

---

純前端 Javascript 相關

---

• Particles.js— 用於建立粒子的輕量級JavaScript庫

• Three.js — 一個用來在 web 中建立 3d 物體和 3d 空間的庫

• Fullpage.js— 快速實現全屏滾動特性

• Typed.js — 打字機效果

• Waypoints.js — 滾動到某個元素位置時觸發一個功能

• Highlight.js — web 語法高亮

• Chart.js — 使用 JavaScript 建立漂亮的圖表

• Instantclick — 可以明顯加速網站加載時間，鼠標 hover 時預加載資源

• Chartist — 另外一個圖表庫

• antv —螞蟻金服全新一代數據可視化解決方案

• Barba.js — 流式頁面過渡

• Vivus.js — 在 SVG 上繪製動畫

• Wow.js — 滾動時展示動畫

• Animate on scroll — 漂亮的頁面滾動元素動畫

• jInvertScroll — 視差滾動

• Parallax.js — 對智能設備方向變化作出響應的視差引擎

• Typeahead.js — 搜索補全

• Bounce.js — 建立炫酷的 CSS3 動畫

• Pagepiling.js — 全屏滾動

• Multiscroll.js — 兩列垂直反向滾動

• Favico.js — 動態 favicon

• Midnight.js — 固定頭部切換效果

• Sortable — 拖拽插件

• Slideout.js — 移動應用側滑導航

• Cleave.js — 實時格式化輸入內容

• Shepherd.js — 爲應用建立新手引導

• IziToast — 通知彈窗實現

---

nodejs 工具

---

• standard-傻瓜式的 Javascript 語法檢查工具

• david-幫你找到已通過期的依賴包

• nrm NPM註冊表管理器 (方便換源)

• nvm：Node 版本管理器

• localtunnel-把本機服務暴露到外網

• nodemon — 自動重啓 NodeJS 應用

• pm2 — 便捷管理 node 服務進程

• Handlebars.js — Javascript 模板引擎

• node-clinic — 一個開箱即用的 Node.js 應用診斷工具。

---

babel

---

• babel
• babel-plugin-macros - 前端文件寫 node 邏輯。
• babel-plugin-dynamic-import-node - 有些場景下會須要禁用 import() 語法。
• babel-plugin-react-require - 自動爲 jsx 語法加 react 引用。
• babel-plugin-rawest - React 的 DOM 直出方案。
• babel-plugin-transform-react-remove-prop-types - 刪除 prop-types，生產環境用。

---

打包工具

---

• vue-cli - vue 命令行工具。
• create-react-app - react 官方腳手架。
• webpack-merge - 合併 webpack 配置。
• webpack-chain - 經過 chain 風格 api 的方式修改 webpack 配置。
• prepack - 經過預先執行的方式優化打包結果。
• lebab/lebab - 把 es5 代碼轉成 es6，反向 babel。
• webpack - 打包項目。
• rollup - 打包 npm 庫。
• systemjs - 針對一些特殊場景，好比雲 ide，支付寶小程序 IDE 等。
• microbundle - 基於 rollup，簡化配置。
• bili - 基於 rollup，同上。
• webpack-dev-server - webpack 開發服務器。
• webpack-dev-middleware - webpack 中間件。

---

抓包工具

---

whistle-HTTP，HTTP2，HTTPS，Websocket調試代理

wireshark-免費的抓包工具

---

測試

---

• puppeteer 該庫也可用來寫爬蟲
• jest
• enzyme
• jsdom
• react-test-rerender - 官方出品。
• react-testing-library - kentcdodds 出品。

---

文檔

---

• vuepress
• docz
• storybook

---

命令行

---

• update-notifier - 更新提醒。
• rimraf - 刪除文件。
• depd - 給出 deprecated 警告。
• yargs - 命令行入口套件。
• yargs-parser - 命令行參數解析。
• chalk - 輸出不一樣顏色。
• cheerio - 用類 jQuery 語法處理 HTML。
• chokidar - 文件監聽。
• clipboardy - 複製文本到粘貼板。
• debug - 打印調試信息。
• deprecate - 給過時警告。
• glob - 文件查找。
• tiny-glob - 文件查找。
• signale - 漂亮的日誌打印。
• semver - semver 版本處理。
• execa - 比 child_process 好用，返回 Promise。
• ora - 控制命令行光標，顯示 loading 等。
• inquirer - 交互式命令接口，好比 prompt。
• enquirer - 同上，更 cool 一些。
• ajv - 參數校驗。
• ink - 用 React 處理命令行輸出。

---

工程

---

• projj - 本地 git 項目管理，支持 github 和 gitlab。
• 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 - 跨平臺的環境變量聲明。
• concurrently - 在 npm scripts 裏並行執行命令。
• @zeit/ncc - 打包爲 npm 包爲一個文件。
• npm-check - 檢測依賴升級狀況，我會和 yarn upgrade-interactive 配合着用，主要用來檢測冗餘依賴。
• cpx - 複製，支持 glob，而且能夠 watch。
• onchange - 監聽文件變更而後作一些事。
• just - 微軟出的任務管理器。
• tern - 代碼分析器，爲很多編輯器服務。

歡迎關注個人公衆號FE未道 ，不間斷更新， 咱們一塊兒腳踏實地，仰望星空。