如何使用 webpack 添加 jquery 插件？答案

【问题标题】：How to add jquery plugins using webpack?如何使用 webpack 添加 jquery 插件？
【发布时间】：2016-09-22 11:03:55
【问题描述】：

我正在为我的网络应用程序使用带有 angular 2 的 webpack 我需要向我的应用程序添加一个 jquery 滑块，所以我为此使用了一个 jquery 插件。

我的 jquery 的 webpack 配置是

new ProvidePlugin({   
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'   
})

ProvidePlugin 为我的应用程序提供了 $ 和 jQuery，但我还需要将 jquery 插件导入到我的应用程序中

【问题讨论】：

【解决方案1】：

通常会在需要时导入 jQuery 插件，而不是全局导入。

例如：

import 'jquery.waterwheelCarousel.min.js';

这将导致插件文件被加载，并且由于 jQuery 是全局提供的，它应该导致插件函数在 jQuery 对象上可用 ($("#carousel").waterwheelCarousel())

【讨论】：

【解决方案2】：

在 main.ts 中包含

import 'jquery';

一次。

然后在 webpack 配置中

   new ProvidePlugin({
       jQuery: 'jquery',
      'window.jQuery': 'jquery',
       $: 'jquery',
      'window.$': 'jquery'
    })

【讨论】：