關於Vite專案打包後瀏覽器相容性問題的解決方案

一、問題描述

vite+vue3專案開發完以後，你會發現打包後的專案執行在新版瀏覽器可以正常顯示，但執行在一些版本比較老的瀏覽器如 Chrome < 23、Firefox < 21和IE等瀏覽器上時顯示一片空白，並且沒有任何的錯誤提示。

二、問題分析

此時你的大腦可能跟頁面一樣也是一片空白，但是不要慌，我們先分析一下產生這個問題的可能的原因：那些版本較低的瀏覽器不支援ES6的語法和新API，而Babel預設只轉換新的JavaScript句法，不轉換新的API，比如Proxy、Symbol、Promise等全域性物件，以及一些定義在全域性物件上的方法都不會轉碼。

三、解決方案

Plan A：在vite.config.js中設定瀏覽器的相容性。

我們專案是用vite搭建的，因此我首先想到了使用vite自帶的API去設定瀏覽器相容性。
設定build.target和buid.cssTarget

  build: {
      target: ['chrome52'],
      cssTarget: ["chrome52"],
      }

打包並執行到瀏覽器後發現還是一片空白，檢視打包生成的檔案，發現裡面依然有const、Promise等新語法和API，並沒有為我們轉換。Plan A ,No.

Plan B：先設定TypeScript轉換語法，然後再讓vite相容目標。

在tsconfig.json檔案內設定target為”es5”，然後開始打包。
打包時報錯：error: Transforming const to the configured target environment (“es5”) is not supported yet
錯誤資訊大抵在告訴我們：程式碼中有const等目標環境不支援的語法，並且它目前還不支援將const轉換為目標環境"es5"。嗯這就有點意思了。Plan B, NO.

Plan C：引入babel-polyfill環境墊片

上面轉換語法的方案失敗後，我嘗試給瀏覽器環境請一個外援：babel-polyfill，讓它來做那些低版本瀏覽器環境做不到的事情。
什麼是polyfill？官方的解釋是：“用於實現瀏覽器不支援原生功能的程式碼”，我們可以簡單理解為polyfill可以在當前執行環境中模擬出那些當前環境不支援的API，它為我們的當前環境提供了一個墊片，我們可以在這個墊片上使用新API。

首先我們先安裝babel-polyfill：

npm install --save babel-polyfill

然後在main.js裡引入它：

import ‘babel-polyfill'

然後我們重新打包、啟動、執行到瀏覽器，有些夥伴到這一步可能就成功了，但我的仍然是一片空白！
慌不慌？你說慌不慌，慌！我也覺得慌，為什麼？網上那麼多人用這個方法成功了，但我們失敗了，這能不慌？ Plan C，No！

Plan D：使用@vitejs/plugin-legacy外掛

以上三個方案失敗後，我又重新迴歸到vite這一塊，在vite官方檔案中我找到了vite自帶外掛庫，並且在外掛庫中找到了一個關於瀏覽器相容支援的外掛：@vitejs/plugin-legacy
首先安裝外掛：npm i @vitejs/plugin-legacy -D

然後在vite.config.js中設定

import legacyPlugin from '@vitejs/plugin-legacy'
export default defineConfig( {
    plugins: [
        legacyPlugin({
            targets:['chrome 52'],  // 需要相容的目標列表，可以設定多個
            additionalLegacyPolyfills:['regenerator-runtime/runtime'] // 面向IE11時需要此外掛
        })
    ]
})

打包、執行到瀏覽器。

新版本瀏覽器執行正常！舊版本瀏覽器執行正常！Plan D，yes！

以下是@vitejs/plugin-legacy外掛的簡單介紹：
外掛預設行為：
1.使用@babel/preset-env轉換，為包中的每個塊生成相應的遺留塊。
2.生成一個包含 SystemJS 執行時的 polyfill 塊。
3.使用

打包後的變化：

• 啟用外掛後打包完成的目錄多出了一些帶有legacy字樣的檔案，每個js指令碼檔案都有一個與其對應的遺留版本。
• html檔案中新增了一些指令碼，這些指令碼根據瀏覽器的支援程度來動態的引入正常版本檔案還是帶有legacy字樣的遺留版本檔案。
• 此時當專案執行在一些版本較低的瀏覽器時，外掛新增的指令碼會自動載入legacy版本的檔案。

四、過程中遇到的其他問題

在Plan D成功在低版本瀏覽器執行以後，發現有一些CSS樣式顯示不正常，隨後確認是重寫Vant的CSS變數沒有生效。
剛開始認為是CSS在打包時沒有做好相容處理，然後就折騰了一番CSS的相容支援。css直譯器、postcss外掛和vite設定css目標環境都沒用。

後面就沒有什麼思路了，後來想起來在vite.config.js設定中有一個關於樣式按需載入的外掛：

此時就想是不是這個外掛影響到了我的CSS的正常效果，當我把它移除並重新打包執行後，樣式就回歸正常了，看來確實是被它影響的。
使用這個按需載入的外掛後，當頁面載入時，它會根據它的一些規則去判斷當前需要載入哪些樣式檔案，哪些不需要載入。在載入這些樣式檔案時，如果樣式檔案裡有我們自定義全域性樣式重名的，那麼根據css規則，我們自定義過的全域性樣式會被覆蓋掉。
在本次的案例中，我們重寫了Vant元件的部分變數，並全域性引入了。在開啟包含這些變數的頁面時，按需載入外掛此時才會載入Vant的樣式檔案，我們在全域性重寫的變數又被重寫了，因此重寫的全域性變數沒有生效。

到此這篇關於關於Vite專案打包後瀏覽器相容性問題的解決方案的文章就介紹到這了,更多相關Vite打包瀏覽器相容內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！