在Webpacker中使用jQuery插件

Question

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

我正试图使用它的jQuery插件添加无限滚动，但我一直得到：

cars.js:20未捕获类型错误：$(…(.ininiteScroll不是函数

我的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'
})
)

有什么想法吗？这太烦我了？

Neil

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', () => {})回调中也是有意义的。