浅析常见前端构建工具

[ZhenHe17]

浅析常见前端构建工具

本文主要涉及gulp、webpack、rollup、parcel这几个时下热门的前端构建工具。这里将逐个分析并结合各自的特点谈谈它们的适用场景。

工具简介

• gulp
  • 基于node.js流的自动化构建工具
  • 能够管理和执行任务
  • 能够监听和读写文件
• webpack
  • 现代javascript应用程序的静态模块打包器
  • 专注于处理模块化的项目
  • 最终输出浏览器能使用的静态资源
• rollup
  • javascript模块打包器
  • 更好的tree shaking
  • 适合打包javascript库
• parcel
  • web应用打包工具
  • 极速
  • 零配置

使用示例

• gulp
  • 复杂示例
  • 简单示例
• webpack
  • webpack官方示例
  • vue-webpack模板
• rollup
  • rollup官方示例
  • vue中的rollup配置
  • react中的rollup配置
• parcel
  • parcel官方示例

适用场景分析

• gulp作为一个基于流的自动化构建工具，适用场景广泛。它既可以单独使用，也可以搭配其他工具使用（如gulp-webpack）；
• 如果你想开发一个模块化的web应用，webpack和parcel都是不错的选择，webpack有更活跃更成熟的社区、配合扩展插件能够应对大部分使用场景。而parcel的零配置更方便使用，同时打包速度也更快；
• 如果你想打包一个javascript库，建议选择rollup，它的打包效果和速度都比webpack更好。

遇事不决看案例，vue和react的源码都使用了rollup，而使用了vue或react的模块化web项目多数用webpack。案例虽不一定是满分的选择，但肯定是个经过考验的上等选择，可以以此参考。

参考文档

• 深入浅出webpack：1-2常见的构建工具及对比
• gulp
• webpack
• rollup
• parcel

才疏学浅，若有偏颇，欢迎指正补充^_^