react项目配置react-hot-loader
前言
本人想在react项目中配置react-hot-loader，在网上借鉴了众多网友的经验，却始终找不到门路。最终，有幸在Github上找到了能成功运行的react搭配react-hot-loader项目。参考这一项目，我成功配置了react-hot-loader。
注：仅在此分享能成功配置react-hot-loader的一种方法，不涉及原理分析及扩展方案。
一、react-hot-loader是什么？
react-hot-loader是一款Webpack的插件。当在编辑react组件的时候，使用react-hot-loader可以让程序在不丢失状态的情况下实现实时刷新。
react-hot-loader的官方介绍：react-hot-loader官方地址
二、配置方法
在根目录下配置三个文件。
1.package.json文件
在已有package.json文件里添加如下配置。可以依据自己的环境选择配置，但注意react-hot-loader、babel系列、webpack、webpack-dev-server的版本要对应起来。
修改package.json后，node控制台输入npm i下载依赖。
{
"scripts": {
"dev": "webpack-dev-server --hot --history-api-fallback --open"
},
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.1",
"@testing-library/user-event": "^12.2.0",
"css-loader": "^5.0.1",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"web-vitals": "^0.2.4"
},
"devDependencies": {
"@babel/core": "^7.2.2",
"@babel/plugin-proposal-class-properties": "^7.3.0",
"@babel/plugin-proposal-object-rest-spread": "^7.3.2",
"@babel/plugin-transform-classes": "^7.2.2",
"@babel/polyfill": "^7.2.5",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.3.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"cross-env": "^5.1.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"react-hot-loader": "^3.1.0",
"webpack": "^4.29.3",
"webpack-cli": "^3.2.3",
"webpack-dev-server": "^3.1.14"
}
}
2.webpack.config.js文件
若项目中没有webpack.config.js文件，则新建此文件。
const path = require('path')
module.exports = {
devtool: 'source-map',
entry: {
'app': [
'@babel/polyfill',
'react-hot-loader/patch',
'./src/index'
]
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
plugins: ['@babel/syntax-dynamic-import']
},
exclude: /node_modules/,
},
{
test: /\.scss$/,
loaders: ['style-loader', 'css-loader', 'sass-loader'],
},
]
}
}
3.babelrc文件
若项目中没有.babelrc文件，则新建此文件并将文件类型改为BABELRC。内容如下：
{
"presets": [
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-proposal-class-properties",
"@babel/plugin-transform-classes",
"react-hot-loader/babel"
]
}
三、应用
在index.js文件中使用AppContainer
import React from 'react';
import ReactDOM from 'react-dom';
// import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import {AppContainer} from 'react-hot-loader'
import Route from './router'
import store from './redux/store.js'
import 'antd/dist/antd.min.css'
const render = Component => {
ReactDOM.render(
<Provider store={store}>
<AppContainer>
<Component />
</AppContainer>
</Provider>,
document.getElementById('root')
);
}
render(Route);
// reportWebVitals();
if (module.hot) {
module.hot.accept('./router', () => { render(Route) })
}
在index.html中添加脚本app.js
<!DOCTYPE html>
<html lang="en">
<head>
<title>长租公寓平台</title>
<meta charset="utf-8">
</head>
<body>
<div id="root"></div>
<script src="app.js"></script>
</body>
</html>
感想
react项目依赖的配置比较麻烦，要考虑依赖的功能以及版本兼容性。
在配置成功后，本人觉得依赖中Babel的版本太低，想换一个版本，未能成功。最后不得已选择最初配置，把自己的要求放在“能用就行”。这是一个遗憾！
（2020/11/15更改博文，参考下面第二个项目，已将babel/core版本更新到7）
参考
上述的配置文件参考下列项目：
React Hot Loader Minimal Boilerplate
react-webpack-babel-hotreload-example
特此感谢！