由於前陣子我們團隊遇到一個 @vue/cli-plugin-babel
的 cache 命中問題,也因此檢視了一下我們目前專案使用 vue cli + Webpack 4 似乎已經有點老舊了,因此協助團隊測試及評估升級 Vite。
由於我們團隊有上千個專案,因此希望盡量維持與原本的架構一致,一方面是萬一我們想要抽換回 Webpack 5 不必更動過多,另一方面是我們在升級舊專案時可以不更改專案程式碼直接移植,減少不必要的問題。
經過整理思考後有以下主要問題需要解決:
- 環境變數
- Webpack Modules
- Index.html 變數注入
環境變數
我們團隊在 Webpack 時期已有自行封裝環境變數的 function ,且封裝的功能性非常多,但 Vite 使用 import.meta.env
來取得環境變數,因此首要解決問題是維持 process.env.XXX
在專案中的寫法。
Vite 有提供 define 讓我們自行注入環境變數,因此可以借助 define
來實現這個功能。
雖然此舉已經可以在專案中取得 process.env
,但卻沒有 TypeScript
的自動提示,因此我們透過撰寫 rollup plugin
來自動產生型別定義檔案。
如此一來在開發時也能獲得自動提示,增加開發體驗及品質。
Webpack Modules
許多開發者常常使用 Webpack Modules + val-loader來打包一些資源,在 Vite 與 Rollup 中可以使用 Virtual Modules 來達成。
以下 plugin 範例有簡化過,可參考概念,值得注意的是路徑方面 Virtual Modules
是以 vite.config.ts
的所在目錄(project root)為主,而不是你的 plugin 檔案所在目錄。
接著將 plugin
檔案引入 vite.config.ts
並於 plugins 呼叫即可
import fetchPlugin from './src/plugin/fetch';export default defineConfig(() => {
return {
plugins: [
fetchPlugin()
],
}
}
於 src/vite-env.d.ts
進行型別的宣告
最後就可以在需要的地方引入了
import { data } from 'virtual:fetch-data';
Index.html 變數注入
為了避免更改 index.html
,我們將注入的規則寫成跟原先 webpack 一樣
結論
經過以上更動,我們幾乎可以在不更動專案程式碼時完成舊專案移植,尤其我們團隊因為 Webpack Modules 轉換上的一些困難所以一直沒有升級,也希望此文章可以幫助一些團隊更容易進行遷移升級 Vite 的測試及評估。