Порядок плагинов в Vite

Порядок плагинов решает, кто видит уже изменённый текст: второй хук получает результат первого.

Оба плагина будут менять строку модуля через transform. Первый заменит hello на world, второй - world на vite. Если поменять их местами, на экране останется другое слово. Модуль с исходным текстом:

document.querySelector('#app').textContent = '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>

В vite.config.js запишем два объекта в массив plugins в нужном порядке:

import { defineConfig } from 'vite'

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

После перезапуска сервера разработки откроем страницу и увидим vite: второй хук уже не находит hello, а работает со строкой world от первого. Поменяем местами объекты в массиве и снова проверим экран - цепочка разорвётся, если первым станет шаг, который ищет world в ещё не изменённом коде.

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

Поменяйте порядок двух плагинов местами при том же ready в исходнике и опишите, какое слово остаётся на экране и почему второй хук не срабатывает как ожидалось.