使用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 看起来问题在于第二个捆绑包导入了没有datpicker附加项的jQuery。有没有办法解决这个问题？

- LondonAppDev

---

你能创建一个小的git仓库来重现你的问题吗？这样我就可以更容易地接入它了。 - Legends

嘿@Legends，当然可以！我已经在这里上传了示例：https://github.com/LondonAppDev/webpack-global-jquery-issue - LondonAppDev

抱歉，但我无法在您的存储库中找到您的vendor.js捆绑包。 但是我可以看到您当前存储库中存在问题，即您将main.js作为入口点，这是错误的。使用webpack 4，入口点仅用于真正的入口点 - 没有像wp3和CommonsChunkPlugin中那样的供应商脚本。 - Legends

只需更新您的存储库并按照帖子中提到的方式重新创建问题。 - Legends

我也遇到了这个问题，第二个捆绑包导入会重新添加jQuery到全局jQuery变量中，而没有安装其他插件。有人知道解决方法吗？ - Nathan Jones

Answer 1

我曾经遇到过类似的问题，使用 expose-loader 取得了最大的成功。在你的 webpack 配置中，你应该设置一个关于 jQuery 的部分，并使用以下的 expose-loader 配置：

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

这里有几篇类似的SO文章:

如何在webpack中导入jquery （他们的正则表达式模式对我不起作用）

将jQuery暴露给真实的Window对象和Webpack

Webpack 2加载、暴露和捆绑jQuery和Bootstrap

你应该能够找到使用此配置的其他文章/帖子，这是迄今为止唯一成功的工作方式。

另外值得注意的是，Bootstrap 4似乎也会内部加载或要求jQuery，所以如果您在导入/要求jQuery和插件之后包含导入或要求，则会重新初始化jQuery并导致您的插件失去作用域。

- Russell Shingleton

---

在经过数小时的奋斗后，这对我起了作用...每个 $ 都是一个不同的实例，因此插件没有添加到窗口的 $ 中。我还必须从 ProvidePlugin 中删除 jQuery/$ 配置。 - Whatcould