带有JSPM和SystemJS的Aurelia 1.0.6-IIS Express代理的热模块替换

时间:2018-10-19 09:19:35

标签: javascript aurelia systemjs jspm

我以前曾与webpack合作,并且将webpack-dev-server与gaearon / react-hot-loader一起使用,效果很好。

为了重新加载更改,我将browser-sync与以下有效命令一起使用。 proxy是Asp.Net IIS Express:

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

这个问题是,它只能在整个页面重载时工作,而我特别喜欢react-hot-loader的原因是该页面没有被强制完全重载,而是可以重载特定元素。

到目前为止,我发现在Aurelia中实现相同目标的最佳资源:

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-examplePR #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
  • 奥雷利亚1.0.6

我也看过Aurelias自己的hot-module-reload,但它需要我们不使用的Webpack。

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

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

0 个答案:

没有答案