如何使用 ES6 模块导入 jQuery Masonry?
How do I import jQuery Masonry using ES6 modules?
我正在尝试使用这个 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
我认为我在这里的导入有问题。我做错了什么?
P.S。我正在使用 webpack
要使其正常工作,您需要使用 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
我正在尝试使用这个 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
我认为我在这里的导入有问题。我做错了什么?
P.S。我正在使用 webpack
要使其正常工作,您需要使用 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