共计 3162 个字符，预计需要花费 8 分钟才能阅读完成。
伪热更新
上一期写了一些问题。原计划是暂时不做处理的，最终结果就是今天没忍住鸭。废话不多说先贴思路
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 项目 — 伪热更新
