如何在 angular cli 1.0.0-rc.0 中正确包含 jQuery? [英] How to include jQuery properly in angular cli 1.0.0-rc.0?

问题描述

我在我的 AngularJS 项目中使用了基于 jQuery 的 select2 组件.我和这里的人有类似的问题:https://github.com/fronteed/icheck/issues/322，并使用那里的建议解决了这个问题.准确地说，我在不使用该建议时收到错误 TypeError: $(...).select2 is not a function.

I use jQuery-based select2 component in my AngularJS project. I had similar issue as guys here: https://github.com/fronteed/icheck/issues/322, and solved it using advice from there. To be accurate, I received error TypeError: $(...).select2 is not a function when not using that advice.

即我在 @angular/cli/models/webpack-configs/common.js 的 Webpack 配置中添加了下一行.

i.e. I added next lines to configuration of Webpack in @angular/cli/models/webpack-configs/common.js.

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

这是在 angular/cli 中启用 jQuery 的最佳方式吗?

Is it the best possible way to enable jQuery in angular/cli?

我认为这与 https://github.com/angular/angular-cli/wiki/stories-global-lib 是正确的方法，因为

I don't think that doing same as in https://github.com/angular/angular-cli/wiki/stories-global-lib is correct way, because

a) webpack 捆绑 jQuery，无需在脚本中指定

a) webpack bundles jQuery without need to specify it in scripts

b) 当你按照故事中的描述包含它时，它仍然会抛出 TypeError: $(...).select2 is not a function 错误.

b) it still throws TypeError: $(...).select2 is not a function error when you include it as described in story.

推荐答案

我能够通过公开 Webpack 来实现我所需要的.使用 ng eject 命令.

I was able to achieve what I needed by exposing Webpack. Use ng eject command.

首先，使用 npm install -S jquery 安装 jQuery(我还安装了 npm install -S select2，因为我也需要).

First, install jQuery using npm install -S jquery (and I also installed npm install -S select2, because I needed that too).

然后，确保您备份了 package.json 文件，因为在 ng eject 期间，Angular CLI 会尝试将其 Webpack 依赖项添加到您的 package.json 中.

Then, make sure that you made backup of your package.json file, since during ng eject Angular CLI will try to add its Webpack dependencies inside your package.json.

ng eject 完成后，在 webpack.config.js 里面我添加了

After ng eject finished working, inside webpack.config.js I added

// ... Inside require/imports part
const ProvidePlugin = require('webpack/lib/ProvidePlugin');

// ... Inside `plugins` section of Webpack configuration
new ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })

现在 select2 将 $(...).select2 函数正确添加到全局 jQuery 对象中！

And now select2 adds $(...).select2 function to global jQuery object properly!

要在 .ts 文件中使用 jQuery 和 select2，您可以在该文件的开头添加下一行:

To use jQuery with select2 inside your .ts file, you can add next lines at the beginning of that file:

import "select2";
import "jquery";
declare var $: any;

// Somewhere deep within component
// ...

$(this.input.nativeElement)
    .select2(config)
    .on("change select2:select select2:unselect", (e: any) => this.onSelect2ElementChange(e));

// ...

这篇关于如何在 angular cli 1.0.0-rc.0 中正确包含 jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！