Question

我想热重新加载所有反应组件，而不是逐个添加文件。

module.hot.accept(['react/a', 'react/b', 'react/c'], function (){})

在我的项目中，我使用require.context将所有js文件重新加载。

'user strict';
import React from 'react';
import ReactDOM from 'react-dom';
import A from 'a'

ReactDOM.render(<A/>, document.getElementById('hello'))
var context = require.context("react", true, /\.js$/);
if (module.hot) {
  module.hot.accept(context.id, function () {
    var reloadedContext = require.context("react", true, /\.js$/);
    ReactDOM.render(<A/>, document.getElementById('hello'))
  });
}

但是由于我从＆＃39; a＆＃39;中导入了A，因此a.js文件不再是热重新加载的。文件b.js和c.js仍然是可热重载的。

我不确定require.context是如何工作的，以及为什么导入的文件不能热重新加载。

这是我的示例项目，您可以分叉并复制我的问题。请给我一些建议，谢谢！

https://github.com/flik930/webpack-hot-module-reload-with-context-example

Answer 1

我克隆了您的回购并尝试了您的应用程序，对我来说，热重新加载工作正常，即当我更改组件A的文本并保存文件时，浏览器已更新。不确定您的机器上发生了什么。你想重试吗？

编辑：更改A时页面实际重新加载，这违背了 hot 模块重新加载的目的......

似乎有效的解决方案是使用require.context再次加载组件，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';

const context = require.context("react", true, /\.js$/);
const requireA = context => context(context.keys().find(key => key.match(/\/a\.js$/))).default
let A = requireA(context)

ReactDOM.render(<A/>, document.getElementById('hello'))
if (module.hot) {
  module.hot.accept(context.id, function () {
    const reloadedContext = require.context("react", true, /\.js$/);
    A = requireA(reloadedContext)
    ReactDOM.render(<A/>, document.getElementById('hello'))
  });
}

但是，您希望将此复杂性隐藏到单独的模块中，以使导入透明（可能在react / index.js或components / index.js模块中）

有关此类技术的示例，请参阅React ARC项目。例如，此文件使用以下技术： https://github.com/diegohaz/arc/blob/master/src/components/index.js

动态响应热重装所有js文件

1 个答案: