[筆記] Vite 開發與生產環境，注入內容到瀏覽器 window 物件中 @地瓜大的飛翔旅程

章節連結

內容

開發 Dev 環境
正式 Prod 環境

參考資料

使用 Vite 開發時， dev 與 prod 環境中若要自動注入 window 物件，其邏輯是有所不同的。這邊筆記下不同之處，以及如何修正。

內容

開發 Dev 環境

1. 可以透過 vite.config.define 來定義
2. 開發時，會透過 esbuild 將其主動注入 window 物件中。因此你可以透過 window.[物件 key] 來取得

正式 Prod 環境

1. 打包時，並不會主動注入 vite.config.define 的內容。因此你會需要自行將這些值，在打包時注入每一個 JS 檔案。如此一來，你就可以在 window 內取得
2. 你可以撰寫一個 Plugin 如下：

const injectToWindowPlugin = (variables)=> {
  return {
    name: 'inject-to-window',
    renderChunk(code: string) {
      const injectCode = Object.keys(variables)
        .map((key) => `window.${key} = ${JSON.stringify(variables[key])};`)
        .join('\n')

      return {
        code: code + `\n\n${injectCode}`,
        map: null,
      }
    },
  }
}