den0820
@den0820
Фронтенд Junior разработчик.

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

У меня есть единственный модуль, он же точка входа (entry) - index.js. Пытаюсь реализовать в нем Live Reload пока что на простом примере. И пока ничего не получается. По идее, чтобы сделать Live Reload надо подменить ссылку на старый модуль на новую ссылку, все это делается в колбэке module.hot.accept, что я и делаю. Помогите разобраться в чем моя ошибка. Суть состоит в том, чтобы изменяя значение перемнной greeting , изменения подтягивались без перезагрузки страницы. Вот ссылка на проект на Гитхаб:
https://github.com/denis862008/test
  • Вопрос задан
  • 136 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Вариант 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();
  });
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
21 авг. 2018, в 10:29
2000 руб./за проект
21 авг. 2018, в 09:20
5555 руб./за проект
21 авг. 2018, в 07:22
100000 руб./в месяц