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 dev
function dev(cb){
return directives(‘dev’,function(){
cb && cb();
})
}
步骤2
chokidar可以监听文件。具体去看文档嘛
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项目 — 伪热更新