伪热更新
上一期写了一些问题。
原计划是暂时不做处理的，最终结果就是今天没忍住鸭。
废话不多说先贴思路
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项目 --- 伪热更新