使用 Webpack 4 在全局范围内包含额外的 jQuery 插件

Question

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

我正在使用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

看来问题是第二个包导入是在没有 datpicker 附加组件的情况下重新添加 jQuery。有没有办法解决这个问题？

Answer 1

我已经在这类问题上进行了几轮，并且在expose-loader 上取得了最大的成功。在你的 webpack 配置中，你应该使用以下暴露加载器配置为 jQuery 设置一个部分：

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

这里有类似的SO帖子：

How to import jquery in webpack（他们的正则表达式模式对我不起作用）

Expose jQuery to real Window object with Webpack

Webpack 2 loading, exposing, and bundling jquery and bootstrap

您应该能够找到使用此配置的其他几篇文章/帖子，这是我迄今为止能够成功开始工作的唯一一篇。

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