在 Webpacker 中使用 jQuery 插件

Question

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

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

car.js:20 Uncaught TypeError: $(...).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'
  })
)

有任何想法吗？ 这让我很烦？

尼尔

Answer 1

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

是的，当在浏览器中使用这个包时，它可以作为一个 jQuery 插件（ 源代码）使用。

但是，当通过 Node.js 访问时，例如捆绑在 Webpack 中时，不需要 jQuery； 这个包本身可以作为 AMD 或 CommonJS 导出（ 源）。

快速浏览一下这个项目，你就会发现在你的cars.js文件中的正确用法是：

import InfiniteScroll from 'infinite-scroll'

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

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