Живая перезагрузка Hot Module Replacement для нативного JavaScript не работает?

Question

[Денис]

У меня есть единственный модуль, он же точка входа (entry) - index.js. Пытаюсь реализовать в нем Live Reload пока что на простом примере. И пока ничего не получается. По идее, чтобы сделать Live Reload надо подменить ссылку на старый модуль на новую ссылку, все это делается в колбэке module.hot.accept, что я и делаю. Помогите разобраться в чем моя ошибка. Суть состоит в том, чтобы изменяя значение перемнной greeting , изменения подтягивались без перезагрузки страницы. Вот ссылка на проект на Гитхаб:
https://github.com/denis862008/test

Comments

[Антон Спирин]

Если бы переменная была частью модуля './index.js' и вы его переподключали в module.hot.accept, то тогда бы горячая замена работала.

[Денис]

Как же она не часть модуля index? Где же по вашему она расположена , если не в индекс?

[Антон Спирин]

Денис, нельзя подключать модуль сам в себя - циклическая зависимость, которая никогда не разрешится.
В комментарии подразумевался внешний модуль './index'. Даже не заметил, что вы импортируете index сам в себя, так делать нельзя.

Answer 1

[Антон Спирин]

Вариант 1. Горячая замена самого модуля:

const greetings = 'Hello, friend';
let h1;

function say() {
  h1 = document.createElement('h1');
  h1.innerHTML = greetings;
  document.body.appendChild(h1);
}

say();

if (module.hot) {
  module.hot.dispose(() => {
    document.body.removeChild(h1);
  });

  module.hot.accept();
}

Вариант 2. Горячая замена дочернего модуля:
Добавьте модуль greetings.js:

const greetings = 'Hello, friend';

export default greetings;

и измените основной модуль так:

import './styles.css';

let greetings = require('./greetings').default;
let h1;

function say() {
  h1 = document.createElement('h1');
  h1.innerHTML = greetings;
  document.body.appendChild(h1);
}

say();

if (module.hot) {
  module.hot.accept('./greetings', () => {
    greetings = require('./greetings').default;
    document.body.removeChild(h1);
    say();
  });
}

Если не используется транспиляция модулей из ES6 в CommonJS, то должно работать и так:

import './styles.css';
import greetings from './greetings';

let h1;

function say() {
  h1 = document.createElement('h1');
  h1.innerHTML = greetings;
  document.body.appendChild(h1);
}

say();

if (module.hot) {
  module.hot.accept('./greetings', () => {
    document.body.removeChild(h1);
    say();
  });
}

Comments

[Денис]

Так я хочу реализовать живую перезагрузку используя только index.js без импорта других модулей. Разве так HMR работать не будет?

[Антон Спирин]

Денис, немного не понял вопрос. Если вы хотите импортировать много модулей в index.js то просто добавляете accept для каждого:

import module1 from './module1';
import module1 from './module2';
...
import module1 from './moduleN';

...

if (module.hot) {
  module.hot.accept('./module1', () => { ... });
  ...
  module.hot.accept('./module2', () => { ... });
  module.hot.accept('./moduleN', () => { ... });
}

[Денис]

Антон Спирин, Нет, как раз что я рассматриваю ситуацию, когда нет никаких модулей, есть только index.js и все!!!

[Денис]

Разве index не является также модулем? Нет возможности его подменять в accept?

[Денис]

Антон Спирин, Ок. Теперь все понятно. Спасибо!

[Антон Спирин]

Денис, и все-таки можно. Сыплю голову пеплом. Пересмотрел сейчас как резолвится замена модулей. Корневой модуль как и все остальные может ассептить себя. Ответ обновил. Извиняюсь если ввел в заблуждение.

Можно использовать на любом уровне вложенности модулей как accept на себя, так и на дочерние модули.