7-模块热重载-常用框架集成原创

这一章我们继续来做V的功能介绍，我们来聊一聊模块热重载，有关模块热重载的知识，大家可以参照我B站的web pack5的视频。那wait呢？提供了一套原生的ESM的hmr API，后边我们会详细的介绍。具有HM2功能的框架都可以使用这个API来提供计时准确的更新，而无需重新加载页面或清除应用程序状态。Wait呢，内置了HMR到view单文件组件SFC以及fast refresh也通过at p refresh weight对P实现了官方的集成。事实上呢，这三个集成我们不需要手动的设置什么，我们只需要通过create v来创建应用程序，所选的模板已经为我们预先配置好了，接下来我们来演示一下。

关于wait内置对view单文件组件的支持，我们可以使用我们事先创建好的这个项目，这个wait basics就是我们使用create v来创建的，我们来打开这个项目的目录，里边有一个wait conflict JS，我们看到这里呢，它会自动的帮助我们导入at v JS plug in view这个插件，然后在def DeFine con f里边通过plug ins来去声明这个插件，这样的话呢，我们这个项目自动就具备了HMMR这个效果。我们来启动一下这个项目，演示一下我们在控制台上面执行p n PM run DV。这样我们的项目呢，就启动在了logo house的3000上面，我们在浏览器上面打开看一下，那接下来呢，我们就来演示这个HR的效果，我们在src里面去修改一下view的组件，我们在components里边看到这里有一个参数DeFine pros，它是从副组件里传递过来的，我们打开APP的view，在这里边呢，我们传入了一个属性MSG，我们去修改一下这个属性，把这个V2的二去掉，保存一下，大家发现这里立刻就得到刷新了，我们再去演示一下，我们把二再加上。

这个刷新的速度呢是非常快的，明显比web pack要快很多，那接下来呢，我们再来看看的效果，我们把这个文件关闭，把服务停止掉，然后我们进入到上一层目录，我们执行一下PN PM create wait。好，我们给项目起个名字叫做wait basics react，好，我们选择react这个框架，然后我们选react，我们进入到v basic react这个目录，然后我们执行PN PM install来去安装相关的依赖，安装好了以后呢，我们执行PN PM run DV。

这样我们就启动了react这样的一个还原页面，然后我们打开RA这个目录，在这里边呢，我们先来看一下wait conflict JS这个模板呢，也会帮助我们载入at v JS plug in react，然后同时把插件给放进来，然后呢，我们再去感受一下HMR的效果，我们打开S2C，在这里边呢，我们试图修改一下react的组件，我们打开app.jsx，在这里头我们把hello wait改为hello wait2，好，保存一下，大家观察我们浏览器，你会发现这里迅速的得到了更新。那接下来呢，我们再来看一下p react，我们现在呢，把这个文件关闭掉，把项目停止一下，然后进入到上层目录。

然后我们继续执行PN PM create。然后我们给项目起个名字，F basics p react。我们选择p react这个框架，然后我们C对到wait basics p这个目录，然后我们执行PN PM install来去安装这个依赖，依赖安装好了以后我们执行PN PM run div，这样我们的项目就启动起来了，大家看到p red还原页面就出来了，然后呢，我们再进入到p red这个目录，打开wait conflict JS，我们发现它同时也为我们载入了at p p v这个插件，然后我们再拉因S里边去引入这个插件，然后我们再去感受一下它的HML。我们打开S2C里边的pra的组件，我们打开app.jsx，在这上面呢，我们再把hello wait改为hello wait2好保存一下，大家发现这里也是非踌快速的得到了更新。

关于V对view react p RA框架的HML集成就演示到这儿，接下来我们了解一下v hml API的一些细节。