Aurelia 1.0.6 с JSPM и SystemJS - горячая замена модулей с прокси для IIS Express - PullRequest
Новая
       76

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

0 голосов
/ 19 октября 2018

Ранее я работал с webpack и использовал webpack-dev-server с gaearon / Reaction-Hot-Loader, который работал очень хорошо.

Для перезагрузки при изменениях я использовал browser-sync со следующей командойэто работает.proxy - это Asp.Net IIS Express: 

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

Проблема с этим заключается в том, что он работает только с полной перезагрузкой страницы, и что мне особенно понравилось в реагирующем горячем загрузчике, так это то, что страницане был вынужден перезагружаться полностью, но вместо этого мог перезагружать определенные элементы.

Лучший ресурс, который я нашел до сих пор для достижения того же в Аурелии:

https://github.com/alexisvincent/systemjs-hot-reloader/issues/102#issuecomment-314179277

Согласнок примеру GIF он делает именно то, что я не хотел:

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

Настройка:

https://github.com/wegorich/aurelia-sysemjs-hot-plugin

Пример:

https://github.com/wegorich/aurelia-systemjs-loader

Две ошибки:

Вам нужно запустить:

jspm install npm:systemjs-hot-reloader-example вместо jspm install systemjs-hot-reloader-example. PR # 114 не был объединен для systemjs-hot-reloader , поэтому необходимо использовать пользовательский systemjs-hot-reloader-example.

В вашей конфигурации SystemJS вам необходимо добавить"aurelia-path": "npm:aurelia-path@1.1.1" для "npm:aurelia-hot-module-reload@0.1.0".Без этого вы получите 404 для импорта пути.Завершено: 

"npm:aurelia-hot-module-reload@0.1.0": {
  "aurelia-dependency-injection": "npm:aurelia-dependency-injection@1.4.1",
  "aurelia-loader": "npm:aurelia-loader@1.0.0",
  "aurelia-metadata": "npm:aurelia-metadata@1.0.4",
  "aurelia-pal": "npm:aurelia-pal@1.8.0",
  "aurelia-templating": "npm:aurelia-templating@1.10.0",
  "aurelia-path": "npm:aurelia-path@1.1.1"
},

Однако при запуске кода я получаю следующую ошибку: 

The systemjs-hmr polyfill must be loading after SystemJS has loaded

Скрипты загружаются так: 

<script src="~/Scripts/system.js"></script>
<script src="~/src/config.js?nocache=@DateTime.Now.Ticks"></script>
<script>
    System.import('aurelia-loader-systemjs');
    Promise.all([
        System.import('aurelia-systemjs-hot-plugin'),
        System.import('systemjs-hot-reloader-example')
    ]).then(([fileChanged, connect]) => {
        connect({
            host: '//localhost:3000', fileChanged
        });
        System.import('aurelia-bootstrapper');
    });
</script>

Если я загружаюsystem.js после System.import('aurelia-loader-systemjs'); Я получаю ошибку Uncaught ReferenceError: System is not defined.

Глядя на код, который генерирует ошибку, выглядит следующее: 

if (!System && !!SystemJS) console.warn('The systemjs-hmr polyfill must be loading after SystemJS has loaded');

При взгляде на код Systemне определено и SystemJS установлено.Однако импорт выполняется из System.import

enter image description here

Я могу написать либо SystemJS.import('aurelia-loader-systemjs'); или System.import('aurelia-loader-systemjs');.Я получаю тот же результат.

https://github.com/systemjs/systemjs/issues/1351

Почему System undefined при запуске импорта?

Версии:

  • JSPM 0.16.53
  • SystemJS v0.19.27
  • Aurelia 1.0.6

Я также посмотрел на собственную горячую перезагрузку модуля Aurelias, но для этого требуется Webpack, который мы не делаемт использовать.

https://github.com/aurelia/hot-module-reload

https://aurelia.io/blog/2016/12/08/big-aurelia-release-update/

...