Справочная информация:
Я пытался настроить 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, один и тот же результат, несмотря ни на что.
Что я делаю не так?
Я настроил 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
};