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语法校验

结语

写到最后总结得差不多了，后续如果我想起还有哪些构建依赖遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。# 前端汇总系列：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语法校验

结语

写到最后总结得差不多了，后续如果我想起还有哪些构建依赖遗漏的，会继续在这篇文章上补全，同时也希望各位倔友对文章里的要点进行补充或者提出自己的见解。欢迎在下方进行评论或补充喔，喜欢的点个赞或收个藏，保证你在开发时用得上。