公司的前端脚手架基于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。(来源)
也就是说只要是稍微新一点的框架已经支持热更新了,不需要手动去配置了。
我会遇到这个问题,还是因为内部的脚手架太老了。