Замена модулей в режиме реального времени

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

if (module.hot) {
  module.hot.accept('./library.js', function() {
    // Do something with the updated library module...
  });
}

Поддерживаются следующие методы...

API модуля

accept

Принимает обновления для данного dependencies и вызывает callback для реакции на эти обновления.

module.hot.accept(
  dependencies, // Either a string or an array of strings
  callback // Function to fire when the dependencies are updated
);

При использовании ESM import все импортированные символы из dependencies автоматически обновляются. Примечание: строка зависимости должна точно совпадать со строкой from в import. В некоторых случаях callback можно даже опустить. Использование require() в callback здесь не имеет смысла.

При использовании CommonJS необходимо вручную обновить зависимости, используя require() в callback. Опускать callback здесь не имеет смысла.

accept (само)

Принимает обновления для себя.

module.hot.accept(
  errorHandler // Function to handle errors when evaluating the new version
);

При обновлении этого модуля или зависимостей этот модуль может быть удалён и повторно оценён без уведомления родительских элементов. Это имеет смысл, если у этого модуля нет экспортов (или экспорты обновляются другим способом).

errorHandler срабатывает, когда оценка этого модуля (или зависимостей) вызвала исключение.

decline

Отклоняет обновления для данного dependencies, заставляя обновление завершиться с кодом ошибки 'decline'.

module.hot.decline(
  dependencies // Either a string or an array of strings
);

Отмечает зависимость как неподлежащую обновлению. Это имеет смысл, когда изменения экспортов этой зависимости могут быть обработаны или обработка ещё не реализована. В зависимости от вашего кода управления HMR, обновление этих зависимостей (или зависимостей, которые не были приняты) обычно приводит к полной перезагрузке страницы.

decline (само)

Отклоняет обновления для себя.

module.hot.decline();

Отмечает этот модуль как неподлежащий обновлению. Это имеет смысл, когда у этого модуля есть необратимые побочные эффекты или обработка HMR ещё не реализована для этого модуля. В зависимости от вашего кода управления HMR, обновление этого модуля (или непринятых зависимостей) обычно приводит к полной перезагрузке страницы.

dispose (или addDisposeHandler)

Добавляет обработчик, который выполняется при замене текущего кода модуля. Это необходимо для удаления любых сохраняемых ресурсов, которые вы использовали или создали. Если вы хотите передать состояние обновлённому модулю, добавьте его в переданный параметр data. Этот объект будет доступен в module.hot.data после обновления.

module.hot.dispose(data => {
  // Clean up and pass data to the updated module...
});

removeDisposeHandler

Удаляет обработчик, добавленный с помощью dispose или addDisposeHandler.

module.hot.removeDisposeHandler(callback);

API управления

status

Получает текущий статус процесса замены модулей в режиме реального времени.

module.hot.status(); // Will return one of the following strings...

Статус	Описание
idle Процесс ожидает вызова check (см. ниже)	Процесс ожидает вызова check (см. ниже)
check Процесс проверяет наличие обновлений	Процесс проверяет наличие обновлений
prepare Процесс готовится к обновлению (например, загружает обновлённый модуль)	Процесс готовится к обновлению (например, загружает обновлённый модуль)
ready Обновление подготовлено и доступно	Обновление подготовлено и доступно
dispose Процесс вызывает обработчики dispose для модулей, которые будут заменены	Процесс вызывает обработчики dispose для модулей, которые будут заменены
apply Процесс вызывает обработчики accept и повторно выполняет самопринятые модули	Процесс вызывает обработчики accept и повторно выполняет самопринятые модули
abort Обновление было прервано, но система всё ещё в предыдущем состоянии	Обновление было прервано, но система всё ещё в предыдущем состоянии
fail Обновление вызвало исключение, и состояние системы было нарушено	Обновление вызвало исключение, и состояние системы было нарушено

check

Проверяет все загруженные модули на наличие обновлений и, если обновления существуют, apply их.

module.hot.check(autoApply).then(outdatedModules => {
  // outdated modules...
}).catch(error => {
  // catch errors
});

Параметр autoApply может быть булевым значением или options для передачи методу apply при вызове.

apply

Продолжает процесс обновления (пока module.hot.status() === 'ready').

module.hot.apply(options).then(outdatedModules => {
  // outdated modules...
}).catch(error => {
  // catch errors
});

Необязательный объект options может содержать следующие свойства:

• ignoreUnaccepted (boolean): Игнорировать изменения, внесённые в непринятые модули.
• ignoreDeclined (boolean): Игнорировать изменения, внесённые в отклоненные модули.
• ignoreErrored (boolean): Игнорировать ошибки, выброшенные в обработчиках accept, обработчиках ошибок и во время повторной оценки модуля.
• onDeclined (function(info)): Уведомление об отклоненных модулях
• onUnaccepted (function(info)): Уведомление об непринятых модулях
• onAccepted (function(info)): Уведомление об принятых модулях
• onDisposed (function(info)): Уведомление об удалённых модулях
• onErrored (function(info)): Уведомление об ошибках

Параметр info будет объектом, содержащим некоторые из следующих значений:

{
  type: "self-declined" | "declined" |
        "unaccepted" | "accepted" |
        "disposed" | "accept-errored" |
        "self-accept-errored" | "self-accept-error-handler-errored",
  moduleId: 4, // The module in question.
  dependencyId: 3, // For errors: the module id owning the accept handler.
  chain: [1, 2, 3, 4], // For declined/accepted/unaccepted: the chain from where the update was propagated.
  parentId: 5, // For declined: the module id of the declining parent
  outdatedModules: [1, 2, 3, 4], // For accepted: the modules that are outdated and will be disposed
  outdatedDependencies: { // For accepted: The location of accept handlers that will handle the update
    5: [4]
  },
  error: new Error(...), // For errors: the thrown error
  originalError: new Error(...) // For self-accept-error-handler-errored:
                                // the error thrown by the module before the error handler tried to handle it.
}

addStatusHandler

Регистрирует функцию для прослушивания изменений в status.

module.hot.addStatusHandler(status => {
  // React to the current status...
});

removeStatusHandler

Удаляет зарегистрированный обработчик статуса.

module.hot.removeStatusHandler(callback);