0

第一个问题：

HMR此链接中 webpack 文档中给出的尝试示例： https ://webpack.js.org/guides/hot-module-replacement/ 。如标题中所述：“ Gotchas ”，我尝试删除app第一次加载时添加的子元素，然后我尝试component()再次调用函数以追加由更改的print.js模块触发返回的新元素。

在浏览器中，当我更改文本时，我得到了这个print.js，这似乎有效，但是当我按下按钮时，我一直在获取旧文本值print.js

浏览器控制台屏幕截图更改print.js： 在此处输入图像描述

单击按钮时的屏幕截图click me and check the console（它不是我更新的文本，它的旧文本）： 在此处输入图像描述

我的入口文件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​&lt;/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;
}
4

1 回答 1

0

在 .babelrc 中禁用模块转换终于奏效了。这一行成功了： “modules”：false

我当前的 .babelrc 文件如下所示：

{
  "presets": [
    [
      "env",
      {
        "targets": {
          "chrome": 52
        },
        "modules": false,
        "loose": true
      }
    ]
  ],
  "plugins": ["transform-object-rest-spread"]
}
于 2018-05-21T07:30:30.333 回答