gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:50:40 25 4
gpt4 key购买 nike

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

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

预期行为:

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

实际行为(更改配置):

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

我的代码:

我正在使用以下代码(如 this 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

最佳答案

花了半天时间,使用最新的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-line
store.replaceReducer(nextRootReducer);
});
}

return store;

关于javascript - 添加react-hot-loader到弹出的create-react-app,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39583395/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com