Как подключать jQuery плагины в Webpack?

Question

[Dymok]

Привет. Пытаюсь я подключить фильтр isotope к webpack'у. Установил его с помощью npm, пытаюсь импортировать и использовать:

spoiler

import $ from 'jquery';
import "isotope-layout";

var $grid = $(".our-design__gallery-items").isotope({
    itemSelector: '.our-design__gallery-item',
});

$(".our-design__gallery-filters").on("click", "li", function(){
    $grid.isotope({ filter: $(this).attr('data-filter') });
});

webpack.config

// webpack.config.js
var webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: './src/js/entry.js',
    output: {
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: [
                        ['env', {modules: false}],
                    ],
                },
            },{

            }
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
    ],
    devtool: 'source-map'
};

Но при этом в консоли выпадает ошибка:

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).isotope is not a function

Хотя в собранном бандле isotope подключается и подключается раньше, чем вызывается. Подскажите, пожалуйста, что я делаю не так? Спасибо.

Answer 1

[Dymok]

Путем экспериментов, всё заработало с таким подключением:

window.$ = window.jQuery = require('jquery');
window.isotope = require("isotope-layout/dist/isotope.pkgd");

var $grid = $(".our-design__gallery-items").isotope({
    itemSelector: '.our-design__gallery-item',
    transitionDuration: 500
});

webpack.config.js

plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ],

Answer 2

[profesor08]

Jquery это динозавр, который вот так как ты хочешь использовать не получится. Нужны плагины.
https://webpack.js.org/plugins/provide-plugin/

Comments

[Dymok]

А как это использовать? В примере только jQuery. Попробовал так, но ничего не изменилось

spoiler

plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        }),
        new webpack.ProvidePlugin({
            isotope: 'isotope-layout'
        }),
    ],

[profesor08]

Только jquery

[Dymok]

profesor08, так а я же пытаюсь isotope подключить

[profesor08]

плагин только для jquery. писать impoer jquery не надо. изотоп импортируй именно js файл isotope-layout/dist/isotope.pkgd.js.

[Dymok]

profesor08, пишу вот так:

import $ from 'jquery';
import "isotope-layout/dist/isotope.pkgd";

var $grid = $(".our-design__gallery-items").isotope({
    itemSelector: '.our-design__gallery-item',
});

$(".our-design__gallery-filters").on("click", "li", function(){
    $grid.isotope({ filter: $(this).attr('data-filter') });
});

В консоли такая ошибка:

[profesor08]

писать import jquery не надо

import $ from 'jquery';
Вот это не надо.

Везде где будет встречен $, плагин подставить объект jquery.

Я так понимаю описание к плагину вообще не читалось?

[Dymok]

profesor08, ок, делаю вот так вот:

spoiler

// import $ from 'jquery';
import "isotope-layout/dist/isotope.pkgd";

var $grid = $(".our-design__gallery-items").isotope({
    itemSelector: '.our-design__gallery-item',
});

Но та же ошибка:

spoiler

Uncaught TypeError: $(...).isotope is not a function

[profesor08]

не подключается jquery что-то делаешь не так. Сделать console.log($)

new webpack.ProvidePlugin({
        'window.jQuery'    : 'jquery',
        'window.$'         : 'jquery',
        jQuery           : 'jquery',
        $                : 'jquery'
      })

[Dymok]

profesor08, нет, с jQuery все в порядке:

> console.log($);
> ƒ (e,t){return new w.fn.init(e,t)}

[Сергей Коноваленко]

profesor08, добрый день, скажите, а почему изотопа нужно импортировать именно js файл: isotope-layout/dist/isotope.pkgd.js, не написать, например, просто require('isotope-layout'), такой вариант ведь, насколько знаю, тоже работает ?

[profesor08]

Сергей Коноваленко, если библиотека поддерживает модульность, то можно, иначе надо указывать путь до файла.

Answer 3

[Froggyweb]

isotope.metafizzy.co.s3-website-us-east-1.amazonaw...
Смотри в документации

Comments

[Dymok]

Пытался делать как указано в документации, но там не указано, как применять фильтр. Делал вот так:

spoiler

var Isotope = require('isotope-layout');

var $grid = new Isotope( '.our-design__gallery-items', {
    itemSelector: '.our-design__gallery-item',
});

$grid.isotope({filter: '.filter-design'});

И вот такая ошибка:

spoiler

$grid.isotope is not a function