Webpack Encore &jQuery 插件:$(...).isotope 不是函数

问题描述

我正在使用 Yarn & 进行 Symfony5 项目jQuery.当我尝试使用 jQuery 插件isotope-layout"时出现错误；使用 Webpack Encore.

I'm working on a Symfony5 project, with Yarn & jQuery. I have an error when I try to use the jQuery plugin "isotope-layout" with Webpack Encore.

我尝试修复它好几个小时，但我可能没有以正确的方式去做.

I try to fix it for many hours but I might not be doing it the right way.

这是我的代码:

webpack.config.js

// Same error with or without "autoProvidejQuery"
Encore.autoProvidejQuery();

app.js

import 'jquery';
import 'popper.js';
import 'bootstrap';
import 'isotope-layout';

// start the Stimulus application
import './bootstrap';

custom.js

import jQuery from 'jquery';
import 'isotope-layout';

(function ($) {

    // Here is the error :
    $(...).isotope({...});

})(jQuery);

错误:

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

推荐答案

在使用 Isotope 时，您不必使用 jQuery.您可以使用 他们的 Webpack 文档 中的此示例:

You don't have to use jQuery when using Isotope. You can use this example from their Webpack documentation:

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

var iso = new Isotope( '.grid', {
  // options...
});

如果你想使用 jQuery，还有一个例子.安装:

There is also an example if you want to use jQuery. To install it:

npm install jquery
npm install jquery-bridget

然后:

var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Isotope = require('isotope-layout');
// make Isotope a jQuery plugin
jQueryBridget( 'isotope', Isotope, $ );
// now you can use $().isotope()
$('.grid').isotope({
  // options...
});

如果您使用的是现代 Javascript(并且您使用的是 Webpack，太棒了！)，您可能不需要 jQuery 在很多情况下.

If you're using modern Javascript (and you're using Webpack, great!), you might not need jQuery in many cases.

这篇关于Webpack Encore &jQuery 插件:$(...).isotope 不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！