Open
Description
浅析常见前端构建工具
本文主要涉及gulp、webpack、rollup、parcel这几个时下热门的前端构建工具。这里将逐个分析并结合各自的特点谈谈它们的适用场景。
工具简介
- gulp
- 基于node.js流的自动化构建工具
- 能够管理和执行任务
- 能够监听和读写文件
- webpack
- 现代javascript应用程序的静态模块打包器
- 专注于处理模块化的项目
- 最终输出浏览器能使用的静态资源
- rollup
- javascript模块打包器
- 更好的tree shaking
- 适合打包javascript库
- parcel
- web应用打包工具
- 极速
- 零配置
使用示例
- gulp
- webpack
- rollup
- parcel
适用场景分析
- gulp作为一个基于流的自动化构建工具，适用场景广泛。它既可以单独使用，也可以搭配其他工具使用（如gulp-webpack）；
- 如果你想开发一个模块化的web应用，webpack和parcel都是不错的选择，webpack有更活跃更成熟的社区、配合扩展插件能够应对大部分使用场景。而parcel的零配置更方便使用，同时打包速度也更快；
- 如果你想打包一个javascript库，建议选择rollup，它的打包效果和速度都比webpack更好。
遇事不决看案例，vue和react的源码都使用了rollup，而使用了vue或react的模块化web项目多数用webpack。案例虽不一定是满分的选择，但肯定是个经过考验的上等选择，可以以此参考。
参考文档
才疏学浅，若有偏颇，欢迎指正补充^_^
Activity