使用webpack在Angular2中包含jQuery并从组件访问它

我想在我的Angular2-Application中包含jQuery和SignalR，并使用webpack连接所有内容。

因此我通过npm安装了jQuery。

的package.json

"dependencies": { // ... "jquery": "2.1.4", // ... }, 

文件和文件夹已正确安装。

我现在在vendor.ts中定位这些文件以获取webpack以查找并包含它们：

 import 'jquery'; import 'bootstrap/dist/js/bootstrap.js'; import '../../bower_components/signalr/jquery.signalR'; 

并且webpack获取这些文件并将它们连接起来。 我可以在我的vendor.js中看到这个。 jQuery出现在那里。 还有jquery signalR-File。

我的webpack.config：

 var webpack = require("webpack"); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { "vendor": "./wwwroot/app/vendor", "polyfills": "./wwwroot/app/polyfills", "app": "./wwwroot/app/boot" }, output: { path: __dirname, filename: "[name]-[hash:8].bundle.js" }, resolve: { extensions: ['', '.ts', '.js', '.html'] }, devtool: 'source-map', module: { loaders: [ { test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/ }, { test: /\.html$/, loader: 'html' }, { test: /\.css$/, loader: 'raw' } ] }, plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery' }), //new webpack.optimize.DedupePlugin(), new webpack.optimize.CommonsChunkPlugin({ name: ["app", "vendor", "polyfills"] }) ] } 

在我的索引中加载如下：

但是当我尝试在我的angular2组件中使用它时：

 // ... declare var jQuery:any; declare var $:any; @Injectable() export class MySignalRService { private connection; constructor() { this.connection = $.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); jQuery.hubConnection(CONFIGURATION.baseUrls.server + 'signalr/'); // ... } //... 

我总是得到消息

$ .hubConnection不是一个函数

错误：找不到jQuery。 请确保在SignalR客户端JavaScript文件之前引用jQuery。

安慰“$”和“jquery”是未定义的。

如何访问webpack中的singalr-Function？

BR Tenoda

Answer 1

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

 npm install expose-loader --save-dev 

在你的vendor.ts里面

 > import 'expose?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.signalR.js脚本不需要jquery，但假设Jquery存在于全局变量window.jQuery中。 我们可以通过使用expose-loader导入jquery模块来在webpack中完成这项工作。 这个加载器将确保jquery的导出值暴露给jQuery全局变量。 因此允许加载signalr.js脚本作为下一个模块。

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

Answer 2

我调查了你的问题并找到了以下解决方案：

1）使用

 window.jQuery = require("jquery"); 

在您的条目文件中导入jQuery

2）更改webpack.config.js

  new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery' <== add this line }), 

然后在您的输入文件中：

 import 'jquery'; 

Answer 3

我不熟悉SignalR，但是在尝试使我的应用程序使Spectrum jQuery Colorpicker工作时，我解决了类似问题的步骤：

1. 将libs添加到package.json文件，依赖项部分

    "jquery": "3.1.1", "spectrum-colorpicker": "1.8.0" 

2. 将typings添加到package.json文件，devDependencies部分

    "@types/spectrum": "1.5.27", "@types/jquery": "2.0.33", 

3. 在tsconfig.json文件中指定类型。 编译器用于在没有此条目的情况下抛出错误

    "types": ["jquery", "spectrum"] 

4. 将webpack插件添加到webpack.common.js中

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

5. 将导入添加到vendor.ts文件中

    import 'jquery/dist/jquery.js'; import 'spectrum-colorpicker/spectrum.js'; import 'spectrum-colorpicker/spectrum.css'; 

6. 然后在您的组件或指令中添加以下声明语句

    declare var $ : JQueryStatic; 

7. 代码中的使用示例

    $("#" + this.fieldId).spectrum({ preferredFormat: "hex3", showInput: true, showPalette: true, palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]], color: this._color, change: this.colorChanged, }); 

就是这个。 这些修改解决了我的问题，希望能帮助你并节省一些时间给那些试图让jQuery插件在Angular2应用程序上运行的人。