構建工具 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項目各種配置（如：端口、接口跨域代理等），可以在官網的配置菜單下查找。