本文概述
- 运行示例
- 热模块更换
- 本示例中的功能
- 在五分钟内设置HMR
- 故障排除
如果你迫不及待要申请HMR, 请跳至本节, 在五分钟内为你的项目设置HMR!
文章图片
运行示例 首先弄脏你的手!在运行命令以启动此示例应用程序之前, 请确保在计算机上正确安装了Git, Node.js和Yarn。
$ git clone https://github.com/Front-end-io/articles.git
$ cd articles &
&
git checkout redux-hmr
$ yarn install
$ yarn start
然后访问http:// localhost:3000 /以查看它是否有效。
编写代码后, 热模块更换无需完全刷新即可更新页面。更重要的是, 在其他资源已更新到位的同时, Redux状态得以保留。
热模块更换 热模块更换是Webpack提供的最有用的功能之一。它允许在运行时更新所有模块, 包括JSON, CSS和JS文件, 而无需完全刷新。
这是内部的工作方式:
- 该应用程序要求HMR运行时检查更新。
- 运行时异步下载更新并通知应用程序。
- 然后, 应用程序要求运行时应用更新。
- 运行时将同步应用更新。
文章图片
开发Redux应用程序时, HMR可以提高生产率。 Redux是JavaScript应用程序的可预测状态容器。这是一个非常流行的基于React的最新框架。根据Redux的第一个原理的定义, Redux是一个单一的共享数据存储, 其文档将其描述为” 单一事实来源” 。数据存储(由reducers更新的普通JavaScript对象)将随着用户在应用程序上的操作而更新。每个用户操作, 例如单击按钮, 加载后端数据等, 都可能会多次更新存储。如果仅在特定状态快照下发生错误, 修复错误就不容易了。
HMR允许我们更新页面而无需重新初始化全局存储。在Redux开发期间, 我们可能要经过一系列操作来检查商店。一个非常常见的情况是, 只有在我们向商店添加了特定(可能是复杂的)商品后, 才会出现错误。没有HMR, 我们必须执行以下步骤:
- 修改可能导致该错误的代码。
- 刷新页面, 将特定项目添加到商店。
- 如果错误仍然存??在, 请重复步骤1。
文章图片
注意:在某些情况下, 代码修改可能会影响当前存储值。在这种情况下, HMR将警告你重新加载整个页面。
本示例中的功能 我们只想演示HMR功能, 就希望使该功能保持最小。因此, 在此应用程序中, 我们没有在React应用程序中合并通用功能, 包括redux-logger, react-router-redux, redux-thunk, redux-devtools等。同时, 我们仅保留一个reducer, 两个action和1页。
我们的应用程序仅在商店中保留计数器值。我们只有一页称为home的页面, 其中显示计数器值和两个用于增加/减小计数器值的按钮。
要确认HMR是否有效, 只需多次增加/减少计数器, 然后在src / js / components / home.js处修改一些代码即可。例如, 在商店中将标题” 计数器” 修改为” 计数器” 。然后我们会发现:
- 该页面未刷新。
- 显示的计数器值未更改。
- 标题已更改为商店中的柜台。
基本图书馆
必须安装以下库以支持HMR:
- [电子邮件保护] ^ 4.2.0:实时编译和更新React应用程序。
- [电子邮件保护] ^ 3.1.4:提供Webpack应用。根据更改更新浏览器。
如果你使用的是ECMAScript6(如今不是谁), 则需要更多工具来实时编译ES6。首先, 这是最小的ES6配置文件.babelrc:
{
"env": {
"development": {
"presets": [
"react-hmre"
]
}
}
}
为了支持实时编译, 需要以下库:
- [电子邮件保护] ^ 1.1.1
我们需要在Webpack配置文件webpack.config.js中配置HMR。
首先, 在” 插件” 部分中启用HMR插件:
"plugins": [
…
new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), ]
HMR插件生成清单(Manifest), 列出更新模块的JSON文件, 以及更新(Update), 包含要应用的数据的JSON文件。需要注意的是, HMR是Webpack提供的一个选项。实现HMR接口的诸如样式加载器之类的加载器会通过HMR接收更新, 然后用新代码替换旧代码。
如果使用webpack-dev-server, 则需要在devServer部分中打开hot标志:
"devServer": [
...
hot: true, ]
热装Redux Reducer
从Redux版本2.0.0开始, reducer不会隐式热加载, 因为隐式热重新加载会引起一些问题。如果在热更新时将Redux状态重置为初始值, 请尝试为reducer启用热更新:
import { createStore } from 'redux';
import rootReducer from '../reducers/index';
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () =>
{
const nextRootReducer = require('../reducers/index');
store.replaceReducer(nextRootReducer);
});
}return store;
}
高级设置
有关HMR的更高级设置, 请参考HMR API。
运行
最后, 请使用以下命令运行该应用程序:
$ ./node_modules/.bin/webpack-dashboard -- webpack-dev-server
故障排除 HMR根本不应用更改
HMR可能会在无任何警告的情况下静默失败。当你更新代码并保存时, 页面根本不会更新。这可能是因为你的系统不允许你观看如此多的文件更改。
在Ubuntu上, 你可以运行sysctl -a | grep inotify查看当前user.max_inotify_watches值。尝试通过运行以下命令增加该数目:sudo sysctl fs.inotify.max_user_watches = 524288。或者, 在文件sudo vim /etc/sysctl.conf中追加新行fs.inotify.max_user_watches = 524288, 然后运行sudo sysctl -p /etc/sysctl.conf来应用更改。
推荐阅读
- Angular 5和ASP.NET Core
- 样式组件(用于现代Web的CSS-in-JS库)
- 在Vanilla JS中模拟React和JSX
- 使用无头浏览器进行网页爬取(Puppeteer教程)
- 探索SMACSS(CSS的可扩展和模块化架构)
- Angular 6教程(使用新功能)
- 流行的静态站点生成器概述
- 我可以使用`xarray.apply_ufunc`并行化`numpy.bincount`吗()
- 无法解决(com.google.android.support.gms:play-services-map:10.2.0)