Arhn - архитектура программирования

Проблемы с jQuery Mobile, NPM и WebPack

Я провел некоторое время, изучая это и экспериментируя, и я уверен, что мог бы что-то взломать, чтобы оно заработало, но я предпочел бы понять, что я делаю неправильно.

Это хорошо известный что jQuery Mobile ненавидит красиво играть.

Тем не менее, куда бы я ни посмотрел, виновник один и тот же: у jQuery Mobile есть IIFE, который выглядит примерно так:

(function($, window){
  // code
})(jQuery, this)

При загрузке в Node (вместо браузера) this устанавливается неправильно и не удается связать модуль

Моя проблема отличается

Я установил jQuery Mobile следующим образом:

npm install --save-dev jquery-mobile

Затем я попытался включить его в свой JavaScript следующим образом:

window.$ = window.jQuery = require('jquery');
$.mobile = require('jquery-mobile');

Это вызвало ошибку:

Module not found: Error: Can't resolve 'load-grunt-config' in '/home/sbarnett/test/node_modules/jquery-mobile'

Примечание. Это не имеет ничего общего с тем, что $ не определено, или с чем-то неправильным в контексте this. Он буквально даже не пытался загрузить jquery-mobile, прежде чем искать Grunt... по какой-то причине?

Из того, что я могу сказать, изучая онлайн и просто имея общее представление о NPM и о том, как обычно размещаются модули, внутри ./node_modules/jquery-mobile должна быть папка «dist». Нет такой папки.

jQuery Мобильный каталог

Похоже, что я получил исходный код jQuery Mobile вместо скомпилированной версии. Я привык находить минимизированный файл javascript в папке «dist», а здесь такого нет.

Основываясь на том, что я вижу, и ошибках, которые я получаю, я попытался перейти в каталог jQuery Mobile и запустить grunt. Конечно, я знаю, что это плохая практика, потому что вы никогда не должны трогать свою папку node_modules. В любой момент времени rm -rf node_modules и npm install должны быть в безопасности, чтобы вернуть его.

Несмотря на наличие Gruntfile.js, я получил следующую ошибку:

Fatal error: Unable to find local grunt.

Итак, у меня есть несобранная версия jQuery Mobile, устанавливаемая NPM, и я не могу ее собрать.


Ответы:


1

Еще через день я вернулся к этому и, немного покопавшись, нашел проблему.

Когда я бежал:

npm install --save-dev jquery-mobile

NPM по умолчанию устанавливает 1.5.0-alpha.1

Эта версия все еще находится в альфа-версии, поэтому она не создается по умолчанию. Как выяснилось, я получал несобранный исходный код без папки dist.

Однако есть вторая проблема. Обновление моего package.json до:

// ...
  "jquery-mobile": "^1.4.0",
// ...

Я начал получать новые ошибки, но jQuery Mobile не поддерживает jQuery 3.0 (который устанавливается по умолчанию при запуске npm install --save-dev jquery). Поэтому мне также пришлось откатить мою версию jQuery в package.json.

Затем была третья проблема: общая проблема, с которой сталкивался каждый. Webpack и Browserify неправильно создают jQuery Mobile из-за плохо написанного IIFE. Это можно решить, используя jquery-mobile-babel-compatible или imports-loader, согласно этой записи StackOverflow.

В качестве альтернативы, если вы должны использовать jQuery 3 и хотите использовать альфа-версию jQuery Mobile 1.5, вы можете загрузить уменьшенную версию прямо с их веб-сайта и включить ее в папку javascript вашего приложения (вместо использования NPM для управления им).

12.06.2017
  • последняя стабильная версия: 1.4.5, совместимый jQuery 1.8 - 1.11 / 2.1 13.06.2017
  • @stevendesu, это довольно старая проблема, но я сталкиваюсь с теми же проблемами, что и вы. Я пытался использовать jquery-mobile: ^ 1.4.0 и jQuery 1.9. загрузчик импорта все еще не работает для меня. Можете ли вы помочь мне с этим? 17.10.2017
  • Опубликуйте новый вопрос на SO и включите свой package.json, затем свяжите меня с ним, и я посмотрю, смогу ли я воспроизвести и понять это. 17.10.2017
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..