[英]Adding react-hot-loader to ejected create-react-app
I am using the instructions from this commit to attempt to add react-hot-loader
version 3 to create-react-app
. 我正在使用此提交中的指令尝试将react-hot-loader
版本3添加到create-react-app
。 (Scroll to bottom to see babel and webpack configs) (滚动到底部查看babel和webpack配置)
Edit: Changing 'webpack/hot/dev-server'
to 'webpack/hot/only-dev-server'
allows hot reloading to work. 编辑:将'webpack/hot/dev-server'
更改为'webpack/hot/only-dev-server'
允许热重新加载工作。 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. 在编辑器中编辑React组件会替换浏览器中的模块,而无需刷新浏览器。
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. 在编辑器中编辑React组件会刷新浏览器,无论进行何种更改,都会显示更改。
My Code: 我的代码:
I am using the following code (as suggested in this commit ) to reload the application, including Provider/store from Redux. 我正在使用以下代码(如本提交中所建议的)重新加载应用程序,包括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')
)
})
}
My Configurations: 我的配置:
The original configs are from the create-react-app
tool. 原始配置来自create-react-app
工具。 The altered configs are my attempts to get react-hot-loader
working in this project. 改变后的配置是我试图让react-hot-loader
在这个项目中工作。
Original CRA webpack config: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js 原始CRA webpack配置: 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 我改变的CRA webpack配置: 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 原始CRA babel配置: 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 我改变的CRA babel配置: 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. 花了半天时间,使用2017年10月的CRA - 1.0.14,它非常简单。 Drop all changes and do two things: 删除所有更改并执行以下两项操作:
1) Add to index.js 1)添加到index.js
if (module.hot) { module.hot.accept(); }
2) Update configureStore.js a bit: 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;
Seems to be working fine for me with the server shipped with create-react-app v0.6.1. 使用create-react-app v0.6.1附带的服务器似乎对我工作正常。 like this: require.resolve('react-dev-utils/webpackHotDevClient'),
像这样: require.resolve('react-dev-utils/webpackHotDevClient'),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.