假热更新上一期写了一些问题。本来打算暂时不处理的，结果最后的结果是，今天这只鸭子架不住了。废话不多说，先贴思路1.先在本地编译2.编译完成后，用chokidar分别监控源码文件和编译后的文件。（源码改变，触发编译。编译文件改变，触发重新加载）3.启动节点服务4.开启browserSync代理服务中使用的插件和模块npm//执行脚本命令browser-sync//刷新浏览器Corechokidar//监听文件修改child_process//启动子进程执行脚本Step1直??接使用npm对象执行写好的命令functiondirectives(commond,cb){npm.load(function(){//清除缓存npm.commands.cache(['clean'],function(){npm.commands.run([commond],cb);})})}//执行npmrundevfunctiondev(cb){returndirectives('dev',function(){cb&&cb();})}步骤2chokidar可以监控文件。具体看文档。chokidar的change事件只要保存就会触发，不管你有没有改变。//监听源码部分//监听源码函数，并启动子进程执行编译命令functionsoundCode(cb){console.log(`${num+=1}.chokidar开始监听文件在src&public`)constwarcher=.watch(['src/**/*.*','public/**/*.*'])warcher.on('all',(event,path)=>{if(event==='change'){console.log('\033[40;31m'+path+'源码已修改，请稍后编译');//启动子进程，执行命令child_process.exec('npmrundev',function(error,stdout,stderr){if(error){console.log(error.stack);console.log('错误代码：'+error.code);console.log('接收到的信号：'+error.signal);}console.log(stdout);console.log('编译完成');})}});console.log('\033[40;32msourcecodemonitoringcomplete');}//监控编译后的代码（js）是否有变化（最好保存）//监控distDev函数下文件的编译代码compileCompleteCode(cb){console.log(`${num+=1}.chokidar开始监听distDev下的文件`);//当文件改变时，构建完成。constwatcher=chokidar.watch('distDev/**/*.js');watcher.on('all',(event,path)=>{if(event==='change'){console.log(path+'change,开始热更新');bs.reload(path);console.log('热更新完成');}});console.log('\033[40;32m编译代码监听完成');}Step3directives('devServer');步骤4bs.init({proxy:'http://localhost:8080',open:false});整体代码constnpm=require('npm');constbs=require('browser-sync').create();constchokidar=require('chokidar');constchild_process=require('child_process')varnum=0;//计数函数指令(commond,cb){npm.load(function(){npm.commands.cache(['clean'],function(){npm.commands.run([commond],cb);})})}functiondev(cb){returndirectives('dev',function(){cb&&cb();})}//监听源码函数functionsoundCode(cb){console.log(`${num+=1}.chokidar开始监听src&public文件`)constwarcher=chokidar.watch(['src/**/*.*','public/**/*.*'])warcher.on('all',(event,path)=>{if(event==='change'){console.log('\033[40;31m'+path+'源码已修改，请稍后编译');child_process.exec('npmrundev',function(error,stdout,stderr){if(error){console.log(error.stack);console.log('错误代码：'+error.code);console.log('收到信号：'+error.signal);}console.log(stdout);console.log('编译完成');})}});console.log('\033[40;32msourcecodemonitoringcomplete');}//监控distDev下文件的编译代码functioncompileCompleteCode(cb){console.log(`${num+=1}.chokidarstarts监控distDev`下的文件);//当文件发生变化时，构建已经完成constwatcher=chokidar.watch('distDev/**/*.js');watcher.on('all',(event,path)=>{if(event==='change'){console.log(path+'change,开始热更新');bs.reload(path);console.log('热更新完成');}});console.log('\033[40;32m编译代码监听完成');}console.log(`${num+=1}.本地编译`);dev(function(){console.log("\033[40;31m编译完成")soundCode()compileCompleteCode()console.log(`${num+=1}启动节点服务`)directives('devServer');console.log(`${num+=1}启动browserSync代理service`);bs.init({proxy:'http://localhost:8080',open:false});});项目github地址项目公网地址1）vueSSR：从0到1构建vueSSR项目---初始化2）vueSSR：从0到1构建vueSSR项目---路由构建3）vueSSR：从0到1构建vueSSR项目——--node和vue-cli3配置4)vueSSR:从0到1构建vueSSR项目---vuex配置（数据预取）5)vueSSR:从0到1构建vueSSR项目---部署开发环境6)vueSSR:从0到1搭建vueSSR项目---伪热更新
