动态响应热重新加载所有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时页面实际上重新加载，这违背了热模块重新加载的目的。

一个似乎可行的解决方案是使用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'))
  });
}

但是，您可能希望将这种复杂性隐藏在一个单独的模块中，以便使导入变得透明(可能在you/index.js或components/index.js模块中)。

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