Я пытаюсь установить пакеты npm в свой проект Laravel. Итак, я установил npm с помощью npm install
, а затем сделал npm install masonry-layout
, затем запустил npm run watch
, и он появился в моей папке node_modules.
Я пытался добавить require('masonry-layout');
к моему app.js и добавить window.anything = require('masonry-layout');
или window._ = require('masonry-layout');
к моему bootstrap.js - я называю это на мой взгляд следующим образом:
var $grid = $('.grid').imagesLoaded( function() {
$grid.masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true,
isResizable: true,
transitionDuration: '0.8s',
isAnimated: true
});
});
Мой app.js:
require('./bootstrap');
require('masonry-layout');
require('imagesloaded');
бутстрап.js:
window._ = require('lodash');
window.anything = require('masonry-layout');
window.anything = require('imagesloaded');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name = "csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
и да, я тоже установил imagesLoaded, но это тоже не работает. Если я включу cdn в свое представление, он будет работать так, как должен.
Что я делаю неправильно?
Я пробовал и до, и после требования jQuery. Что вы имеете в виду, показывая, где мне нужна каменная кладка? Я включаю app.js в свой файл представления, я думаю, это должно сработать? Или я тоже должен требовать макета кладки, на мой взгляд? Потому что тогда я мог бы просто добавить cdn, это не то, что я хочу.
Я хочу увидеть ваш файл js. Вы показываете только часть кода.
мои ресурсы/js/app.js включают только require('masonry-layout'); требуют('изображения загружены');
Не загружается загрузочный файл?
Я просто включаю свой app.js, который находится в /public/js/, например <script src = "{{ assets('js/app.js') }}"></script>
Я имею в виду, ты удалил require('./bootstrap');
из своего app.js
?
Нет, извините, он там.
Можете ли вы обновить свой вопрос, включив в него все содержимое ваших app.js
и bootstrap.js
, чтобы я мог найти проблему?
Я отредактировал свой вопрос.
Вы загружаете masonry-layout
и imagesLoaded
перед загрузкой jQuery
. Вы должны загрузить его после jQuery следующим образом:
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
window.Masonry = require('masonry-layout');
window.ImagesLoaded = require('imagesloaded');
require('bootstrap');
} catch (e) {}
Затем вы можете использовать его следующим образом:
new Masonry('.grid', {
// options
});
Кроме того, вы можете удалить их из своего app.js
.
Если вы действительно хотите иметь возможность использовать его как $('.grid').masonry(...)
, вам нужно установить jquery-bridget
:
npm install jquery-bridget
Затем сделайте это в своем загрузочном файле:
var $ = require('jquery');
var jQueryBridget = require('jquery-bridget');
var Masonry = require('masonry-layout');
// make Masonry a jQuery plugin
jQueryBridget( 'masonry', Masonry, $ );
// now you can use $().masonry()
$('.grid').masonry({
columnWidth: 80
});
Для получения дополнительной информации: https://masonry.desandro.com/extras.html#webpack
Теперь мой app.js просто включает require('./bootstrap'); и я сделал это, как вы показали, но это все еще не работает.
$grid.masonry не является функцией
Теперь он работает. Ну наконец то! Большое спасибо. Теперь, когда я хочу установить больше пакетов, мне просто нужно вызывать их внутри блока try?
@Jascusi Вы можете поместить их в любое место вашего файла boostrap. Но если ему нужен jQuery, поместите его в блок try, чтобы сначала загрузить jQuery.
Можете ли вы показать нам, где вам требуется
masonry-layout
? Кроме того, вы делаете это после загрузки jQuery?