[筆記] vite 開發實作替代 html 模版文字 @地瓜大的飛翔旅程

章節連結

內容
參考資料

過往使用 webpack 打包時，可以對 html 上方的模版區塊進行取代，進而產出客製化的顯示內容。這在產生不同客戶的 <title>、一些追蹤碼設定、og 相關資料挺有用的。這邊筆記下用 vite 撰寫一個類似的 plugin 來達成。

內容

這個 vite 的 plugin 其實不難。原理是將接收到的 html 內容的某一個區塊，用搭配 string.replace 的正則表達式，將符合的 key 值給換成對應的字串而已。

// vite.config.ts

const windowVariables: Record<string, string> = {
  __WEBSITE_TITLE__: JSON.stringify('I am website title'),
}

export default defineConfig({
  plugins: [
    {
      name: 'transform-html',
      transformIndexHtml: {
        order: 'pre',
        handler(html: string) {
          return html.replace(/<%=\s*(\w+)\s*%>/gi, (_, p1) => {
            const value = windowVariables[p1]
            // 去掉 JSON.stringify 帶來的引號
            return value ? value.replace(/^"|"$/g, '') : ''
          })
        },
      },
    },
  ]
})

// index.html
<title><%= __WEBSITE_TITLE__ %> - Hohoho</title>