将 react-hot-loader 添加到弹出的 create-react-app [英] Adding react-hot-loader to ejected create-react-app

问题描述

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

将 'webpack/hot/dev-server' 更改为 'webpack/hot/only-dev-server' 允许热重新加载工作.为什么这样?另外，如果无法重新加载完整状态，我该如何让它重新加载网页?

预期行为:

在编辑器中编辑一个 React 组件会在不刷新浏览器的情况下替换浏览器中的模块.

实际行为(更改配置):

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

我的代码:

我正在使用以下代码(如此提交中所建议)重新加载应用程序，包括来自 Redux 的 Provider/store.

从 'react' 导入 React从'react-dom' 导入 ReactDOM从./components/App/App"导入应用程序导入./styles/index.scss"从反应热加载器"导入 { AppContainer }从./redux/store"导入 configureStoreconst store = configureStore()ReactDOM.render(<div><应用容器><应用商店={store}/></AppContainer>

,document.getElementById('root'))如果(模块.热){module.hot.accept('./components/App/App', () => {使成为(<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/674a31e157d57a40>

原始 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/58664bfea4828c0f>

解决方案

在上面花了半天时间，使用的是lates CRA - 1.0.14, Oct 2017，非常简单.放弃所有更改并做两件事:

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-linestore.replaceReducer(nextRootReducer);});}返回商店;

I am using the instructions from this commit to attempt to add react-hot-loader version 3 to create-react-app. (Scroll to bottom to see babel and webpack configs)

Edit: Changing 'webpack/hot/dev-server' to 'webpack/hot/only-dev-server' allows hot reloading to work. Why so? Also, how would I make it reload the web page if the full state cannot be reloaded?

Expected Behavior:

Editing a React component in the editor replaces the modules in the browser without refreshing the browser.

Actual Behavior (With altered configs):

Editing a React component in the editor refreshes the browser, no matter where the change is made, and displays that change.

My Code:

I am using the following code (as suggested in this commit) to reload the application, including Provider/store from Redux.

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

My Configurations:

The original configs are from the create-react-app tool. The altered configs are my attempts to get react-hot-loader working in this project.

Original CRA webpack config: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js

My altered CRA webpack config: https://gist.github.com/Connorelsea/674a31e157d54144623ebf0ec775e0e7

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

My altered CRA babel config: https://gist.github.com/Connorelsea/58664bfea423f5708a2e0f168fd391c9

解决方案

Spent half a day on it, using the lates CRA - 1.0.14, Oct 2017, it's terribly simple. Drop all changes and do two things:

1) Add to index.js

if (module.hot) {
  module.hot.accept();
}

2) Update configureStore.js a bit:

if (module.hot && process.env.NODE_ENV !== 'production') {
  module.hot.accept('./reducers', () => {
    const nextRootReducer = require('./reducers'); // eslint-disable-line
    store.replaceReducer(nextRootReducer);
  });
}

return store;

这篇关于将 react-hot-loader 添加到弹出的 create-react-app的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！