WedX - журнал о программировании и компьютерных науках

Isotope.js и Webpack — возможно?

Я пытаюсь заставить мою настройку веб-пакета работать с isotope.js. Проблема, с которой я сталкиваюсь, заключается в том, что когда веб-пакет идет на компиляцию, он не может найти окно и выдает ошибку.

Пробовал следующее:

В myfile.js

import Isotope from 'isotope-layout';

webpack.config.js

loaders: [{ test: /isotope-layout/, loader: 'imports?this=>window!isotope-layout' }

но выдает следующую ошибку:

/ipb/node_modules/lodash/index.js" as it exceeds the max of "100KB".

/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:206
                    throw e;
                          ^
ReferenceError: window is not defined
    at Object.<anonymous> (/Users/user/Development/ipb/node_modules/isotope-layout/js/isotope.js:60:4)
    at Module._compile (module.js:456:26)
    at Object.Module._extensions..js (module.js:474:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:312:12)
    at Module.require (module.js:364:17)
    at require (module.js:380:17)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:193:17)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:186:21)
    at DependenciesBlock.loadPitch (/Users/user/Development/ipb/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:223:61)

Что я делаю неправильно здесь, или что было бы лучшим способом добиться этого?

webpack node.js javascript jquery-isotope
26.06.2015

Ответы:


1

Пытаться:

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...});
01.05.2020

2

Попробуйте что-нибудь вместе

var Isotope = require('imports?$=jquery!isotope-layout/dist/isotope.pkgd');

Кажется, это работает для меня. Обратите внимание, что это решение зависит от imports-loader;

Скорее всего, вы можете добавить это в свою конфигурацию Webpack, а не решать ее во встроенном режиме. Просто надеюсь, что этот ответ укажет вам правильное направление.

28.06.2015
  • Спасибо. Я попробую. Я не использую jquery в этом проекте, но я предполагаю, что могу просто удалить часть оператора импорта, которая ссылается на него, правильно? 28.06.2015
  • @afithings Проблема в том, что Isotope полагается на jQuery. Вероятно, вы можете ввести его другими способами. Это просто то, что сработало для меня на моем быстром тесте. 28.06.2015
  • Я не верю, что для этого требуется jquery. На его сайте показаны примеры реализации jquery и vanilla js. 28.06.2015
  • Ах, хороший момент! Да, я думаю, в таком случае вы можете заставить его работать без jQuery. :) 28.06.2015
  • К сожалению, это не сработало. Когда я пытаюсь применить его к моему файлу webpack.config, он выдает ошибку, говоря var isotope-layout/dist/isotope.pkgd.js = require("isotope-layout/dist/isotope.pkgd.js");, что явно неверно. Я называю это в своем коде как import Isotope from 'isotope-layout'. Моя запись в webpack.config выглядит так: { test: /isotope-layout/, loader: 'imports?isotopelayout/dist/isotope.pkgd.js' }, 28.06.2015
    • Новые материалы
    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..
    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..
    Лицензии с открытым исходным кодом: руководство для разработчиков и создателей
    В динамичном мире разработки программного обеспечения открытый исходный код стал мощной парадигмой, способствующей сотрудничеству, инновациям и прогрессу, движимому сообществом. В основе..
    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..
    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..
    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..
    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..
    Для любых предложений по сайту: [email protected]