Преобразование кода в Vite

Преобразование кода меняет текст модуля одним хуком до того, как его увидит браузер.

Пусть на странице должно появиться одно слово. В исходнике запишем hello, а плагин подменит его на другое только в памяти сервера. Сначала точка входа и модуль:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>hello</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Текст для блока app зададим в модуле:

document.querySelector('#app').textContent = 'hello';

В файле настройки опишем плагин с одним хуком transform. Функция получает строку кода и путь файла; вернём строку, где hello заменено на vite:

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      name: 'replace-hello',
      transform(code, id) {
        if (!id.endsWith('main.js')) {
          return
        }
        return code.replaceAll('hello', 'vite')
      },
    },
  ],
})

Перезапустим сервер разработки, откроем http://localhost:5173 и увидим на странице vite, хотя в src/main.js по-прежнему записано hello. Заголовок вкладки плагин не трогал: там остаётся hello из index.html.

Запишите в модуле слово ready, настройте хук так, чтобы на странице отображалось done, и проверьте результат после перезапуска сервера.

Ограничьте замену только файлами в src/ и убедитесь, что vite.config.js не проходит через неё.