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

Question

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

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

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

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

我尝试添加 bootstrap-datepicker通过创建一个名为 vendor.js 的包内容如下:

import 'bootstrap-datepicker';

我可以打电话$('input').datepicker()来自 vendor.js捆绑，但是如果我尝试使用内联调用它 <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 设置一个部分:

module.exports = {
  module: {
    rules: [
      {
        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 并导致您的插件失去作用域。