Question

背景：

我一直在尝试通过热模块更换来设置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 with JSPM and SystemJS - Hot Module Replacement with proxy for IIS Express

进度：

为此，我已将aurelia-sysemjs-hot-plugin与chokidar-socket-emitter一起安装。使用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）中被替换。但是，由于某些原因，新值不会在浏览器中更新。

处理组件/页面/MyPage/index.html的HMR

该解决方案未在开发中使用Gulp。系统使用 tsconfig.json "compileOnSave": true自动将单个HTML文件加载并从TypeScript转换.ts文件到JavaScript。

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

我怀疑这可能与IIS有关，因此我尝试将Browsersync与IIS代理一起使用，并添加了chokidar-socket-emitter作为插件，并更改了与Browsersync端口的连接。

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

使用此设置，浏览器不会记录任何已更改的内容。在Chrome开发者工具中查看网络套接字流量时，显示状态为101交换协议，然后什么也没有发生。我尝试过在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
};

带有chokidar-socket-emitter的Systemjs-hot-reloader不替换元素

0 个答案: