Webpack Encore & jQuery 插件：$(...).isotope 不是函数答案

【问题标题】：Webpack Encore & jQuery plugin : $(...).isotope is not a functionWebpack Encore & jQuery 插件：$(...).isotope 不是函数
【发布时间】：2021-07-24 13:34:40
【问题描述】：

我正在使用 Yarn 和 jQuery 开发 Symfony5 项目。当我尝试将 jQuery 插件“isotope-layout”与 Webpack Encore 一起使用时出现错误。

我尝试修复它好几个小时，但我可能做得不对。

这是我的代码：

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

【问题讨论】：

标签： javascript jquery yarnpkg jquery-isotope webpack-encore

【解决方案1】：

使用 Isotope 时不必使用 jQuery。你可以使用来自their Webpack documentation的这个例子：

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

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

如果你想使用 jQuery，还有一个例子。要安装它：

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，太好了！），you might not need jQuery 在很多情况下。

【讨论】：