在wenke工具中关于React热加载的实践指南

[XieChuanfang]

背景

近期react-hot-loader发布了4.0版本，同时部门大部分产品已经迁移至react 16。为了更好在react16环境下支持热更新，我们将wenke-dev进行了版本升级。前端开发者只需要简单配置，即可在开发中浏览器端实现无刷新更新组件，这样可以避免组件状态的丢失，极大方便开发者开发调试react应用。相比于3.0版本，4.0配置更加简单，方便。

配置步骤

1、设置文件热更新标签

在VM引用文件处设置热更新标签，只需要在文件末尾处加上“？hot=true”即可；例如

<script src="/sf/deploy/js/audit/qun_audit/answer/bundle.js?hot=true"
        babel="true"></script>

2、修改热更新组件引出方式

在热更新组件源代码中，引入hot 函数，引入代码如下：

import {hot} from 'react-hot-loader'

组件Component引出方式如下

export default hot(module)(Component)

3、使用wenke-dev构建应用

设置热更新server

由于wenke-dev默认将有react热更新标记的模块代码编译在一台热更新server中，该server默认域名为“local.wenwen.sogou.com”，端口号为9797；当然，开发可以在使用wenke-dev时通过传入参数-d和--hot-port设置热更新server的域名和端口号。
以下面构建命令为例

wenke-dev -s /Users/xiechuanfang/workspace/static_files -w /Users/xiechuanfang/workspace/qun_audit -d local.ld.sogou.com --hot-port 6767

设置热更新server域名为local.ld.sogou.com，端口为6767；
执行上述构建命令，可以在日志中看到构建成功和热更新server启动成功log，并可以通过

http://local.ld.sogou.com:6767/sf/deploy/js/audit/qun_audit/answer/bundle.js?hot=true

访问到bundle文件。

https支持

使用参数--https支持先有https业务开发的热加载

禁止页面全局refresh

使用参数--norefresh禁用livereload功能

4、配置转发规则

由于开发者在macOS和windows环境下使用的网络转发抓包工具有所区别，下面根据环境说明转发规则的配置；

macOS环境

在该macOS环境下，以charles抓包工具为例。
热更新server起来后，需要在charles中配置转发规则如下图所示（以wenke-dev热更新sever默认域名设置为例）:

这样，在浏览器中就能加载热更新server上的bundle文件；
热更新server能够监听webpack构建过程，并在构建结果发生改变时保存更新补丁包；最后，为了能在浏览器端加载更新包，实现真正的无刷新热更新，还需配置转发规则如下图：

这样，react热更新配置基本完成，可以在浏览器端实现无刷新热更新了；

windows环境

在windows环境下，以fiddler抓包工具为例。
转发规则配置如下图：

注意：上图示例设置了热更新server为"local.ld.sogou.com"；
在fiddler添加设置模拟跨域访问，方法参考链接http://mooring.iteye.com/blog/1705677

效果验证

修改源代码文件并保存，在chrome控制台中看到如下图：

在charles中抓取如下更新包的请求：

在浏览器端看到页面即时更新。