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
    特此感谢!

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

斡_lmy

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值