Блог

Главная - Вопросы по программированию - Как правильно настроить jquery / Backbone с помощью browerify-shim

Как правильно настроить jquery / Backbone с помощью browerify-shim

#javascript #browserify #browserify-shim

#javascript #просмотр в браузере #browserify-shim

Вопрос:

Я пытаюсь создать автономную библиотеку JS, которая использует backbone / jquery. Вот пример репозитория, который представляет библиотеку, которую я пытаюсь создать.

У меня есть несколько целей для этой библиотеки:

  1. Не выставляйте НИКАКИХ глобальных значений (т. Е. оборачивайте все правильно, чтобы ничего не просачивалось)
  2. На вас не влияют никакие другие инструменты пакета, такие как RequireJS
    • Эта библиотека может быть загружена на любой другой веб-сайт, и я не хочу никаких конфликтов с JS, которые могут быть там (что находится вне моего контроля), таких как RequireJS

Итак, я понимаю, что я могу использовать browserify-shim для правильной настройки этих модулей, чтобы их можно было использовать, как и ожидалось, require в browserify. Я почти уверен, что shim должен отменить defines определение и require когда он оборачивает эти модули, что позволит достичь цели № 2. Цель № 1, надеюсь, будет достигнута просто с помощью browserify, как и ожидалось.

Кажется, я не могу заставить это работать, и я не уверен, что это просто мое непонимание browserify-shim. Кажется, у меня та же проблема, независимо от того, запускаю я browserify из командной строки или нет: browserify src/main.js -o build/main.js или с помощью сборки gulp.

По сути, это как будто browserify-shim даже не запущено. Если вы откроете index.html , вы можете видеть, что код requirejs, который я загрузил, определенно влияет на мою библиотеку, поскольку Backbone это просто пустой объект, после чего requirejs вылетает.

Вы можете увидеть мой package.json здесь, в репозитории, и он выглядит примерно так:

 {
...
"browserify-shim": {
    "./node_modules/jquery/dist/jquery.js": "$",
    "./node_modules/underscore.js": "_",
    "./node_modules/backbone.js": {
      "exports": "Backbone",
      "depends": [
        "./node_modules/underscore.js",
        "./node_modules/jquery/dist/jquery.js"
      ]
    }
  },
  "devDependencies": {
    "browserify": "^4.1.11",
    "browserify-shim": "^3.6.0",
    "gulp": "^3.8.1",
    "vinyl-source-stream": "^0.1.1"
  },
  "dependencies": {
    "backbone": "^1.1.2",
    "jquery": "^1.11.0",
    "underscore": "^1.6.0"
  }
}

Не уверен, чего мне здесь не хватает, но мне не повезло. Мне было интересно, может ли кто-нибудь помочь или хотя бы подтвердить, что то, чего я пытаюсь достичь, правильно и возможно browserify-shim .

Спасибо.

Редактировать

Чтобы проиллюстрировать, что это определенно не настройка модулей, я создал a build/main.js и a build/main-shimmed.js , которые точно такие же. The main.js Я работал без конфигурации shim, а у shimmed была вышеуказанная конфигурация. Я явно что-то здесь упускаю.

Ответ №1:

Browserify и Browserify-shim работают в этом случае, и ваш main.js вызывает правильное требование.

Проблема, с которой вы сталкиваетесь, заключается в том, что библиотеки, которые вы объединяете, также пытаются подключить конфигурацию в стиле AMD. Ваше «пересечение потоков», остерегайтесь Gozer.

Либо получите версии без загрузчиков конфигурации AMD, либо прокомментируйте их.

Комментарии:

1. Я только что добавил к вопросу. Я попробовал сборку с и без настройки, и они идентичны. Так что это определенно работает не так, как я хочу. Кроме того, но понимание browserify-shim заключается в том, что он фактически отменяет любые глобальные методы AMD (ie define ), поэтому должно быть хорошо использовать исходный файл, который я использую. Я действительно не понимаю мотивации в противном случае, если я могу использовать официальный src из npm.

Метки: