Systemjs-hot-reloader с чокидар-розеткой-излучателем без замены элементов - PullRequest
0 голосов
/ 22 октября 2018

Справочная информация:

Я пытался настроить Aurelia с горячей заменой модуля.Мне удалось сделать это с browser-sync , но только с полной перезагрузкой страницы, например:

browser-sync start --files "**/*" --proxy "https://localhost:44349/"

Прокси-сервер для IIS Express.

Что явместо этого нужно заменить определенные элементы, например:

https://github.com/wegorich/aurelia-systemjs-loader/blob/master/assets/images/demo.gif

Исходный вопрос и настройка:

Aurelia 1.0.6 с JSPM и SystemJS- Горячая замена модуля с прокси для IIS Express

Ход выполнения:

Для этого я установил aurelia-sysemjs-hot-plugin с чокидар-розетка-излучатель .Запустил его с помощью команды chokidar-socket-emitter из папки src и подключил так:

System.import('aurelia-loader-systemjs');
Promise.all([
    System.import('aurelia-systemjs-hot-plugin'),
    System.import('systemjs-hot-reloader-example')
]).then(([fileChanged, connect]) => {
    connect({
        host: 'http://localhost:5776',
        fileChanged
    });
    System.import('aurelia-bootstrapper');
});

Запустил IIS, и когда я что-то изменил, я получил вход в консоль, и приложение попыталось перезагрузить элемент.Вы можете видеть, что определенный элемент заменен в браузере (Chrome).Однако по каким-то причинам новые значения не обновляются в браузере.

Обработка HMR для компонентов / page / MyPage / index.html

Решение не использует Gulp в разработке.Система загружает отдельные HTML-файлы и автоматически переносит .ts-файлы из TypeScript в JavaScript с помощью tsconfig.json "compileOnSave": true.

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#compileonsave

Я подозревал, что это может иметь какое-то отношение к IIS, поэтому я попытался использовать Browsersync с прокси-сервером для IIS и добавил chokidar-socket-emitter в качестве плагина и изменил соединениев порт Browsersync.

connect({
        host: 'https://localhost:3000',
        fileChanged
    });

При этой настройке браузер делает журнал, чтобы что-то было изменено.Глядя на трафик веб-сокетов в Chrome Developer Tools, он говорит, что Status 101 Switching Protocols и больше ничего не происходит.Я попытался запустить все как по HTTP, так и по протоколу HTTPS, один и тот же результат, несмотря ни на что.

enter image description here

Что я делаю не так?

Я настроил bs-config.js так:

module.exports = {
    "ui": {
        "port": 3001
    },
    "files": false,
    "watchEvents": [
        "change"
    ],
    "watch": false,
    "ignore": [],
    "single": false,
    "watchOptions": {
        "ignoreInitial": true
    },
    "server": false,
    "proxy": "https://localhost:44349",
    "port": 3000,
    "middleware": false,
    "serveStatic": [],
    "ghostMode": {
        "clicks": true,
        "scroll": true,
        "location": true,
        "forms": {
            "submit": true,
            "inputs": true,
            "toggles": true
        }
    },
    "logLevel": "info",
    "logPrefix": "Browsersync",
    "logConnections": false,
    "logFileChanges": true,
    "logSnippet": true,
    "rewriteRules": [],
    "open": "local",
    "browser": "default",
    "cors": false,
    "xip": false,
    "hostnameSuffix": false,
    "reloadOnRestart": false,
    "notify": true,
    "scrollProportionally": true,
    "scrollThrottle": 0,
    "scrollRestoreTechnique": "window.name",
    "scrollElements": [],
    "scrollElementMapping": [],
    "reloadDelay": 0,
    "reloadDebounce": 500,
    "reloadThrottle": 0,
    "plugins": [
        {
            "module": "chokidar-socket-emitter"
        }
    ],
    "injectChanges": true,
    "startPath": null,
    "minify": true,
    "host": null,
    "localOnly": false,
    "codeSync": true,
    "timestamps": true,
    "clientEvents": [
        "scroll",
        "scroll:element",
        "input:text",
        "input:toggles",
        "form:submit",
        "form:reset",
        "click"
    ],
    "socket": {
        "socketIoOptions": {
            "log": false
        },
        "socketIoClientConfig": {
            "reconnectionAttempts": 50
        },
        "path": "/socket.io",
        "clientPath": "/browser-sync",
        "namespace": "/browser-sync",
        "clients": {
            "heartbeatTimeout": 5000
        }
    },
    "tagNames": {
        "less": "link",
        "scss": "link",
        "css": "link",
        "jpg": "img",
        "jpeg": "img",
        "png": "img",
        "svg": "img",
        "gif": "img",
        "js": "script"
    },
    "injectNotification": false
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...