使用 Webpack 暴露 jquery 插件

Posted 2023-02-22

【中文标题】使用 Webpack 暴露 jquery 插件

【英文标题】：Exposing jquery plugin with Webpack

【发布时间】：2015-07-04 21:43:57

【问题描述】：

我正在尝试将 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，但这没有帮助。

【问题讨论】：

请注意，daterangepicker 有一行 jQuery = require('jquery');。我有一种感觉，它可能会因此将插件绑定到错误的 jQuery 实例。如果你不捆绑 jQuery，你应该设置externals。

我将如何使用externals？我在想externals: 'bootstrap-daterangepicker': '$' 之类的东西，但不幸的是这不起作用。

如果您只有externals: jquery: true，它将把 jQuery 视为外部的，并且不会将其包含在包中。在这种情况下，您的日期选择器将通过它的外观将其连接到全局。

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

我发现an answer 有一些额外的策略。也许其中一个可以解决问题。

【参考方案1】：

webpack 'resolve' 选项对我没有帮助，但@spacek33z cmets 让我意识到我的 Angular 组件的链接元素不是 jQuery 元素，而是普通的 DOM 元素。原因是 Angular 使用自己的 jqLit​​e 与真正的 jQuery。

搜索为什么 Angular 没有找到真正的 jQuery，我发现了问题“Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?”，它帮助我意识到了 Angular 的需求window.jQuery。

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

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

【参考方案2】：

显然bootstrap-daterangepicker 试图加载他自己的 jQuery。因此$.fn.daterangepicker 在“我的”jQuery 中不可用。我已经强制bootstrap-daterangepicker 在 webpack.config.js 中将我的 jQuery 包含在这一行中：

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

【讨论】：

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

天啊。非常感谢。你得救了我的夜晚。

为我工作！！应添加到官方 daterangepicker 文档中