vueSSR: 从0到1构建vueSSR项目 --- 伪热更新

伪热更新上一期写了一些问题。原计划是暂时不做处理的，最终结果就是今天没忍住鸭。废话不多说先贴思路1.先进行本地编译2.编译完成后，利用chokidar分别监听源码文件以及编译后的文件。(源码改动，触发编译。编译后的文件发生改动，触发重载)3.开启node服务4.开启browserSync代理服务用到的插件以及模块 npm //执行脚本命令 browser-sync //刷新浏览器的核心 chokidar //监听文件的修改 child_process //开启子进程 执行脚本步骤1直接使用npm对象执行写好的命令function directives(commond,cb){ npm.load(function(){ //清除缓存 npm.commands.cache([‘clean’], function(){ npm.commands.run([commond],cb); }) })}//执行 npm run devfunction dev(cb){ return directives(‘dev’,function(){ cb && cb(); })}步骤2chokidar可以监听文件。具体去看文档嘛chokidar的change事件，只要你进行保存就会触发 不管你有没有发生改变。//监听源码部分//监听源码函数，发生改变 开启子进程 执行编译命令 function soundCode(cb){ console.log(${num+=1}.chokidar开始监听src&public下的文件) const warcher = .watch([‘src//.’,‘public//.’]) warcher.on(‘all’, (event, path) => { if(event ===‘change’){ console.log(’\033[40;31m ‘+path+‘源码发生修改，进行编译,请稍后’); //开启子进程并执行命令 child_process.exec(’npm run dev’,function(error, stdout, stderr){ if (error) { console.log(error.stack); console.log(‘Error code: ‘+error.code); console.log(‘Signal received: ‘+error.signal); } console.log(stdout); console.log(‘编译完成’); }) } }); console.log(’\033[40;32m 源码监听完成’);}// 监听编译后的代码（js）是否发生改变(不如说是进行保存)//监听distDev下的文件 编译后的代码 function compileCompleteCode(cb){ console.log(${num+=1}.chokidar开始监听distDev下的文件); //该文件产生变化时 说明构建已完成。 const watcher = chokidar.watch(‘distDev//*.js’); watcher.on(‘all’, (event, path) => { if(event === ‘change’){ console.log(path+‘发生变化，开始进行热更新’); bs.reload(path); console.log(‘热更新已完成’); } }); console.log(’\033[40;32m 编译后的代码监听完成’);}步骤3 directives(‘devServer’);步骤4 bs.init({ proxy: ‘http://localhost:8080’, open: false });整体代码const npm = require(’npm’);const bs = require(‘browser-sync’).create();const chokidar = require(‘chokidar’);const child_process = require(‘child_process’)var num = 0;//计数function directives(commond,cb){ npm.load(function(){ npm.commands.cache([‘clean’], function(){ npm.commands.run([commond],cb); }) })}function dev(cb){ return directives(‘dev’,function(){ cb && cb(); })}//监听源码函数function soundCode(cb){ console.log(${num+=1}.chokidar开始监听src&public下的文件) const warcher = chokidar.watch([‘src//.’,‘public//.’]) warcher.on(‘all’, (event, path) => { if(event ===‘change’){ console.log(’\033[40;31m ‘+path+‘源码发生修改，进行编译,请稍后’); child_process.exec(’npm run dev’,function(error, stdout, stderr){ if (error) { console.log(error.stack); console.log(‘Error code: ‘+error.code); console.log(‘Signal received: ‘+error.signal); } console.log(stdout); console.log(‘编译完成’); }) } }); console.log(’\033[40;32m 源码监听完成’);}//监听distDev下的文件 编译后的代码function compileCompleteCode(cb){ console.log(${num+=1}.chokidar开始监听distDev下的文件); //该文件产生变化时 说明构建已完成。 const watcher = chokidar.watch(‘distDev//*.js’); watcher.on(‘all’, (event, path) => { if(event === ‘change’){ console.log(path+‘发生变化，开始进行热更新’); 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}开启node服务) directives(‘devServer’); console.log(${num+=1}开启browserSync代理服务); 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项目 — 伪热更新