如何在Angular 2中的webpack中加载signalr.js

Question

我总是收到一条消息说:

$ .hubConnection不是一个函数

错误:找不到jQuery.请确保在SignalR客户端JavaScript文件之前引用jQuery.安慰"$"和"jquery"是不确定的.

我需要做什么,让信号器使用webpack工作？

Answer 1

清洁解决方案:使用expose-loader !!

npm install expose-loader --save-dev

在你的vendor.ts里面

import 'expose-loader?jQuery!jquery';
import '../node_modules/signalr/jquery.signalR.js';

在你的webpack.config.ts中

new ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' })

说明:jquery.signalR.js脚本确实不是作为umd模块编写的.默认情况下,它不能由webpack加载.它不需要jquery,但假设Jquery存在于全局变量window.jQuery中.我们可以通过使用expose-loader导入jquery模块在webpack中完成这项工作.这个加载器将确保jquery的导出值暴露给jQuery全局变量.因此允许加载signalr.js脚本作为下一个模块.

此外,如果您想稍后使用$使用signalr,您还必须使用jquery模块的provideplugin.在webpack.config.js中

Answer 2

感谢hannes和Microsoft的本指南，我设法使SignalR使用ES6语法与Webpack和TypeScript一起使用。

之前：

///<reference path="./vendor/typings/signalr/signalr.d.ts"/>

interface SignalR {
    myHub: Some.Stuff.IMyHubProxy;
}

namespace MyWebsite.Stuff {
    export class SignalRConnectionService {
        ...
        public start() {
            var myHubProxy = $.connection.myHub;

            myHubProxy.client.onSomethingChanged = (eventArgs) => {
                // do stuff
            };

            $.connection.hub.start();
        }
    }
}

后：

import "signalR";

export class SignalRConnectionService {
    public start() {
        ...
        const hubConnection = $.hubConnection();
        const myHubProxy = hubConnection.createHubProxy('myHub');

        myHubProxy.on('onSomethingChanged', (summary) => {
            // do stuff
        });

        hubConnection.start();
    }
}

webpack.config.js：

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        'window.jQuery': 'jquery',
        jQuery: "jquery"
    })
]

packages.json：

"dependencies": {
  "jquery": "~2.1.4",
  "signalr": "~2.2.3"
}

注意：您也将需要删除的加载，<script src="/signalR/hubs"/>因为不再需要加载。