使用RollupJS在nodejs服务器上启用livereload

Question

每当我对客户机源进行更改时，我都想启用浏览器的livereloading。我想将此机制添加到为客户端提供服务的现有nodejs服务器中。我怎样才能最好地使用RollupJS呢？

Answer 1

服务器：

import http from 'http';
import { server as ServerWs } from 'websocket';
import { watch } from 'rollup';
import rollupConfig from './rollup.config';

...

if (process.env.NODE_ENV === 'development') {

    // Setup websocket server for livereload
    const httpServer = http.createServer();
    const ws = new ServerWs({ httpServer, autoAcceptConnections: true });
    httpServer.listen(12012);

    // Rollup build watcher enabling reload when finished
    const watcher = watch(rollupConfig);
    watcher.on('event', (ev) => {
        switch (ev.code) {
        case 'START':
            ws.broadcast('livereloadstart');
            break;
        case 'END':
            ws.broadcast('livereloadend');
            break;
        default: break;
        }
    });
}

websocket连接安装：https://www.npmjs.com/package/websocket

客户端：

if (process.env.NODE_ENV === 'development') {

    // Enable live reloading whenever a change on the client code occurs.
    let interval = -1;
    const connectWebsocket = () => {
        clearInterval(interval);
        const ws = new WebSocket('ws://localhost:12012');
        ws.addEventListener('message', message => {
            switch (message.data) {
            case 'livereloadstart': 
                console.warn('Recompiling, please wait for reload...'); 
                break;
            default: 
                location.reload(); 
                break;
            }
        });
        ws.addEventListener('close', () => {
            // Try to reconnect every second with the server whenever it lost connection.
            interval = setInterval(connectWebsocket, 1000);
        });
    };
    connectWebsocket();
}

使用websocket API：https://developer.mozilla.org/en/docs/Web/API/WebSocket