通过webpack在Angular2中包含jQuery并从组件中访问它 [英] Include jQuery in Angular2 with webpack and access it from component

问题描述

我想将jQuery和SignalR包含在我的Angular2-Application中，并将所有内容都与webpack连接起来.

I want to include jQuery and SignalR in my Angular2-Application and wire everything up with webpack.

因此，我通过npm安装了jQuery.

I therefore installed jQuery via npm.

package.json

package.json

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

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

Files and folders are installed correctly.

我现在将我的vendor.ts中的这些文件作为目标，以使Webpack查找并包含它们:

I now target these files in my vendor.ts to get webpack to find and include them:

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

然后，webpack会获取这些文件并将其连接起来.我可以在我的vendor.js中看到这一点. jQuery存在于此.还有jquery signalR-File.

And webpack gets these files and wires them up. I can see this in my vendor.js. jQuery is present there. Also the jquery signalR-File.

我的webpack.config:

My 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"]
        })
    ]
}

加载到我的索引中，例如:

Loaded in my index like:

<script src="js/polyfills-2eba52f6.bundle.js"></script>
<script src="js/vendor-2eba52f6.bundle.js"></script>
<script src="js/app-2eba52f6.bundle.js"></script>

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

But when I try to use it in my angular2 component like:

// ...

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不是函数

$.hubConnection is not a function

错误:找不到jQuery.请确保之前已引用jQuery SignalR客户端JavaScript文件.

Error: jQuery was not found. Please ensure jQuery is referenced before the SignalR client JavaScript file.

输出"$"和"jquery"是不确定的.

consoling out "$" and "jquery" is undefined.

如何访问webpack中的singalr-Function?

What can I do to access the singalr-Function in webpack?

BR Tenoda

BR Tenoda

推荐答案

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

npm install expose-loader --save-dev

在您的vendor.ts内部

inside your vendor.ts

> import 'expose?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.signalR.js脚本不需要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. The jquery.signalR.js script 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

这篇关于通过webpack在Angular2中包含jQuery并从组件中访问它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！