Question

我总是收到一条消息说：

$。hubConnection不是函数

错误：找不到jQuery。请确保之前引用了jQuery SignalR客户端JavaScript文件。安慰“$”和“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和this guide from Microsoft我设法使用ES6语法让SignalR使用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 = (summary) => {
                // 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"/>的加载，因为它不再需要。

Answer 3

扩展了Hannes Neukermans的答案：

使用 webpack.ProvidePlugin 使jQuery在全局范围内可用，但同时也使jQuery进入不应使用的中间位置。例如，它使用jQuery特定的对象（KeyboardEvent => jQuery.Event）包装一些事件。

因此，最好不要使用webpack.ProvidePlugin，而应仅使用expose-loader。

在您的webpack.config.js中：

module: {
    rules: [
        {
            test: require.resolve('jquery'),
            use: [
                {
                    loader: 'expose-loader',
                    options: 'jQuery'
                },
                {
                    loader: 'expose-loader',
                    options: '$'
                }
            ]
        }
    ]
}

您仍然必须在vendor.ts中导入signalR和jQuery：

import 'jquery';
import 'signalR';

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

3 个答案: