在 Webpacker 中使用 jQuery 插件

Posted 2023-05-07

【中文标题】在 Webpacker 中使用 jQuery 插件

【英文标题】：Use jQuery plugins in Webpacker

【发布时间】：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'
  )
)

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

尼尔

【参考方案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', () => ) 回调中也是有意义的。