vueSSR: building a vueSSR project from 0 to 1 -- pseudo hot update

Pseudo thermal regeneration

Previous issue Wrote some questions.
The original plan is not to deal with it for the time being, and the final result is that the duck can't bear it today.
Don't talk too much, stick ideas first

1. Advanced line local compilation
 2. After compiling, use chokidar to listen to source files and compiled files respectively. (source code change, trigger compilation. The compiled file changes, triggering overload)
3. Start node service
 4. Enable the browserSync proxy service

Plug ins and modules used

    npm //Execute script command
    browser-sync //Refresh the core of the browser
    chokidar //Modify listening file
    child_process //Start subprocess execution script

Step 1

Directly use npm object to execute the written command


function directives(commond,cb){
    npm.load(function(){
        //Clear cache
        npm.commands.cache(['clean'], function(){
            npm.commands.run([commond],cb);
        })
    })
}
//Execute NPM run dev
function dev(cb){
    return directives('dev',function(){
        cb && cb();
    })
}

Step 2

chokidar can listen to files. See specifically File Well

chokidar's change event, as long as you save it, will trigger no matter whether you have changed or not.

//Listen to the source part

//Listen to the source function and start the subprocess to execute the compilation command if it changes

 function soundCode(cb){
    console.log(`${num+=1}.chokidar Start monitoring src&public Next file`)
    const warcher = .watch(['src/**/*.*','public/**/*.*'])
    warcher.on('all', (event, path) => {
        if(event ==='change'){
            console.log('\033[40;31m '+path+'Source code is modified and compiled,Please wait a moment.');
            //Start subprocess and execute command
            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('Compile completed');
            })
        }
    });
    console.log('\033[40;32m Source monitoring completed');
}

// Monitor whether the compiled code (js) has changed (rather than being saved)
//Listen to the compiled code of files under distDev
 function compileCompleteCode(cb){

    console.log(`${num+=1}.chokidar Start monitoring distDev Next file`);
    //When the file changes, the build is complete.
    const watcher = chokidar.watch('distDev/**/*.js');
    watcher.on('all', (event, path)  => {
        if(event === 'change'){
            console.log(path+'Change, start thermal update');
            bs.reload(path);
            console.log('Hot update completed');
        }
    });
    console.log('\033[40;32m Compiled code listening completed');
}

Step 3

    directives('devServer');

Step 4

    bs.init({
        proxy: 'http://localhost:8080',
        open: false
    });

Whole code

const npm = require('npm');
const bs = require('browser-sync').create();
const chokidar = require('chokidar');
const child_process = require('child_process')
var num = 0;//count


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();
    })
}
//Listening to source function
function soundCode(cb){
    console.log(`${num+=1}.chokidar Start monitoring src&public Next file`)
    const warcher = chokidar.watch(['src/**/*.*','public/**/*.*'])
    warcher.on('all', (event, path) => {
        if(event ==='change'){
            console.log('\033[40;31m '+path+'Source code is modified and compiled,Please wait a moment.');
            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('Compile completed');
            })
        }
    });
    console.log('\033[40;32m Source monitoring completed');
}

//Listen to the compiled code of files under distDev
function compileCompleteCode(cb){

    console.log(`${num+=1}.chokidar Start monitoring distDev Next file`);
    //When the file changes, the build is complete.
    const watcher = chokidar.watch('distDev/**/*.js');
    watcher.on('all', (event, path)  => {
        if(event === 'change'){
            console.log(path+'Change, start thermal update');
            bs.reload(path);
            console.log('Hot update completed');
        }
    });
    console.log('\033[40;32m Compiled code listening completed');
}




console.log(`${num+=1}.Local compilation`);
dev(function(){
    console.log("\033[40;31m Compile completed")
    soundCode()
    compileCompleteCode()
    console.log(`${num+=1}open node service`)
    directives('devServer');
    console.log(`${num+=1}open browserSync Agency service`);
    bs.init({
        proxy: 'http://localhost:8080',
        open: false
    });
});

Project github address
Project public network address

1) vueSSR: building a vueSSR project from 0 to 1 --- initialization
2) vueSSR: build from 0 to 1
3) vueSSR: build the vueSSR project from 0 to 1 --- node and configuration of vue-cli3
4) vueSSR: build the vueSSR project from 0 to 1 --- configuration of vuex (data prefetch)
5) vueSSR: building a vueSSR project from 0 to 1 -- deployment of development environment
6) vueSSR: building a vueSSR project from 0 to 1 -- pseudo hot update

Tags: node.js npm hot update github network

Posted on Tue, 03 Dec 2019 19:43:17 -0800 by veridicus