我以前曾与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-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
我可以写SystemJS.import('aurelia-loader-systemjs');
或System.import('aurelia-loader-systemjs');
。我得到相同的结果。
https://github.com/systemjs/systemjs/issues/1351
运行导入时为什么System
undefined
?
版本:
我也看过Aurelias自己的hot-module-reload,但它需要我们不使用的Webpack。
https://github.com/aurelia/hot-module-reload
https://aurelia.io/blog/2016/12/08/big-aurelia-release-update/