9

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

我正在使用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。有没有解决的办法？

4

1 回答 1

15

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

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

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

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

使用 Webpack 将 jQuery 公开给真实的 Window 对象

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

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

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

于 2018-05-21T14:35:56.267 回答