содержимое не изменяется с помощью HotModuleReplacementPlugin - PullRequest
Новая
       32

содержимое не изменяется с помощью HotModuleReplacementPlugin

0 голосов
/ 11 мая 2018

Первая проблема:

Попытка HMR пример, приведенный в документации веб-пакета по этой ссылке: https://webpack.js.org/guides/hot-module-replacement/. Как уже упоминалось в заголовке: " Gotchas ", я попытался удалить дочерний элемент, который был добавлен, когда app загружается для в первый раз, затем я попытался вызвать функцию component() снова, чтобы добавить в новый элемент, возвращенный, вызванный измененным print.js модулем.

В браузере я получаю это, когда я изменяю текст в print.js, который, кажется, работает, но когда я нажимаю кнопку, я продолжаю получать старое текстовое значение в print.js

Снимок экрана консоли браузера при изменении print.js: enter image description here

Снимок экрана, когда я нажимаю нажмите меня и проверьте кнопку на консоли (это не текст, который я обновил, его старый текст): enter image description here

Мой входной файл main.js: 

import _ from 'lodash';
import printMe from './print.js';

function component() {
  var element = document.createElement('div');
  var btn = document.createElement('button');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

let element = component(); // Store the element to re-render on print.js changes
document.body.appendChild(element);

if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    document.body.removeChild(element);
    element = component(); // Re-render the "component" to update the click handler
    document.body.appendChild(element);
  });
}

Мой Print.js файл: 

export default function printMe() {
  console.log('Updating123 and print.js...');
}

Вторая проблема:

Я упростил предыдущую задачу, чтобы вернуть простой текст из print.js и консольный зарегистрированный текст внутри module.hot, и обнаружил даже странное поведение:

component() функция, запущенная из module.hot.accept функция обратного вызова регистрирует тот же старый текст при первом изменении внутри print.js (простой текст4 - это текст до изменений, сделанных в print.js) 

[WDS] App updated. Recompiling...
client?81da:223 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
main.jsx:14 Accepting the updated printMe module!
main.jsx:15 <div>​simple text4​</div>​
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/print.js
log.js:24 [HMR] App is up to date.

& изменение второй раз внутри print.js ничего не регистрирует в консоли браузера: 

[WDS] App updated. Recompiling...
client?81da:223 [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:24 [HMR] Updated modules:
log.js:24 [HMR]  - ./src/print.js
log.js:24 [HMR] App is up to date.

main.js код: 

import printMe from './print.js';

function component() {
  var element = document.createElement('div');
  element.innerHTML = printMe();

  return element;
}

document.body.appendChild(component());

if (module.hot) {
  module.hot.accept('./print.js', function() {
    console.log('Accepting the updated printMe module!');
    console.log(component());
  });
}

print.js код: 

export default function printMe() {
  var a = 'simple text2';
  return a;
}

1 Ответ

0 голосов
/ 21 мая 2018

Отключение преобразования модуля в .babelrc наконец-то сработало.Эта строка сделала трюк: "modules": false

Мой текущий файл .babelrc выглядит так: 

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": 52
        },
        "modules": false,
        "loose": true
      }
    ]
  ],
  "plugins": ["transform-object-rest-spread"]
}
...