Просмотр отдельных libs.js и app.js приводит к тому, что Backbone не находит jQuery

Я хотел бы разделить свои библиотеки и код приложения на отдельные пакеты, чтобы я мог вставлять теги script для каждого отдельно, поскольку я не хочу, чтобы jQuery, Backbone и Underscore добавлялись в каждый из моих пакетов приложений.

Тем не менее, я пробовал несколько способов сделать это, и каждый раз я получаю сообщение об ошибке от Backbone:

Uncaught TypeError: Cannot read property 'ajax' of undefined

Я компилирую файл libs.js, который выглядит так:

global.$ = require('./jquery')
global._ = require('underscore')
global.Backbone = require('backbone')

Мне пришлось вручную загрузить jQuery и поместить его в мою папку /src/vendor, потому что по какой-то причине nom install jquery просто не работает.

У меня также есть простой код тестового приложения, который компилируется в app.js:

// User.js
var Backbone = require('backbone')
module.exports = User = Backbone.Model.extend({
  url : '/user'
});

// app.js
var User = require('./user');
var u = new User()

u.on('change', function(e){
  $('h1').append('Updated!')
});

u.fetch()

В моем HTML тег script для libs.js предшествует тегу app.js.

Может быть, я просто с самого начала подошел ко всему этому странным образом, потому что, похоже, не так много полезного в гугле, когда дело доходит до использования этих библиотек таким образом, поэтому любой вклад в это очень важен. оценил!


person nordhagen    schedule 17.01.2014    source источник
comment
Вы пробовали Backbone.$ = $ ?   -  person Ian Lim    schedule 17.01.2014


Ответы (2)


Я прочитал еще немного об экстернализации, алиасинге и шимминге в Browserify. Наконец-то мне удалось собрать рабочую конфигурацию Coffeescript gruntfile:

browserify:
  libs:
    src: ['src/vendor/jquery.js', 'underscore', 'backbone'],
    dest: 'public/js/libs.min.js'
    options:
      alias: ['backbone:', 'underscore:']
      shim:
        jQuery:
          path: 'src/vendor/jquery'
          exports: '$'
  home:
    src: ['src/js/main-home.js']
    dest: 'public/js/main-home.min.js'
    options:
      external: ['backbone', 'underscore']

В main-home.js теперь я могу сделать var Backbone = require('backbone'), а затем Backbone.$ = $ и все работает.

person nordhagen    schedule 21.01.2014
comment
Я использую очень похожую настройку, но я заметил, что Backbone включается как в пакет libs, так и в домашний пакет. Вы когда-нибудь сталкивались с той же проблемой? - person david_i_smith; 22.03.2015

Похоже, что jQuery загружен неправильно, эта ошибка, вероятно, связана с тем, что вы пытаетесь вызвать $.ajax, но $ не определено.

Может быть, другая причина, может быть, потому что вы пытаетесь загрузить jQuery перед Backbone. Попробуйте сделать наоборот, включив Backbone перед jQuery.

person Felix    schedule 17.01.2014
comment
Я бы подумал, что предпочтительнее загружать jQuery перед Backbone, но я попробовал ваше предложение. Это не помогло. Я думаю, что это может быть связано с некоторыми мерами по предотвращению утечки окон в браузере. - person nordhagen; 17.01.2014