如何让react-app-rewired 2支持热加载

公司的前端脚手架基于react-app-rewired，但是实际用下来之后发现不仅技术老旧还有很多不便之处，例如不支持热加载。于是查询了一下如何支持，在这里记录一下。

我这里的版本是：react-app-rewired 2.1.6

方式一：react-app-rewire-hot-loader（无弹出，更便捷）

具体步骤如下：

安装react-app-rewire-hot-loader

npm install --save react-app-rewire-hot-loader

// 如果下面的没装，也要装上
npm install --save react-app-rewired
npm install --save react-hot-loader

修改config-overrides.js

const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override (config, env) {
  config = rewireReactHotLoader(config, env)
  return config
}

如果你的写法是：

module.exports = function override(addxxx) 

那么应该创建一个函数：

const enableHotReload = (config, env) {
  config = rewireReactHotLoader(config, env)
  return config
}

然后在config-overrides.js中添加：

const rewireReactHotLoader = require('react-app-rewire-hot-loader')

/* config-overrides.js */
module.exports = function override(addxxx,rewireReactHotLoader) 

将根组件标记为热更新

如果版本在 4.5.4之后

// App.js - react-hot-loader >= 4.5.4
import React from 'react'
import { hot } from 'react-hot-loader/root'

const App = () => <div>Hello World!</div>

export default process.env.NODE_ENV === "development" ? hot(App) : App

由于我这边的版本在4.5.4之前，因此需要对跟组件做以下处理：

// App.js - react-hot-loader < 4.5.4
import React from 'react'
import { hot } from 'react-hot-loader'

const App = () => <div>Hello World!</div>

export default process.env.NODE_ENV === "development" ? hot(module)(App) : App

---

这个插件的作用是：

在开发环境中添加 react-hot-loader 插件，并对 eslint-loader 进行配置，使其在开发环境中发出警告。这样可以实现热模块替换和代码热更新的功能。

好处是省去了手动配置 babel 的过程

方式二：react-app-rewire-hot-loader

安装react-hot-loader

npm install react-hot-loader

配置babel

// .babelrc
{
  "plugins": ["react-hot-loader/babel"]
}

将根组件标记为热更新

如果是4.5.4 之后

// App.js
import { hot } from 'react-hot-loader/root';
const App = () => <div>Hello World!</div>;
export default hot(App);

如果是 4.5.4 之前

import { hot } from 'react-hot-loader';
const App = () => <div>Hello World!</div>;
export default hot(module)(App);

要不要在生产环境下标记为热更新
GitHub - gaearon/react-hot-loader: Tweak React components in real time. (Deprecated: use Fast Refresh instead.)

后续

React-Hot-Loader is expected to be replaced by React Fast Refresh. Please remove React-Hot-Loader if Fast Refresh is currently supported on your environment.
React-Hot-Loader 预计将被 React Fast Refresh 取代。如果您的环境当前支持快速刷新，请删除 React-Hot-Loader。（来源）

也就是说只要是稍微新一点的框架已经支持热更新了，不需要手动去配置了。

我会遇到这个问题，还是因为内部的脚手架太老了。