Vite是一种新型前端构建工具,能够显著提升前端开发体验。
vite 打包底层使用的是 rollup 和 esbuild。它们的作用都是将项目文件打包成需要的“静态”文件!这些静态服务最终还是要交给一个服务来代理用户才能访问的,比如 nginx、express static 等。
js通过node作为后端开发的语言时也是需要模块化开发的,同时也需要项目管理公里工具,例如webpack等来实现工程化,但是node的后端项目没有打包过程例如java可以打包为jar,go可以打包为二进制文件,js时解释性语言直接部署源码。js作为后端时也可以使用wabpack,vite作为项目管理工具。
vite支持常用前端框架
node使js脱离浏览器也可以独立运行,要想使用模块开发就需要先安装node环境,node自带npm(node package manager):node.js 的包管理器,用于node插件管理(包括安装、卸载、管理依赖等) ,npm 是随同 node.js 一起安装的包管理工具。Vite 需要 Node.js 版本 18+,20+。
npm create vue@latest
构建的项目如下:
在开发期间 Vite 是一个服务器,而 index.html
是该 Vite 项目的入口文件。
使用vite开发时是使用静态服务器开发,web页面都是通过服务服务器返回的而不是浏览器直接解析,因为浏览器不认识vue组件需要打包。这里vite就充当了服务器。
vite构建的vue项目是vue3项目。
vite服务器的启动命令
# 启动vite服务器命令
npm run vite dev
npm run vite serve
npm run vite
# 指定端口
npm run vite --port 80
构建静态资源
npm run vite build
命令在package.json
中可以配置
vite严格遵循ES6规范,其他如CommonJS
必须先转为ES6规范,包括模块。