Цель
Я хотел бы использовать Vite для создания своего приложения с основным одностраничным приложением и дополнительной страницей ошибок, которая имеет такой же внешний вид и может быть объединена вместе. Все работает отлично, пока я не пытаюсь добавить в сборку второй вход.
Хотя я мог бы просто жестко запрограммировать страницу с ошибкой, мне хотелось бы, чтобы верхний и нижний колонтитулы обновлялись при их обновлении в одностраничном приложении. Для этого у меня есть шаблон, включающий HTML, JS и CSS. Я запускаю сценарий предварительной сборки, и он помещает все содержимое моего приложения в шаблон. Затем я запускаю vite на собранной странице, чтобы собрать файлы для развертывания. Это объединяет js и css из шаблона и приложения вместе. Я знаю, что это несколько нетипичное использование Vite, но по причинам, не имеющим отношения к этой проблеме, так и должно быть.
Это прекрасно работает, когда я связываю одностраничное приложение без страницы с ошибкой. Вот моя единственная страница vite.config.js:
экспортировать default defineConfig({ база: './', сервер: { открыть: './index.html }, плагины: [ встроенный источник(), ], строить: { пустойАутДир: правда, outDir: "../дист", RollupOptions: { вход: { основной: разрешить (__dirname, 'index.html'), }, } }, }) Проблема Проблема возникает, когда я добавляю страницу с ошибкой в качестве второго входа. Вот этот vite.config.js:
экспортировать default defineConfig({ база: './', сервер: { открыть: './index.html }, плагины: [ встроенный источник(), ], строить: { пустойАутДир: правда, outDir: "../дист", RollupOptions: { вход: { основной: разрешить (__dirname, 'index.html'), ошибка: разрешить (__dirname, '404.html'), }, } }, }) Единственное изменение — строка, начинающаяся с «err».
Когда я добавляю этот второй ввод, сборка завершается успешно без ошибок, но страница index.html имеет ошибку времени выполнения и больше не работает.
При загрузке index.html в браузере я вижу эту ошибку Uncaught ReferenceError: require не определен, что, по-видимому, связано с использованием commonjs-включения в контексте модуля es. Очевидное решение — просто обновить код, но вот в чем загвоздка: проблемный код является частью динамически создаваемого шаблона и не может быть изменен. Вероятно, это также отвлекает от реальной проблемы.
Суть проблемы:
Почему я получаю эту ошибку только при наличии второго ввода? Это тот же шаблон, и если я удалю второй ввод, он снова заработает. index.html должен работать так же, как и всегда, но каким-то образом сборка его нарушает. Похоже, что все это является ошибкой vite/rollup для правильной сборки при добавлении второго входа. Возможно, мне нужно настроить его получше, но я не знаю, как решить эту проблему, и уже потратил на ее решение целый день.
Я знаю, что при наличии двух или более входных данных существует файл common.js, в котором размещаются общие ресурсы в дополнение к файлу, содержащему код, уникальный для каждой страницы. Однако неясно, почему страница перестает работать.
Что еще я пробовал
Поскольку ошибка, по-видимому, как-то связана с этим оператором require, я попробовал плагин commonjs, который разрешил ошибку Uncaught ReferenceError: require не определен. Однако это приводит к еще одной ошибке времени выполнения, которая возникает даже тогда, когда я пытаюсь связать только index.html: Uncaught TypeError: s.event не определен. Кажется, это связано с jQuery (на самом деле с миграцией jQuery), что имеет смысл, поскольку именно это требование пытается импортировать. (да, извините, движок шаблонов использует jQuery. Я тоже его ненавижу.) Эту ошибку очень сложно исправить, если ее вообще можно устранить.
Я также пытался указать только необходимые файлы для плагина commonjs, но все равно возникали эти проблемы. Что-то вроде:
commonjs({ включить: [/jquery-migrate.min/] }), Прочтение документации по Vite и Rollup также не дало очевидного решения. Кто-нибудь здесь сталкивался с такой проблемой? Смогли ли вы решить эту проблему? Как?
Я никогда не думал, что добавить в это приложение простую страницу с ошибкой будет так сложно.
Добавление второго входа в Vite приводит к созданию нефункциональной страницы при сборке. ⇐ Javascript
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение