Используйте jQuery плагинов в Webpacker

Question

У меня есть приложение Rails 5 с Webpacker.

Я пытаюсь добавить бесконечную прокрутку, используя плагин jQuery, но продолжаю получать:

cars. js : 20 Uncaught TypeError: $ (...). InfiniteScroll не является функцией

Мои машины. 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'
    });

Мое приложение. js файл выглядит так:

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

Моя среда. 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 ( source ).

Но при доступе через Node.js, например, в комплекте в Webpack, jQuery не требуется; этот пакет делает себя доступным в виде экспорта AMD или Common JS ( source ).

Быстрый просмотр проекта указывает на правильное использование в вашем файле cars.js вместо этого:

import InfiniteScroll from 'infinite-scroll'

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

Я бы также предположил, что перенос выражения new InifiteScroll(...) в обратный вызов window.addEventListener('DOMContentLoaded', () => {}) также имеет смысл.