8-模块热重载-HMR-API-1原创

Wait通过特殊的import MAT的hot这个对象暴露手动的HMRAAPI，它包含了一些对象和方法和外派等打包工具的模块。热替换的API有些类似，这里呢，是官网给出的源码的一个简化版。我们来看它定义了一个接口import me里边包含了一个只读属性hot，它里边包含的内容就是我们的HMRAAPI了。我们注意的看一下贝。这个对象呢，它表示在更新模块的不同实例之间持久化，也就是说它可以用于将信息从模块的前一个版本传递到下一个版本。accept这个方法表示在模块移除的时候执行一些回调。这个方法呢可以有四种使用方式，我们可以不传参数或者是传一个回调函数，以及我们可以定义依赖的模块，在回调函数里边做一些事情。

我们也可以定义依赖的一系列的模块，然后我们在回调函数里边对这一系列的模块进行处理。Pro这个方法表示在模块移除的时候，我们来执行这个回调dispose，它可以接收自身的模块，或者是一个期望被其他模块接受的模块，可以使用dispose这个方法来清除任何尤其更新副本产生的持久的副作用，这个跟外派pose是一个道理。Decline这个方法呢，表示模块不可热更新，如果在传播HR更新时遇到这个模块，浏览器应该执行完全的重新加载。Invaliddate这个方法现在执行的时候只是重新加载页面了。on表示我们可以监听自定义的HMR事件，一般的普通用户我们很少使用这些API，因为V内置了HM到常用框架的一个集成。那接下来呢，我们来举个例子，看看如何手工的使用这些API做一些事。

回到Vs code，我们想通过V来创建一个纯的JS环境，那现在呢，我们有一个项目叫v basics，我们把它改一下，因为我们的新项目打算叫这个名字，这个项目呢是基于view来开发的，所以呢，我们需要把这个文件夹改为一个杠view。然后同时打开这个目录下面的package点儿，Jason把这个项目的名字也改为杠view。保存一下，然后我们打算创建一个新的项目，我们按照CTRL加波浪线打开我们的终端，然后执行一下PN PM create。输入这个项目的名字叫做VE viss，我们选择vanilla这个纯JS的框架，选择vanilla，然后CD的VPHYSS，然后执行PN PM install来安装这个依赖模块，然后执行PN PM run d，我们启动一下这个项目，在当前的浏览器上面来打开一下，按CTRL点击打开以后呢，我们打开检查，在终端上面我们看到这个项目正常的启动起来了，那么接下来呢，我们就在这个项目的下面来去构建我们所谓的HR的例子，我们先观察一下这个纯JS的环境，这里边呢只有一个JS文件叫men JS这个文件呢，除了引入一个CSS以外，就是纯的一个JS代码了，在页面上呢，显示了这样的一个一和一个链接，下面我们可以把这个代码。

先删掉，然后保存一下这个页面呢，就会显示一个配置lo，也就是我们这个页面重新的去刷新了一下。

那么接下来我们打算在v basics里边创建一个新的模块，我们取名为叫做count.gs，我们给这个模块呢来定义一个变量，我们通过export来去暴露这个常量，我们定义成一个count，初始值我们定义一个一，那么接下来呢，我们就来观察我们count的JS自己，当这个模块发生变化的时候呢，我们可以实现一个页面的热重载，也就是页面不需要重新刷新，只是局部进行更新，那这里呢，我们就需要用到了我们HMRAAPI了。有一点大家要格外注意，就是所谓的模块热重载HMMR只在开发环境里使用，生产环境里边呢，我们并不需要这个热承载。为了让我们写的这个HR的代码在生产环境里边被删掉，我们得需要加一个条件首位，这个条件首位呢，可以通过我们编译这个生态环境的时候，Tree会帮助我们进行优化，那么这个条件首位我们该怎么写呢？我们写一个if判断。

在判断条件里边，我们判断一个对象是否存在，就是import.met.hot，在开发环境里边这个变量是存在的，在生产环境里边它是不存在的，所以呢，它就会被tree shaking给优化掉，那接下来呢，我们的HMR代码就写在if语句体里边，我们写什么呢？下面我们先实现一个监测我们这模块自身的一个变化，所以呢，我们先去。调用到import.might.hot.accept这个方法，这个方法呢就可以监测我们某个模块的变化，这里我们监测模块本身，所以呢，我们只要传递一个回调函数就可以了，我们可以定义一个胖箭头函数，在这函数的参数里边呢，我们需要拿到我们的被更新以后的模块的引用，我们定义一个名字叫做new Mo。

那接下来呢，我们在这个方法题里头去打印我们新的module的一个count，由于我们是监测这个模块本身，所以呢，我们能拿到这个模块里边定义的这个常量count，好，我们保存一下，接下来呢，我们去使用一下这个模块，打开man JS，我们去引用一下count.js，我们可以通过import直接导入我们这个模块，点JS保存一下，那么下面这个页面呢，又执行了配置reload，就是重新的去刷新了一下。那么接下来呢，我们试图去修改一下count JS，我们看页面的表现，我们把这个一改为二，保存一下，好大家发现控台上面呢，立刻显示了一个二这样的一个打印，同时呢，我们在这个终端上面看到了wait有个提示叫做HR update，说明我们这个页面呢是热重载的，也就是局部的更新。那其实accept除了观测我们模块自身以外，它还可以观测其他的模块，比如我们在当前的项目下面再创建一个新的文件，叫做fo.js，我们来通过export来去暴露一个fo这样的一个函数。

我们仍旧是通过箭头函数来去定义，在里头呢，我们随便让它打印一个字符串，比方说foowork。定义好了以后，我们再到慢点JS里边去引用这个模块，我们先简单的引用一下，执行一下import，然后结构出我们的foo啊这个方法，然后from应该是当前目录下的foo.gs好，然后呢，我们再去执行一下foo这个方法，保存一下，大家发现仍旧是配置绕，也就是我们的页面呢，会重新刷新一下。

那接下来呢，我们打算。去呃，修改fo的JS，看看这个模块能不能被侦测到，那我们想在慢点JS里边去侦测fo啊的GS的变化，那接下来呢，我们可以在这里边再去做一个首位条件仍旧是import.mat.hot如果这个变量存在，那我们就去调用一下import.mat.fo.accept。这回呢，我们给这个函数传入两个参数，第一个参数呢，就是我们所谓的叫呃依赖的模块，那它依赖哪个模块呢？我们依赖的是当前目录下的fo.gs这个模块，然后接下来我们再去定义第二个参数，仍旧是一个回调函数，那回调函数的参数呢？

仍旧是我们新的fo这个模块，当然了，在这个方法里边呢，你就可以做任何的事情了，当这个模块二次被更新的时候，我们可以调一下fo里边的这个fo方法，那可见呢，这个new fo就是我们当前这个模块的引用，好保存一下，那么这页面呢，又进行了重新的刷新，这里给我们提示个错误，说我们这里边的ma后面应该是hot.accept。好了，那接下来我们去呃修改一下，诶，嗯，fo.gs在这后边呢，我们加一个叹号，然后我们保存一下，然后大家观察我们控制台的变化，好，我们发现呢，页面并没有刷新，只是重新的去呃打印了我们新的模块的这个字符串，同时在这个控制台上面我们看到了HR update。