Как настроить webpack-dev-server на отключение событий «beforeunload» в браузере перед перезагрузкой? - PullRequest
Новая
       125

Как настроить webpack-dev-server на отключение событий «beforeunload» в браузере перед перезагрузкой?

2 голосов
/ 03 мая 2020

На страницах моей формы в окне установлено событие / функция beforeunload, чтобы предупредить пользователя о необходимости сохранить свои изменения перед переходом на другую страницу или обновлением. Он отлично работает и выглядит примерно так: 

$(window).on("beforeunload", myCustomWindowBeforeUnloadFunction);

Проблема заключается в том, что при запуске в разработке, каждый раз, когда я меняю файл в своей IDE, Webpack Dev Server пытается автоматически перезагрузить страницу. Я хочу отключить это beforeunload событие, чтобы я не терял терпение из-за этого предупреждения в Chrome: 

Are you sure you want to leave the page? Data you have entered may not be saved.

Есть ли способ запустить пользовательскую функцию в браузере перед Webpack Dev Server пытается перезагрузить страницу?

1 Ответ

2 голосов
/ 03 мая 2020

Может быть, что-то вроде этого: 

if (process.env.DEV) {
  window.addEventListener('message', ({ data: { type } }) => {
    if (type === 'webpackInvalid') {
      $(window).off('beforeunload');
    } else if (type === 'INIT_INSTANCE') {
      $(window).on('beforeunload', myCustomWindowBeforeUnloadFunction);
    }
  });
}

Я добавил process.env.DEV с EnvironmentPlugin, чтобы убедиться, что код не попал в производство. Вы также можете использовать process.env.NODE_ENV === 'development', который работает без добавления EnvironmentPlugin, поскольку Webpack добавляет это автоматически .

Или, используя HMR's addStatusHandler function : 

if (process.env.DEV && module.hot) {
  module.hot.accept();

  module.hot.addStatusHandler((status) => {
    if (status === 'prepare') {
      $(window).off('beforeunload');
    } else if (/apply|abort|fail/.test(status)) {
      $(window).on('beforeunload', myCustomWindowBeforeUnloadFunction);
    }
  });
}

Примечание module.hot будет там, если вы используете HotModuleReplacementPlugin, нет необходимости импортировать это, как объяснено здесь :

Если Горячая замена модуля была включена через HotModuleReplacementPlugin, его интерфейс будет отображаться в свойстве module.hot . Как правило, пользователи проверяют, доступен ли интерфейс, а затем начинают работать с ним.

Также, возможно, вместо проверки apply, abort или fail во втором условии , вы можете использовать idle.

...