Переехать с webpack на vite

[viktorkasap]

Задача со звездочкой ⭐

ссылки которые могут помочь разобраться 1 - https://elixirforum.com/t/a-proof-of-concept-integration-of-vite-js-modern-js-assets-bundler-with-phoenix-liveview/37171/2 2 - https://mindreframer.com/posts/js-bundling-with-instant-live-reload-for-phoenix-and-liveview/

Работа ведется в ветке - CB_1152

Скрипт билда запускать в баше аппа

• команда чтобы войти в баш - make compose-bash
• команда билда - npm run vite-build

для тестов сборка будет происходить в services/app/priv2, потом ее удалим и будем в priv все билдить

[viktorkasap]

WIP #1152

добавил vite.config.js добавил скрипты билда и запуска, надо будет скрипт watch добавить

[Guryanov-Maksim]

Добавил watch.

Запускается командой make compose.

На данный момент есть такие проблемы:

1. Не работает библиотека gon (https://github.com/manvalls/gon), везде теперь используется window.Gon.
2. UPDATE 2023.01.12 ~~Monaco Editor выдает вот такую ошибку в консоль браузера:~~

Ошибку убрал. Причина ошибки скорее всего была в том, что в фронтенде worker порождал другой worker, но этот порожденный worker находился в домене, отличном от домена родительской страницы, что запрещено документацией. На данный момент устранил с помощью плагина vite-plugin-monaco-editor (использовал для того, чтобы собрать код для создания worker вместе с зависимоcтями в один файл и разместить в домене родительской страницы) и добавил скрипт в разметку (чтобы с помощью метода importScripts импортировать вышеуказаный bundle и запустить его для создания worker):

<script>
  self.MonacoEnvironment = ((paths) => ({
    getWorkerUrl(moduleId, label) {
      // ------- dev mode -------
      const workerBundlePath = paths[label];
      const origin = 'http://localhost:8080';
      // -------------------------

      // ------- prod mode -------
      // const workerBundlePath = `/assets/assets${paths[label]}`;
      // const origin = window.location.origin;
      // -------------------------

      const js = `importScripts("${origin}${workerBundlePath}");`;
      const blob = new Blob([js], { type: 'application/javascript' });
      return URL.createObjectURL(blob);
    }
  }))({
    editorWorkerService: "/monacoeditorwork/editor.worker.bundle.js",
    typescript: "/monacoeditorwork/ts.worker.bundle.js",
    javascript: "/monacoeditorwork/ts.worker.bundle.js",
  });
</script>

Насколько это правильно - вопрос открытый! К тому же при изменении в vite.config.js опции base этот скрипт приходится редактировать, добавляя base к пути к бандлу воркера (например, base: /assets/ ====> editorWorkerService: "/assets/monacoeditorwork/editor.worker.bundle.js",)

3. Мидлвары с сокетами не работают без костылей при использовании hmr, пытаются подключиться дважды. Сейчас добавил везде вот такое, чтобы обойти двойное подключение:

 if (channel.state !== 'joined') {
    channel.join().receive('ok', camelizeKeysAndDispatch(actions.updateChatData));
  }

4. Не уверен, что это правильный способ импортировать модуль: https://github.com/hexlet-codebattle/codebattle/blob/f1295d9d59654d6eb080004d808b7fb58f589137/services/app/assets/js/widgets/containers/Editor.jsx#L151 Если использовать абсолютный путь, то возникает ошибка:

codebattle-app-1  | 1:50:38 PM [vite] warning: 
codebattle-app-1  | /app/assets/js/widgets/containers/Editor.jsx
codebattle-app-1  | 139|        const {
codebattle-app-1  | 140|          default: HighlightRules
codebattle-app-1  | 141|        } = await import(`monaco-ace-tokenizer/lib/ace/definitions/${syntax}.js`);
codebattle-app-1  |    |                         ^
codebattle-app-1  | 142|        this.notIncludedSyntaxHightlight.delete(syntax);
codebattle-app-1  | 143|        this.monaco.languages.register({
codebattle-app-1  | The above dynamic import cannot be analyzed by Vite.
codebattle-app-1  | See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats. If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

UPDATE 2023.01.12 Динамичекий импорт ( ../../../../node_modules/monaco-ace-tokenizer/lib/ace/definitions/${syntax}.js ) не подходит (скорее всего из-за того, что код библиотеки monaco-ace-tokenizer написан по стандарту ES5). Пока пришлось отказаться от динамического импорта и использовать статический импорт.

5. Подумать, как осуществить интеграцию с бекендом

6. ~~Не работает сборка для продакшена.~~ Вроде сборка заработала.

7. Неправильно работает hmr для assets/js/widgets/App.jsx. Чтобы обойти, сделано так, что при изменении App.js страница обновляется полностью.

8. UPDATE 2023.01.18 Когда в vite.config.js добавляется опция base, то перестает работать hmr. Проблема не решена. Для ее обхода в режиме watch опция base не задействована, при сборке и в режиме preview используется. Опция base нужна в режиме preview, чтобы vite правильно построил пути для статики.