在 Webpacker 中使用 jQuery 插件答案

【问题标题】：Use jQuery plugins in Webpacker在 Webpacker 中使用 jQuery 插件
【发布时间】：2020-07-03 10:43:39
【问题描述】：

我有一个带有 Webpacker 的 Rails 5 应用程序。

我正在尝试使用其 jQuery 插件添加无限滚动，但我不断收到：

cars.js:20 未捕获的类型错误： $(...).infiniteScroll 不是函数

我的 cars.js 文件如下所示：

import 'infinite-scroll'

$('.item').infiniteScroll({
      path: `.paginator--cars .next_page a`,
      append: `.car`,
      scrollThreshold: false,
      status: '.page-load-status',
      button: '.view-more-cars-button',
      history: 'push'
    });

我的 application.js 文件如下所示：

import 'jquery/src/jquery'
import '../js/cars'

我的 environment.js 文件如下所示：

const { environment } = require('@rails/webpacker')

module.exports = environment

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery'
  })
)

有什么想法吗？这让我很烦？

尼尔

【问题讨论】：

标签： jquery ruby-on-rails webpack infinite-scroll webpacker

【解决方案1】：

在这种情况下，您不需要 jQuery。

是的，当在浏览器中使用这个包时，它可以作为一个 jQuery 插件使用 (source)。

但是，当通过 Node.js 访问时，例如捆绑在 Webpack 中时，就不需要 jQuery；此软件包可作为 AMD 或 CommonJS 导出 (source) 使用。

快速浏览一下项目表明您在 cars.js 文件中的正确用法应该是：

import InfiniteScroll from 'infinite-scroll'

new InfiniteScroll('.item', {
  // options
})

我还假设将 new InifiteScroll(...) 表达式包装在 window.addEventListener('DOMContentLoaded', () => {}) 回调中也是有意义的。

【讨论】：