小编典典

将react-hot-loader添加到弹出的create-react-app

reactjs

我正在使用此提交中的说明来尝试将react-hot- loader版本3 添加到中create-react-app。(滚动到底部查看babel和webpack的配置)

编辑: 更改'webpack/hot/dev-server''webpack/hot/only-dev- server'允许热重装工作。为什么这样?另外,如果无法重新加载完整状态,我将如何使其重新加载网页?

预期行为:

在编辑器中编辑React组件会替换浏览器中的模块,而无需刷新浏览器。

实际行为(更改了配置):

无论在何处进行更改,在编辑器中编辑React组件都会刷新浏览器并显示该更改。

我的代码:

我正在使用以下代码(如本commit所建议)重新加载应用程序,包括Redux的Provider
/ store。

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

import App from "./components/App/App"
import "./styles/index.scss"

import { AppContainer } from 'react-hot-loader'
import configureStore from "./redux/store"

const store = configureStore()

ReactDOM.render(
  <div>
    <AppContainer>
      <App store={store} />
    </AppContainer>
  </div>,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./components/App/App', () => {
    render(
      <AppContainer props={{ store }}>
        {require('./components/App/App').default}
      </AppContainer>,
      document.getElementById('root')
    )
  })
}

我的配置:

原始配置来自该create-react-app工具。更改后的配置是我尝试react-hot-loader在此项目中工作的尝试。

原始CRA Webpack配置:https :
//github.com/facebookincubator/create-react-app/blob/master/packages/react-
scripts/config/webpack.config.dev.js

我更改的CRA
Webpack配置:https
://gist.github.com/Connorelsea/674a31e157d54144623ebf0ec775e0e7

原始CRA babel配置:https :
//github.com/facebookincubator/create-react-app/blob/master/packages/react-
scripts/config/babel.dev.js

我更改的CRA
babel配置:https
:
//gist.github.com/Connorelsea/58664bfea423f5708a2e0f168fd391c9


阅读 325

收藏
2020-07-22

共1个答案

小编典典

使用最新的CRA-2017年10月1.0.14花了半天,这非常简单。删除所有更改,并做两件事:

1)添加到index.js

if (module.hot) {

  module.hot.accept();

}

2)稍微更新configureStore.js:

if (module.hot && process.env.NODE_ENV !== 'production') {

  module.hot.accept('./reducers', () => {

    const nextRootReducer = require('./reducers'); // eslint-disable-line

    store.replaceReducer(nextRootReducer);

  });

}



return store;
2020-07-22