在实际项目中,我们初始化项目,一般是使用脚手架命令一键生成的,比如说使用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