如何使用 ES6 模块导入 jQuery Masonry？答案

【问题标题】：How do I import jQuery Masonry using ES6 modules?如何使用 ES6 模块导入 jQuery Masonry？
【发布时间】：2018-02-12 13:30:41
【问题描述】：

我正在尝试使用这个 npm 包https://www.npmjs.com/package/masonry-layout

按照我运行的安装说明：

npm install masonry-layout --save

然后在我的文件中，

import '../../../node_modules/masonry-layout/dist/masonry.pkgd.min.js'

$('.blog-posts-container').masonry({
    // options ...
    itemSelector: '.card-blog',
    columnWidth: 200
})

我正在尝试在我的文件中导入包并运行它，但我收到此错误：

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

我认为我的导入有问题。我做错了什么？

附：我正在使用 webpack

【问题讨论】：

您使用任何打包程序吗？ Webpack，汇总？请在问题中添加适当的标签，这会很有帮助。
@RishatMuhametshin 使用 Webpack
Managing jQuery plugin dependency in webpack的可能重复

标签： javascript jquery npm npm-install jquery-masonry

【解决方案1】：

要让它工作，你需要使用jQueryBridget，它使jQuery插件脱离了构造函数。

这是一个使用imagesloaded plugin 确保在图像加载后初始化砌体的示例。

npm i -S jQueryBridget imagesLoaded

然后在app.js（或其他）：

import $ from 'jquery';
import Masonry from 'masonry-layout';
import jQueryBridget from 'jquery-bridget';
import imagesLoaded from 'imagesloaded';

jQueryBridget('masonry', Masonry, $);
jQueryBridget( 'imagesLoaded', imagesLoaded, $ );

const $container = $('#masonry-grid');

$container.imagesLoaded(() => {
  $container.masonry({
    columnWidth: 200,
    itemSelector: '.item',
  });
});

以上内容应该捆绑（使用Webpack）到bundle.js。

为了完整起见，这里是 HTML：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Masonry Madness</title>
</head>
<body>
  <div id="masonry-grid">
    <div class="item">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940833.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/907/90775901.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/294/29489326.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/100/100656385.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/889/88940839.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111773987.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/146/146371016.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/103/10313578.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/554/55473337.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/537/53727259.jpg">
    </div>
    <div class="item ">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/111/111246515.jpg">
    </div>
    <div class="item">
      <img src="https://s3.amazonaws.com/clarifai-img/demo/461/46176355.jpg">
    </div>
  </div>

  <script src="bundle.js"></script>
</body>
</html>

HTH

【讨论】：