Принудительная перезагрузка при импорте асинхронных пакетов

Question

В настоящее время я работаю над рефакторингом от большой устаревшей кодовой базы только для jquery до одностраничного приложения vue.При этом я надеюсь разделить свою работу на управляемые куски, сохраняя большую часть унаследованной кодовой базы как есть в коде, и медленно вытаскивая фрагменты и части из нее для рефакторинга в vue, используя шину событий какпосредник.

Однако я сталкиваюсь с проблемами, потому что у устаревшего кода есть побочные эффекты при импорте.Эти побочные эффекты вызваны событием jquery времени выполнения, связанным с HTML, и создаваемыми объектами и экземплярами классов, оборачивающимися вокруг другого HTML, так как он устанавливает состояние сразу при импорте.Это вызывает проблему с рефакторингом SPA, так как я хочу иметь возможность перейти от страницы к странице, но javascript останется в кэше и не будет перезагружаться, теперь пропущены все обновления HTML и состояния, поскольку vue удалитhtml состояние было создано с последующим добавлением нового html при повторном рендеринге.

Я ищу лучшее решение этой проблемы, чтобы мне не пришлось дважды проводить рефакторинг кода - один раз в модульный импортс вызовами инициализации, а затем в реактивную, модульную парадигму vue.Для этого я хотел бы выяснить, как использовать асинхронный импорт фрагментов 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
}

Есть ли эффективный способ сделать это?это от клиента?

Answer 1

Вы можете динамически импортировать модуль и удалить его из кэша, если установлен флаг useFresh.

async function getFile (useFresh) {
    try {
        useFresh && delete require.cache[require.resolve('./Test')];
    } catch (err) { }
    let newModule = await require('./Test');
}

Примечание. Если вы используете export default в файле, который вы динамическиимпорт, тогда вам придется использовать newModule.default для доступа к его объектам.

Answer 2

Горячая замена модуля (HMR) - это не какая-то черная магия (хотя я так и думал).Представьте себе архитектуру клиент / сервер, в которой клиент (ваше приложение) запрашивает сервер (Webpack с включенной HMR), есть ли какие-либо изменения в модуле, который вы пытаетесь импортировать.Если это так, он перезагружает модуль.

// Add this to the file you are initially loading
if (module.hot) {
  module.hot.accept('./LegacyCode.js', async function() {
    console.log('Accepting the updated LegacyCode.js module!');
    let thingId = this.$store.state.thingPage.thingId;
    await initLegacyCode(thingId);
    await EventBus.$emit('initLegacyCodeState');
  })
} 

На веб-сайте есть отличное руководство о том, как работает HMR и как начать работу

ПРИМЕЧАНИЕ. AFAICTВаш старый код генерирует побочные эффекты при загрузке (например, он портит глобальное состояние).Я был бы особенно осторожен с этим, поскольку горячая перезагрузка работает лучше всего, когда модули импортируются детерминистическим образом.