UnluckySerivelha
@UnluckySerivelha

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

Привет. Пытаюсь я подключить фильтр 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 подключается и подключается раньше, чем вызывается. Подскажите, пожалуйста, что я делаю не так? Спасибо.
  • Вопрос задан
  • 4525 просмотров
Решения вопроса 1
UnluckySerivelha
@UnluckySerivelha Автор вопроса
Путем экспериментов, всё заработало с таким подключением:
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"
        })
    ],
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега JavaScript
Jquery это динозавр, который вот так как ты хочешь использовать не получится. Нужны плагины.
https://webpack.js.org/plugins/provide-plugin/
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы