如何在Angular 2的webpack中加载signalr.js [英] How to load signalr.js in webpack inside Angular 2

问题描述

我总是收到一条消息:

$.hubConnection不是函数

$.hubConnection is not a function

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

Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file. consoling out "$" and "jquery" is undefined.

要使用Webpack使Signalr正常工作，我该怎么办?

What do I need to do, to get signalr working using webpack?

推荐答案

清洁解决方案:使用暴露加载程序！

npm install expose-loader --save-dev

在您的vendor.ts内部

inside your vendor.ts

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

在webpack.config.ts内部

inside your webpack.config.ts

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

说明: 实际上，jquery.signalR.js脚本不是作为umd模块编写的.默认情况下，这使得它不能被webpack加载.它不需要jquery，但假设Jquery位于全局变量window.jQuery中.我们可以通过使用暴露加载器导入jquery模块来在webpack中完成这项工作.该加载器将确保将jquery的导出值公开给jQuery全局变量.这样就可以将signalr.js脚本加载为下一个模块.

Explanation: The jquery.signalR.js script is indeed not written as a umd module. Which makes it by default, not to be loadable by webpack. It doesn't require jquery, but assumes that Jquery lives on the global variable window.jQuery. We can make this work in webpack by importing the jquery module with the expose-loader. This loader will make sure that the exported value of jquery, is exposed to the jQuery global var. Thus allowing to load the signalr.js script as the next module.

此外，如果您以后要通过使用$使用signalr，则还必须对jquery模块使用Provideplugin.里面的webpack.config.js

Also if you want to later use signalr by using $, you also will have to use the provideplugin for the jquery module. inside webpack.config.js

这篇关于如何在Angular 2的webpack中加载signalr.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！