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項目 --- 僞熱更新