在实际项目中，我们初始化项目，一般是使用脚手架命令一键生成的，比如说使用create-vue初始化vue项目的时候，就会默认使用vite进行打包，同理使用vue-cli的时候就是默认使用webpack进行打包（现在vue已经不推荐使用这种方式了）

使用脚手架初始化项目简单又方便，很多东西都是现成的，但是这就导致有的时候新手小白不会去认真看打包工具的官网，误以为诸如webpack和vite等打包工具只能和vue/react等框架绑定使用。

所以我的建议是，可以跟着打包工具的官网，一步一步跟着来详细的学习一下，然后再看你用脚手架初始化的项目，有些东西和配置你才会豁然开朗。

还是需要强调一下，学习一个新的工具，首选的学习资料就是该工具的官网。官网的教程，系统而详细，不要一遇到问题就去百度/博客上搜，得到的结果往往是乱七八糟的。

我用gitee仓库纯粹是因为不方便科学上网，大家也可以使用github

我的仓库地址是learn-pack-build

把你的项目克隆到本地，并新增.gitignore文件。

接下来我们就在这个项目中学习各种打包工具。

我们把这些打包工具主要分为两类，一类是基于任务的打包工具（grunt和gulp），第二类是基于模块的打包工具（webpack、vite、esbuild、roollup、parcel、browserify），这8个的基础用法我们都要学习一下，才能够更好的理解。

注意，这些工具我们比较习惯称之为构建工具，而不是打包工具，因为打包工具听起来就只是一个简单的打包功能，但是构建工具有很多其他的功能，比如编译、测试、打包、优化、压缩等。还是称之为构建工具比较好。

对于基于任务的构建工具主要就了解以下两个就行，了解即可，知道它们为什么是基于任务的就行。

Grunt是一个基于任务的构建工具，通过配置任务列表，实现前端项目的自动化构建和优化。Grunt的任务通常是串行执行的，但是可以使用一些插件实现并行执行。

Grunt是一个JavaScript任务运行器，它使用配置文件（通常是一个名为Gruntfile.js的文件）来定义任务。任务通常是一些插件的集合，用于执行各种操作，如文件的合并、压缩、编译等。Grunt使用相对较多的配置，因此有些开发者可能觉得其配置较为冗长。

注意这个单词的发音【gruangt】

我们可以跟着grunt的官网来学一下到底怎么用，恕我直言，我也没用过这个工具，但是跟着官网一步一步来，是可以很容易打包一个js文件的。

详细代码请参看项目的这个文件夹

重点是Gruntfile.js这个文件，在这个文件中【定义任务】—>【注册任务】可以使用各种插件，grunt有很多可以使用的插件，总之我们需要理解grunt是基于任务的构建工具。

Gulp也是一个基于任务的构建工具，通过定义一系列任务，可以实现对前端项目的自动化构建，包括文件的合并、压缩、编译等。Gulp原生就可以支持任务的串行、并行执行。

Gulp则是另一个JavaScript任务运行器，它更加基于代码，使用流/管道（stream）来定义任务。开发者通过编写JavaScript代码来配置任务，这使得任务的定义更加灵活、简洁。Gulp的流式处理方式通常被认为更加直观和易于理解。

gaop

同样的我们跟着gulp的官网一步一步来实现一个简单的demo。

Grunt和Gulp是JavaScript的构建工具，它们有很多相似之处，但也存在一些区别，主要集中在以下几个方面：

配置方式：

API和插件：

性能：

易用性和可读性：

总的来说，Grunt和Gulp在实现自动化构建方面都能很好地胜任，但在使用体验、性能和可读性等方面存在一些差异，开发者可以根据自己的偏好和项目需求选择合适的工具。

好了，基于任务的构建工具就了解grunt和gulp两个就行。接下来我们要学习一下重头戏，基于模块的构建工具，这个部分我也分为两组。一组是简单的，如parcel、browserify、roollup、esbuild，一组是较复杂的webpack和vite

Parcel是一个零配置的前端打包工具，可以自动识别项目中的文件，并进行相应的打包。它支持多种文件类型，支持热更新，并且具有快速的打包速度。

注意这个零配置，给人的感觉好邪乎，好神奇，有这么好的事？不要怕，一切都是纸老虎

同样的我们跟着parcel官网来实现一个简单的demo，你测试一下会发现确实很快，而且不用任何关于parcel的配置文件。

我个人认为，如果你自己写一个学习的项目，不考虑性能，用这个打包是绝佳的首选，简单好上手，零配置真是强推。

但是如果在实际的项目中，我们就要考虑性能等各种方面，parcel没有webpack的社区活跃，功能强大。

parcel2的官网里面显示也支持插件等，功能比1强大很多，有兴趣可以试着学习一下（我没有兴趣～～）

Browserify允许在前端使用类似于Node.js的require语法，将模块化的JavaScript文件打包成一个文件，以便在浏览器中使用，它打包后的文件可以直接在html中引用。

模块化开发：Browserify允许开发者使用模块化的方式组织JavaScript代码，使得代码更易于维护、重用和测试。通过require()来引入模块，可以将代码分割成多个文件，每个文件负责一个特定的功能，有助于降低代码耦合度。

依赖管理：Browserify自动处理模块之间的依赖关系，可以将各个模块打包到一个文件中，避免了手动管理依赖关系的繁琐工作。这简化了开发流程，提高了开发效率。

前端与后端代码共享：由于Browserify可以使用类似于Node.js的模块系统，在一定程度上实现了前端和后端代码的共享，使得开发者可以更容易地在前端和后端之间共享代码和逻辑，提高了代码复用性和一致性。

使用npm生态系统：Browserify可以直接使用npm上的模块，这意味着您可以利用npm生态系统中丰富的第三方模块和工具来加速开发，无需额外的学习成本。

支持预处理器：除了JavaScript模块外，Browserify还支持预处理器，如通过适当的插件，可以使用CoffeeScript、TypeScript、Less等语言，并将其编译成浏览器可执行的JavaScript代码。

如果你用过webpack等主流的构建工具，你会发现browserify有的功能，webpack也有，因为browserify是先提出来的，所以有了webpack之后就不咋用了。

看出来了，它的核心优势就是前端使用类似于Node.js的require语法

同样的我们跟着browserify的官网实现一个简单的demo，看看怎么回事。

详细代码请参看项目的这个文件夹，在这个demo中也是没有配置文件，只是单纯的使用browserify打包了一个js文件。

这一章节会介绍4个重要的构建工具，分别是rollup、esbuild、webpack、vite，都是我们在开发过程中常用的，这四个构建工具的共同点有

Rollup是一个JavaScript模块打包器，专注于打包JavaScript库。它能够进行Tree-shaking，即删除未使用的代码，以减小打包后的文件体积，常用于构建库（library），特别是那些专注于ES6模块的库。

JavaScript库是啥？

JavaScript库通常包含了一系列功能、组件或模块，用于在开发过程中提供特定的功能或解决特定的问题。vue、react、jquery、lodash等都属于javascript库。就是我们使用npm命令去安装的都是js库。

在我们的项目中很少单独时候rollup打包，但是实际上我们常用的构建工具vite他的底层逻辑就是使用了rollup,所以还是有必要学习一下的。

可以跟着rollup官网进行学习，rollup支持配置文件，支持插件，但是不支持热更新。

详细代码请参看项目的这个文件夹。

如果你在自己学习一个新的技术，也可以是试着使用rollup进行打包。不过rollup不支持热更新，不如之前说的parcel方便。

esbuild是一个非常快速的JavaScript和TypeScript构建工具。它以极快的速度执行构建任务，并支持Tree-shaking，即消除未使用的代码。esbuild被设计成一个零配置的工具，但也提供了一些配置选项供用户进行调整。

esbuild主打一个快速，但是不支持插件配置，也不支持热更新，他是2019年首次发布的，因此它相对较新。所以目前为止有些插件和esbuild并不兼容，这也就是vite的打包使用了rollup而没有用esbuild的原因，相对而言rollup有更活的插件api和基础建设。

一下内容来自vite官网

可以跟着esbuild官网进行学习，esbuild不支持插件，也不支持热更新。

那么问题来了，问什么esbuild会这么快？

用Go编写：esbuild是用Go编写的，Go是一种编译型语言，具有出色的性能和并发能力。esbuild利用了Go的特性，通过并行编译和高效的资源管理，实现了快速的构建速度。

高效的算法和数据结构：esbuild使用了一些高效的算法和数据结构来加速构建过程。例如，它使用了一种称为并行增量算法的技术，可以有效地处理多个模块并行编译，从而提高了构建的效率。

零分析的工作方式：esbuild不会像其他工具那样对整个项目进行完整的分析，而是仅仅对被导入的模块进行编译。这种零分析的工作方式大大减少了构建过程中的计算量，从而提高了构建速度。

基于原生代码生成器：esbuild采用了一种基于原生代码生成器的方法，可以直接生成高效的原生代码，而无需通过中间表示或额外的转换步骤。这样可以减少构建过程中的不必要的计算和内存开销，从而提高了构建的速度。

Vite是一种新型的前端构建工具，特别设计用于快速开发。Vite支持使用原生ES模块作为开发环境，采用按需编译的方式，因此在开发过程中能够获得更快的冷启动速度。Vite集成了Vue.js，但也可以用于其他框架或库。

vite是我们常用的一个打包工具，有三个问题我们理解了，基本就涵盖了面试题中的问题，分别是

可以点进去看一下详细内容，有一点需要补充一下，这些内容在vite的官网实际上都有详细的描述，所以说官网是个好东西，建议大家都去看一遍官网，常看常新。

接下来还是实现一个简单的demo，我不使用脚手架，也不用vue等框架，就自己写一个。

新建vite文件夹后，并运行下面命令，跳转到该文件夹下面

cdvite4.3.2初始化项目在vite文件夹下面，运行下面的命令

npminit-y4.3.3安装vite在vite文件夹下面，运行下面的命令

npmivite-D4.3.4新建index.html/index.jsindex.html作为入口文件，并在index.html中引入index.js

代码如下

vite