构建工具 vite 入门教程
引用
中文官网:https://vitejs.cn/
参考来源:https://juejin.cn/post/6898116372887240712
一、概念
Vite,一个基于浏览器原生 ES imports 的开发服务器。
利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用,支持热更新,而且热更新的速度不会随着模块增多而变慢。
针对生产环境则可以把同一份代码用 rollup 打包。
二、优势
快速冷启动服务器
即时热模块更换(HMR)
真正的按需编译
三、工作原理
当声明一个 script 标签类型为 module 时,如: <script type="module" src="/src/main.js"></script>,
浏览器就会向服务器发起一个GET http://localhost:3000/src/main.js 请求main.js文件:
浏览器请求到了main.js文件,检测到内部含有import引入的包,又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件
如: GET http://localhost:3000/@modules/vue.js
如:GET http://localhost:3000/src/App.vue
其中,Vite 的主要功能就是通过劫持浏览器的这些请求,并在后端进行相应的处理,将项目中使用的文件通过简单的分解与整合,然后再返回给浏览器渲染页面,
vite整个过程中没有对文件进行打包编译,所以其运行速度比原始的webpack开发编译速度快出许多!
四、vite构建react项目(构建vue项目可见vite官网)
- 安装vite:yarn create vite 或 npm init vite@latest
- 初始化react项目(引用模板) :npm init vite-react-app --template react
- 安装依赖包:yarn install
- 运行项目:npm run dev
注释:vite项目各种配置(如:端口、接口跨域代理等),可以在官网的配置菜单下查找。