构建工具 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官网）

1.  安装vite：yarn create vite 或 npm init vite@latest
2. 初始化react项目（引用模板） ：npm init vite-react-app --template react
3. 安装依赖包：yarn install
4. 运行项目：npm run dev

 注释：vite项目各种配置（如：端口、接口跨域代理等），可以在官网的配置菜单下查找。