javascript - 如何在 angular cli 1.0.0-rc.0 中正确包含 jQuery？

Question

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

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

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

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

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

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

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

Answer 1

我在我的项目中使用 jQuery，如下所示。

1. 安装 jQuery

   npm install --save jquery
   

2. 安装 jQuery 类型定义以进行类型检查。

   npm install --save-dev @types/jquery
   

3. 在 angular-cli.json 文件中的“scripts”数组中添加 jquery 文件的引用。

   "scripts": [
       "../node_modules/jquery/dist/jquery.min.js"
    ]
   

4. 在您要使用的任何组件中导入 jquery。

   import * as jQuery from 'jquery';
   

就是这样。同样，您也可以使用其他库，如 moment.js 、 d3.js 等。