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

Question

我想在我的 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"]
        })
    ]
}

像这样加载到我的索引中：

<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 组件中使用它时：

// ...

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。请确保之前引用了 jQuery SignalR 客户端 JavaScript 文件。

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

如何访问 webpack 中的 singalr-Function？

BR Tenoda

Answer 1

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

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 2

干净的解决方案：使用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 3

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

1. 将库添加到 package.json 文件的依赖项部分

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

2. 将类型添加到 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 应用程序上工作的人节省一些时间。