NPM依賴：構建編譯

系列

• npm依賴：構建編譯 請戳這裏，持續更新
• npm依賴：框架平臺 請戳這裏，持續更新
• npm依賴：類庫工具 請戳這裏，持續更新

構建工具

• bower: 依賴管理
• brew: OSX包管理
• browser-sync: 同步測試
• cnpm: 依賴管理
• deno: JS引擎(Node代替品)
• fis3: 項目構建
• git: 分佈式版本控制系統
• grunt: 項目構建
• gulp: 項目構建
• gulp-cli: Gulp依賴
• n: Node版本管理
• node: JS引擎
• npm: 依賴管理
• nrm: NPM鏡像管理
• nvm: Node版本管理
• parcel: 項目構建
• require: AMD項目構建
• rollup: 項目構建
• sea: CMD項目構建
• webpack: 項目構建
• webpack-cli: Webpack依賴
• yarn: 依賴管理
• yeoman: 項目構建

Webpack轉換器

• babel-loader: JS轉換器
• css-loader: CSS轉換器
• eslint-loader: JS校驗轉換器
• fast-css-loader: CSS轉換器
• fast-sass-loader: Sass轉換器
• file-loader: 文件轉換器
• handlebars-loader: Handlebars轉換器
• html-loader: HTML轉換器
• image-loader: 圖像壓縮轉換器
• less-loader: Less轉換器
• postcss-loader: Postcss轉換器
• raw-loader: 文本轉換器
• sass-loader: Sass轉換器
• style-loader: Style轉換器
• ts-loader: TS轉換器
• tslint-loader: TS校驗轉換器
• url-loader: URL轉換器

Webpack插件

• add-asset-html-webpack-plugin: 靜態文件插入
• clean-webpack-plugin: 目錄清空
• compression-webpack-plugin: Gzip壓縮
• copy-webpack-plugin: 文件複製
• deep-scope-analysis-webpack-plugin: 深度搖樹優化
• extract-text-webpack-plugin: CSS分離
• fork-ts-checker-webpack-plugin: Tslint進程
• friendly-errors-webpack-plugin: 錯誤友好提示
• html-tags-webpack-plugin: 靜態文件插入
• html-webpack-plugin: HTML入口配置
• imagemin-webpack-plugin: 圖像壓縮
• lodash-webpack-plugin: Lodash按需導入
• mini-css-extract-plugin: CSS分離
• optimize-css-assets-webpack-plugin: CSS壓縮
• parallel-webpack-plugin: 並行處理
• progress-bar-webpack-plugin: 打包進度
• purifycss-webpack-plugin: CSS壓縮
• speed-measure-webpack-plugin: 構建速度
• stylelint-webpack-plugin: CSS校驗
• terser-webpack-plugin: JS壓縮(ES6)
• uglifyjs-webpack-plugin: JS壓縮(ES5)
• webpack-build-notifier: 構建提示
• webpack-bundle-analyzer: 打包模塊分析
• webpack-dashboard: 數據面板
• webpack-dev-server: 本地服務器
• webpack-merge: 配置合併
• webpack-spritesmith: CSS精靈圖
• webpack-visualizer: 打包模塊分析

編譯工具

• babel: JS編譯
• browserslist: 瀏覽器內核
• csscomb: CSS排序
• cssnano: CSS壓縮
• eslint: JS校驗
• font-spider: 字體壓縮
• font-spider-plus: 字體壓縮(升級版)
• happypack: 並行處理
• less: CSS編譯
• node-sass: Sass引擎
• postcss: CSS編譯
• posthtml: HTML編譯
• prettier: 代碼格式化
• purifycss: CSS壓縮
• sass: CSS編譯
• stylelint: CSS校驗
• stylus: CSS編譯
• terser: JS壓縮(ES6)
• tslint: TS校驗
• typescript: JS編譯
• uglifyjs: JS壓縮(ES5)

Postcss插件

• autoprefixer: 前綴墊片
• postcss-cssnext: 新語法墊片
• postcss-import: 內聯Import墊片
• postcss-preset-env: 預處理環境

Babel插件

• babel-eslint: Eslint配置
• babel-minify: JS壓縮
• babel-plugin-import: CSS和JS按需導入
• babel-plugin-lodash: Lodash按需導入

Stylelint插件

• stylelint-config-prettier: 格式化配置
• stylelint-config-standard: 標準配置

Eslint插件

• eslint-config-prettier: 格式化配置
• eslint-config-standard: 標準配置
• eslint-friendly-formatter: 錯誤友好提示
• eslint-plugin-html: HTML內聯JS語法校驗
• eslint-plugin-import: Import語法校驗
• eslint-plugin-node: Node語法校驗
• eslint-plugin-prettier: 格式化語法校驗
• eslint-plugin-promise: Promise語法校驗
• eslint-plugin-react: React語法校驗
• eslint-plugin-standard: 標準語法校驗

Tslint插件

• tslint-config-standard: 標準配置
• tslint-plugin-react: React語法校驗

結語

寫到最後總結得差很少了，後續若是我想起還有哪些構建依賴遺漏的，會繼續在這篇文章上補全，同時也但願各位朋友對文章裏的要點進行補充或者提出本身的看法。歡迎在下方進行評論或補充喔，喜歡的點個贊或收個藏，保證你在開發時用得上。

專欄文章

原文：請戳這裏
做者：JowayYoung
倉庫：Github
博客：掘金、思否、知乎
公衆號：Uzero
聯繫我：關注公衆號後有個人微信喲

《靈活運用》系列

• 靈活運用CSS開發技巧 強烈推薦收藏👍
• 靈活運用JS開發技巧 強烈推薦收藏👍
• 靈活運用PS切圖技巧 強烈推薦收藏👍

《依賴彙總》系列

• NPM依賴：構建編譯 強烈推薦收藏👍
• NPM依賴：框架平臺 強烈推薦收藏👍
• NPM依賴：類庫工具 強烈推薦收藏👍

《必備工具》系列

• Cmder&iTerm美化你的終端 強烈推薦收藏👍

《隨筆》系列

• 一個零配置開箱即用的React&Vue應用自動化構建腳手架 強烈推薦收藏👍
• 前端性能優化指南 強烈推薦收藏👍
• 詳細判斷瀏覽器運行環境 強烈推薦收藏👍
• H5與App的通信方式 強烈推薦收藏👍
• 1.5萬字歸納ES6所有特性 強烈推薦收藏👍

關注公衆號Uzero，更多前端小乾貨等着你喔！我是JowayYoung，喜歡分享前端技術和生活紀事，學習與生活不落下，天天進步一點點，與你們相伴成長