这篇文章只是小白答疑解惑记录,写得有点乱乱的,读者见谅
很多资料是自己查找前辈们的资料了解的,侵权的话请联系我删除!
上回搞懂了npm、yarn等包管理工具,在配置和前端工程化实现的过程就会更知悉一些,但一开始接触前端框架的时候,让我疑惑的不仅是包管理工具,还有vite,我的老师不会详细解释vite,只教我用vite创建项目,等我学的时间久一点之后,我会经常听到前辈们提到webpack,带着疑惑查找资料,我又认识了roollup和esbuild。这些都是什么?有什么用,为什么“包管理工具” create vite能创建项目?
前言提到的vite、webpack、roollup和esbuild都是前端构建工具
,也有的称为“打包工具”。
前辈箴言:
- 打包工具听起来就只是一个简单的打包功能,而构建工具有很多其他的功能,比如编译、测试、打包、优化、压缩等,所以还是称之为构建工具比较好。
- 学习一个新的工具,首选的学习资料就是该工具的官网。官网的教程,系统而详细,不要一遇到问题就去百度/博客上搜,得到的结果往往是乱七八糟的。[小白痛苦:倒也不是不乐意看官网,但有时候官网教程没有百度/博客上的白话和省时,比如我第一眼就被vite的官网简介干懵了,当然偷懒确实要付出代价,需要多长个心眼防止被坑]
代码写好之后,我们需要对代码进行压缩、合并、转换、分割、打包等操作,这些工作需要构建工具去完成。
构建工具主要分为两类:
本文内容重点不是前端构建工具的详解,重点还是在vite,就不花大篇幅一一介绍了,详细的内容指路前辈文章:
小白必看,总结前端所有主流的构建工具,webpack / vite / roollup / esbuild,包含源码,建议关注+收藏_前端构建工具-CSDN博客
Vite 是近几年前端业界热门的建构工具 (build tool),它大幅地简化了前端建构的流程与时间。
官网:开始 | Vite 官方中文文档
简介:Vite(法语意为 “快速的”,发音 /vit/
,发音同 “veet”)由Vue
作者尤雨溪开发,是一种新型前端构建工具,能够显著提升前端开发体验。
功能:Vue的核心理念是“快速开发,高效部署”:
目前前端社群中的绝大部分框架,都采用了 Vite,包含 Astro,Nuxt,SvelteKit,Solid Start,Qwik City 都是;基本上除了 Next 与 Angular 之外,热门的框架都是选 Vite。
前辈箴言:
vite仅支持vue3.0+的项目,也即是说我们无法在其中使用vue2.x
之所以是面向现代浏览器,而不顾之前的浏览器,是因为vite本身是一个web应用开发者工具,而对于开发者来说,一般都是使用比较先进的浏览器来进行开发,所以我们可以直接使用一些现代浏览器支持的特性,而不考虑去兼容一些老的浏览器;
而现代浏览器支持的特性中,在vite中最为重要的一个,就是ES module。由于vite是面向现代浏览器的,所以它利用浏览器去解析imports,在服务器端按需编译返回,跳过打包过程。同时支持Vue文件和HMR(热更新),针对生产环境可以使用rollup打包。
vite开发环境依赖esbuild进行预构建,生产环境则依赖rollup进行打包,并且充分利用了现代浏览器的特性,比如http2、ES module,vite是站在众多巨人肩膀上的一个产物, 类似webpack + webpack-dev-server的结合体。
当我们使用webpack启动项目时,webpack会根据我们配置文件(webpack.config.js) 中的入口文件(entry),分析出项目项目所有依赖关系,然后打包成一个文件(bundle.js),交给浏览器去加载渲染。
这样就会带来一个问题,项目越大,需要打包的东西越多,启动时间越长。
在中,浏览器遇到内部的import引用时,会自动发起http请求,去加载对应的模块。
vite也正是利用了ES module这个特性,使用vite运行项目时,首先会用esbuild进行预构建,将所有模块转换为es module,不需要对我们整个项目进行编译打包,而是在浏览器需要加载某个模块时,拦截浏览器发出的请求,根据请求进行按需编译,然后返回给浏览器。
这样一来,首次启动项目(冷启动)时,自然也就比webpack快很多了,并且项目大小对vite启动速度的影响也很小。
运行原理如果真要学起来的话,不是一两句话就可以说清楚的,这个部分的内容主要是从运行原理方面说明vite为什么比webpack快;
值得一提的是,运行原理在面试中经常考到,后续一定好好准备
图片来源于vite官网
这部分来源于前辈文章,更详细的内容:搞懂vite为什么比webpack快!运行原理、构建方式等有什么不同! - 知乎
搭建项目不是本文重点,你可以通过vue
和vite
官网了解不同方式搭建vue3项目的过程,也可以查看这位前辈的文章:vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_创建vue3项目-CSDN博客
在初始化项目时,官方文档推荐使用 npm create vite
命令来创建项目。与以往需要全局安装命令行工具再通过工具初始化项目的方式不同,npm create vite
提供了一种更简洁、更轻量化的项目创建方式。
有点复杂,水平不太够,暂时没法整理清楚,只能先引用前辈的文章做一个记录。
为啥能用 npm create vite 创建项目 - 知乎
nodejs和npm和vite_nodejs与vite-CSDN博客
文献参考:
小白必看,总结前端所有主流的构建工具,webpack / vite / roollup / esbuild,包含源码,建议关注+收藏_前端构建工具-CSDN博客
Vite 是什么? 为什么要用 Vite? 它解决了哪些问题? 又是如何解决?|ExplainThis
Vite 极速指南:下一代前端构建工具的核心解析 - 知乎
搞懂vite为什么比webpack快!运行原理、构建方式等有什么不同! - 知乎
vue3 项目搭建教程(基于create-vue,vite,Vite + Vue)_创建vue3项目-CSDN博客
为啥能用 npm create vite 创建项目 - 知乎
nodejs和npm和vite_nodejs与vite-CSDN博客
无论是文章格式、内容是否严谨、其他相关疑惑,都欢迎讨论和指正!