markdown 的WebPack&汇总与包裹对比

Posted 2021-05-06

## 概述
现在项目构建已经成了整个项目开发流程中不可或缺的一部分，社区内的构建方案也处于一个百花齐放的状态，通过[2017年 JavaScript 明星项目](https://risingstars.js.org/2017/zh/?spm=a313p.24.18y0dt9.91917345392&short_name=a.QnDI&app=chrome#section-build)我们可以清晰了解社区内比较火的构建方案。本文的主要目的是基于现在商家&小二端开发场景，选取webpack、rollup及parcel三个热门项目，进行简单地原理剖析，同时选用一个实例项目来对三个构建工具进行横向对比。
## webpack

## rollup
[rollup](https://rollupjs.org/guide/en)也是近几年比较火的构建工具，他直接对标ES6的模块模型，并首先提出tree-shaking的思想，可以静态分析代码中的import，排除实际并未使用的代码，这样可以有效控制打包文件的大小，不过现在npm上大部分包还都是提供的Commonjs版本的，因此无法享受到tree-shaking带来的红利，不过已经有好多优秀的开源工具库，类似React、Vue、D3、threejs等等已经开始用rollup来作为构建工具。尽管rollup支持应用级构建，但是更多地大家还是推荐应用级使用webpack，工具级使用rollup。

## parcel
[parcel](https://github.com/parcel-bundler/parcel)是去年才推出的新的前端资源构建工具，并在短时间内达到14K个star的关注度，一跃成为2017年构建类工具的冠军。parcel官方宣传的最主要的特点就是零配置及速度快，并在文档中描述了parcel与其他主流构建工具设计上的不同：
* 零配置 - 相对于其他构建工具需要大量的配置及插件使用才能是构建顺利进行，parcel采取零配置的方式，主要流程内置，只需要用户配置入口文件即可；
* 并行化 - 相对于其他构建工具构建速度慢的问题，parcel采用并行化，利用多核资源并行编译，提升构建速度；
* 构建流程优化 - 这应该是parcel最主要的亮点，其他构建工具大多依赖loader或者transform进行代码编译，如果对于同一类型文件使用多个编译器时，需要串行将源代码输入编译器，然后进行构建AST、代码转换、代码生成，待前一个编译器的流程完成后再转向下一个处理器，parcel在设计上将编译器内置，这样带来的好处是在文件编译过程中只需要做一次构建AST和一次代码生成，然后每个编译器只需要进行代码转换操作，这样的设计方案可以有效优化构建速度。

parcel的工作原理就比较清晰，大致可以分为以下以下几步：
* 构建资源树 - parcel从入口文件入手，进行代码解析及依赖分析，生成整个项目的依赖树，并使用内置的文件编译器对每个资源节点进行编译，生成最终的编译形式；
* 构建打包树 - 将资源数映射到打包树，首先为入口文件创建一个bundle，然后根据import来创建子bundle从而实现代码拆分，如果引入了其他类型的文件，会为对应的文件创建兄弟bundle节点，如果一个资源node被多个bundle依赖，会将这个资源node放入到做个依赖bundle的最近公共祖先bundle中；
* 打包 - 打包树生成以后，每个包都有特定类型的packager来写入文件，打包器将知道如何将资源合并成可以在浏览器中最终使用的文件；

## 真实对比

## 总结

## 参考