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项目 --- 伪热更新