前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >npm依赖(构建编译)

npm依赖(构建编译)

作者头像
JowayYoung
发布2020-04-01 16:55:34
2K0
发布2020-04-01 16:55:34
举报
文章被收录于专栏:JowayYoung谈前端

建议直接点击阅读原文,可查看兼容和代码

系列

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

结语

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 IQ前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 系列
  • 构建工具
  • 编译工具
  • 结语
  • 系列
  • 构建工具
  • 编译工具
  • 结语
相关产品与服务
文件存储
文件存储(Cloud File Storage,CFS)为您提供安全可靠、可扩展的共享文件存储服务。文件存储可与腾讯云服务器、容器服务、批量计算等服务搭配使用,为多个计算节点提供容量和性能可弹性扩展的高性能共享存储。腾讯云文件存储的管理界面简单、易使用,可实现对现有应用的无缝集成;按实际用量付费,为您节约成本,简化 IT 运维工作。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档