动态反应热重载所有js文件

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'))
  });
}

但由于我从“a”导入了 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