Question

我尝试使用Grunt和grunt-contrib-requirejs插件优化Backbone项目。项目具有以下结构：

- root/
   |- public/
   |   |- components/
   |   |- js/
   |   |    |- login/
   |   |    |    |- [dirs and files]
   |   |    |    |- main.js                   
   |   |- libs/
   |- gruntfile.js

在components和libs目录中，我安装了Bower库。 gruntfile.js有以下requirejs选项：

 requirejs: {
  compile: {
    options: {
      name: "main",
      baseUrl: "public/js/login/",
      mainConfigFile: "public/js/login/main.js",
      out: "public/js/app.build.js",
      findNestedDependencies: true,
    }
  }
},

在bower.json我有以下依赖关系：

"dependencies": {
  "jquery": "2.0.3",
  "jquery.cookie": "1.4.1",
  "underscore": "1.6.0",
  "backbone": "~1.1.2",
  "backbone-validation": "~0.9.1",
  "backbone-mediator": "~1.0.0",
  "backbone.subviews": "~0.7.3",
  "font-awesome": "~4.1.0",
  "bootstrap": "~3.2.0",
  "requirejs": "~2.1.14",
  "require-handlebars-plugin": "~0.8.1",
  "pace": "~0.5.5",
  "modernizr": "~2.8.3",
  "fastclick": "~1.0.2",
  "moment": "~2.7.0",
  "sweetalert": "~0.2.1"
}

最后，main.js有requirejs配置和主应用程序：

require.config({
  waitSeconds: 0,
  hbs: {
    templateExtension: 'html',
    disableI18n: true,
    disableHelpers: true
  },
  shim: {
    'jquery': {
      exports: '$'
    },
    'jqueryCookie': {
      deps: ['jquery']
    },
    'underscore': {
      exports: '_'
    },
    'backbone': {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },    
    'backboneREST' : {
      deps: ['backbone']
    },
    'backboneValidation' : {
      deps: ['backbone']
    },
    'handlebars': {
      deps: ['handlebars'],
      exports: 'Handlebars'
    }
  },
  paths: {
    jquery:              '../../components/jquery/jquery.min',
    jqueryCookie:        '../../components/jquery.cookie/jquery.cookie',
    underscore:          '../../components/underscore/underscore',
    backbone:            '../../components/backbone/backbone',
    backboneValidation:  '../../components/backbone-validation/src/backbone-validation',
    backboneSubviews:    '../../components/backbone.subviews/backbone.subviews',
    hbs:                 '../../components/require-handlebars-plugin/hbs',
    moment :             '../../components/moment/moment',
    modernizr:           '../../components/modernizr/modernizr',
    sweetAlert:          '../../components/sweetalert/lib/sweet-alert',
    client:              '../../libs/client',
    backboneREST:        '../../libs/backbone-rest',
    viewManager:         '../../libs/view-manager',
    errorManager:        '../../libs/error-manager',
  }
});

运行grunt任务会给我Done, without errors.消息，但是当我尝试在浏览器中加载生成的脚本时，它会给我Backbone is not defined错误。源地图说它落在Backbone.Validation。任何想法如何解决它？

Answer 1

前几天我犯了同样的错误。我修改了使用AMD版本（backbone-validation-amd-min.js）而不是标准版本。

Answer 2

由于Backbone.validation扩展了Backbone，你应该在你的垫片上导出Backbone，这样它就不会被覆盖。

'backboneValidation' : {
  deps: ['backbone'],
  exports: 'Backbone'
}

希望它能解决你的问题。

Backbone + r.js：未定义Backbone

2 个答案: