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。因此，{my} jQuery中没有$.fn.daterangepicker。我强迫bootstrap-daterangepicker在webpack.config.js中用这行包含我的jQuery：

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

Answer 2

网络包解析＆＃39;选项没有帮助我，但@ spacek33z评论让我意识到我的Angular组件的链接元素不是一个jQuery元素，而是一个普通的DOM元素。之所以Angular使用自己的jqLite和真正的jQuery。

为什么Angular找不到真正的jQuery，我找到了问题＆＃39; Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?＆＃39;这帮助我实现了Angular的需求window.jQuery。

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

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

使用Webpack公开jquery插件

2 个答案: