使用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，但这并没有帮助。

- spacek33z

---

请注意，daterangepicker 有一行代码类似于 jQuery = require('jquery')。我有一种感觉，由于这个原因，它可能会将插件绑定到错误的 jQuery 实例。如果您没有捆绑 jQuery，则应设置 externals。 - Juho Vepsäläinen

我该如何使用“externals”？我在想像这样externals: {'bootstrap-daterangepicker': '$'}，但不幸的是它并不能正常工作。 - spacek33z

如果你只有 externals: {jquery: true}，它会将 jQuery 视为外部模块，并不会将其包含在捆绑包中。在这种情况下，你的日期选择器看起来会通过全局挂钩进行连接。 - Juho Vepsäläinen

嗯，那不起作用。看起来bootstrap-daterangepicker确实没有使用正确的jQuery，因为它没有包含在包中。我认为错误纯粹在于导出$部分。无论如何，谢谢 :). - spacek33z

我找到了一个答案，其中包含一些额外的策略。也许其中一个能解决问题。 - Juho Vepsäläinen

Answer 1

显然，bootstrap-daterangepicker 尝试加载自己的 jQuery。因此，在“我的”jQuery中，$.fn.daterangepicker 不可用。我在 webpack.config.js 文件中使用以下代码强制 bootstrap-daterangepicker 包含我的 jQuery：

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

- spacek33z

---

这也解决了我的devbridge-autocomplete问题，谢谢。 - Nate

哦，我的天啊。非常感谢你。你救了我的夜晚。 - Andy

对我有用！！ 应该添加到官方日期范围选择器文档中。 - alxb

Answer 2

webpack的“resolve”选项对我没有帮助，但@spacek33z的评论让我意识到我的Angular组件关联的元素不是jQuery元素，而是普通的DOM元素。原因是Angular使用了自己的jqLite而不是真正的jQuery。

在寻找为什么Angular无法找到真正的jQuery时，我发现了问题 'Webpack：如何使angular自动检测jQuery并将其用作angular.element而不是jqLite？'，这让我意识到Angular需要window.jQuery。

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

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

- Rob Light