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依赖(构建编译)

系列