在 Webpack 4 中全局包含额外的 jQuery 插件

Question

我正在尝试使用 Webpack 4 使 jQuery 插件可访问内联 JavaScript。

我正在使用 PluginProvider 使 jQuery 可用于我的网站：

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

这工作正常，我可以从包含我的包的任何页面访问 jQuery。

我试图通过创建一个名为 vendor.js 的包来添加 bootstrap-datepicker，其中包含以下内容：

import 'bootstrap-datepicker';

我可以从 vendor.js 包中调用 $('input').datepicker()，但是如果我尝试使用内联 <script> 调用它，我会得到：

Uncaught TypeError: $(...).datepicker is not a function

如何配置 Webpack 4 使 bootstrap-datepicker 可用于全局范围？

更新

我已经在此处上传了演示此问题的源代码：https://github.com/LondonAppDev/webpack-global-jquery-issue

看来问题是第二个捆绑包导入正在重新添加 jQuery 而没有 datpicker 附加组件。有解决办法吗？

Answer 1

我已经处理过几轮此类问题，并且在 expose-loader 上取得了最大的成功。在您的 webpack 配置中，您应该使用以下公开加载程序配置为 jQuery 设置一个部分：

{
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: 'jQuery'
    }, {
        loader: 'expose-loader',
        options: '$'
    }]
},

这里有一个类似的 SO 帖子：

（他们的正则表达式模式对我不起作用）

使用 Webpack 将 jQuery 暴露给真正的 Window 对象

Webpack 2 加载、公开和捆绑 jquery 和 bootstrap

您应该可以找到其他几个 articles/posts 使用此配置的配置，这是迄今为止我唯一能够成功开始工作的配置。

另外值得注意的是，bootstrap 4 似乎也在内部加载或对 jQuery 执行要求，因此如果您在 jQuery [=32= 之后包含导入或要求] 和插件，它将重新初始化 jQuery 并导致您的插件失去作用域。

在 Webpack 4 中全局包含额外的 jQuery 插件

Including additional jQuery plugins globally with Webpack 4

javascript

jquery

webpack

webpack-4