用Webpack公开jquery插件

Question

我想和Webpack一起用bootstrap-daterangepicker。在我的视图文件中，我有以下内容：

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的“解决”选项对我没有帮助，但@spacek33z评论让我意识到，我的角组件的链接元素不是jQuery元素，而是普通的DOM元素。原因是这个角度是使用它自己的jqLite而不是真正的jQuery。

寻找为什么角没有找到真正的jQuery，我发现了一个问题'Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?‘，帮助我认识到角需要window.jQuery。

因此，对我来说，这似乎是恰当的webpack.conf.js咒语：

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