В настоящее время я работаю над рефакторингом большой устаревшей кодовой базы только для jquery в одностраничное приложение vue. При этом я надеюсь разделить свою работу на управляемые фрагменты, сохраняя большую часть устаревшей кодовой базы как есть в коде и постепенно извлекая из нее части и части для рефакторинга для vue, используя шину событий в качестве посредник.
Однако у меня возникают проблемы, потому что устаревший код имеет побочные эффекты при импорте. Эти побочные эффекты вызваны тем, что событие jquery во время выполнения привязано к HTML, а создаваемые объекты и экземпляры классов окружают другой HTML, поскольку он устанавливает состояние сразу при импорте. Это вызывает проблему с рефакторингом SPA, так как я хочу иметь возможность перейти со страницы, а затем вернуться к ней, но javascript останется в кэше и не перезагрузится, теперь отсутствуют все обновления HTML и состояния, поскольку vue удалит html состояние было создано, а затем добавить новый html при повторном рендеринге.
Я ищу лучшее решение этой проблемы, чтобы мне не приходилось дважды рефакторить код — один раз в модульный импорт с вызовами инициализации, а затем в реактивную модульную парадигму vue. Для этого я хотел бы выяснить, как использовать асинхронный импорт чанков Webpack для перезагрузки блока кода. Я знаю, что это возможно из-за горячей перезагрузки файла webpack. По сути, я хочу принудительно выполнить горячую перезагрузку определенного импорта при доступе к определенному маршруту.
Вот что я пытаюсь сделать:
async function reloadLegacyCodeOnSPARoutingChange(){
cleanAnyPolutingGlobals();
const initLegacyCode = await import(`./LegacyCode.js`); //somehow force it to reload this as if it were a fresh import
let thingId = this.$store.state.thingPage.thingId;
await initLegacyCode(thingId);
await EventBus.$emit('initLegacyCodeState'); //apply the properties from our reactive state system
}
Есть ли эффективный способ сделать это от клиента?
