使用 Webpack 公开 jquery 插件

Question

我正在尝试将 bootstrap-daterangepicker 与 Webpack 一起使用。在我的视图文件中，我有以下内容：

define(function (require) {
    require('bootstrap-daterangepicker');

    $('#daterangepicker').daterangepicker({ ... });
});

在webpack.config.js中：

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

这导致 daterangepicker is not a function。我查看了 daterangepicker.js，似乎 $.fn.daterangepicker 没有正确导出。我该怎么做？我试过使用 imports-loader 强制导入 jQuery，但这没有帮助。

Answer 1

显然 bootstrap-daterangepicker 试图加载他自己的 jQuery。因此 $.fn.daterangepicker 在 'my' jQuery 中不可用。我强制 bootstrap-daterangepicker 将我的 jQuery 包含在 webpack.config.js:

中的这一行

resolve: {
    alias: {
        'jquery': require.resolve('jquery'),
    }
}

Answer 2

webpack 'resolve' 选项对我没有帮助，但@spacek33z 的评论让我意识到我的 Angular 组件的链接元素不是 jQuery 元素，而是一个普通的 DOM元素。原因是 Angular 使用自己的 jqLite 而不是真正的 jQuery.

在寻找 Angular 为什么找不到真正的 jQuery 时，我发现了问题“”，它帮助我意识到 Angular 需要 window.jQuery .

所以这对我来说似乎是正确的 webpack.conf.js 咒语：

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

使用 Webpack 公开 jquery 插件

Exposing jquery plugin with Webpack

webpack