Динамическая горячая перезагрузка всех js-файлов

Я хотел бы перезагрузить все компоненты реакции без добавления файлов по одному.

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


webpack reactjs hot-reload react-hot-loader
person Steve Lam    schedule 03.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я клонировал ваш репозиторий и попробовал ваше приложение, и для меня горячая перезагрузка работает нормально, т. Е. Когда я изменил текст компонента 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'))
  });
}

Однако вы хотели бы скрыть эту сложность в отдельном модуле, чтобы сделать импорт прозрачным (возможно, в модуле react/index.js или component/index.js)

См. проект React ARC для примеров такой техники. Например, в этом файле используется такая техника: https://github.com/diegohaz/arc/blob/master/src/components/index.js

person Benoît d'Oncieu    schedule 03.10.2017
comment
Попробуйте открыть журнал консоли, когда вы изменяете a.js, страница перезагружается, а также попробуйте изменить b.js, это горячая перезагрузка вместо перезагрузки страницы. - person Steve Lam; 03.10.2017
comment
вы правы, извините - упустил тот факт, что страница обновилась, значит, вам нужно постоянно использовать require.context для загрузки одних и тех же файлов. Я обновляю ваш пример, чтобы он работал. - person Benoît d'Oncieu; 04.10.2017