如何使用 require.js 建立一个简单的 Backbone/Marionette 项目及其依赖项

Question

我已经阅读了很多这方面的内容，甚至还专门购买了一本书，专门介绍如何使用 require.js 设置木偶应用程序，并在 github 上关注了 this little how-to，这似乎很简单……但是对于某些人来说因为我似乎无法像开始一个空的 Marionette 项目那样简单地工作！

我的项目结构如下：

• 根目录
  • 型号
  • 观看次数
  • 库
    • babysitter.js
    • backbone.js
    • jquery.js
    • marionette.js
    • require.js
    • text.js
    • tpl.js
    • 下划线.js
    • wreqr.js
  • 收藏
  • 模板
  • index.html
  • main.js

这是我的 index.html：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="main" src="libs/require.js" type="text/javascript"></script>
</body>
</html>

还有我的 main.js：

require.config({
    paths:{
    jquery:"libs/jquery",
    underscore: "libs/underscore",
    backbone: "libs/backbone",
    text: "libs/text",
    tpl: "libs/tpl",
    marionette: 'libs/marionette',
    'backbone.wreqr' : 'libs/wreqr',
    'backbone.babysitter' : 'libs/babysitter'
    },
    shim:{
    underscore:{
        exports: "_"
    },
    backbone:{
        deps: ['underscore','jquery'],
        exports:'Backbone'
    }
    }
});

require(['marionette'],function(Marionette){


var Application = new Marionette.Application();

Application.on("initialize:after", function(){
    alert("Application has started!");
});

    Application.start();
});

我从他们的site 下载了 Marionette.js 的 AMD / RequireJS 版本

在浏览器中打开 index.html 时，我在控制台中看到一个错误“参考错误：未定义主干”（在 marionette.js 第 20 行）

我做错了什么？

Answer 1

Marionette 需要骨干，因此请将 marionette 添加到您的 shim 或您的 require 调用中，

shim:{
  marionette : ['backbone'],
  ...
}

或

require(['backbone', 'marionette'],function(Backbone, Marionette){

Answer 2

我认为您的 Backbone shim 可能设置不正确。在查看 Marionette 的 AMD 版本时，它依赖于“backbone”，而不是“Backbone”。

(function (root, factory) {
  if (typeof exports === 'object') {

  var underscore = require('underscore');
  var backbone = require('backbone');
  var wreqr = require('backbone.wreqr');
  var babysitter = require('backbone.babysitter');

Answer 3

我遇到了同样的问题，并且在这个问题上花了几个小时。 深挖骨干源代码1.1.2版本后发现的问题：

(function(root, factory) {

  // Set up Backbone appropriately for the environment. Start with AMD.
  if (typeof define === 'function' && define.amd) {
    define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
      // Export global even in AMD case in case this script is loaded with
      // others that may still expect a global Backbone.
      root.Backbone = factory(root, exports, _, $);
    });

  // Next for Node.js or CommonJS. jQuery may not be needed as a module.
  } else if (typeof exports !== 'undefined') {
    var _ = require('underscore');
    factory(root, exports, _);

  // Finally, as a browser global.
  } else {
    root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender ||   root.$));
  }

}(this, function(root, Backbone, _, $) {

去掉前两个条件，只留下第三个：

root.Backbone = factory(root, {}, root._, (root.jQuery || root.Zepto || root.ender ||   root.$));

我能够使用 rjs 优化我的代码

这是我的 requirejs 配置

require.config({
  baseUrl: "/static/src/scripts/js",
  paths: {
    jquery: 'vendors/jquery/jquery',
    underscore: 'vendors/underscore/underscore',
    backbone: 'vendors/backbone/backbone',
    marionette: 'vendors/backbone/backbone.marionette'
  },
  shim: {
    jquery: {
      exports: "jQuery"
    },
    underscore: {
      exports: "_"
    },
    backbone: {
      deps: ['underscore', 'jquery'],
      exports: 'Backbone'
    },
    marionette: {
      deps: ['backbone'],
      exports: 'Marionette'
    }
  }
});

希望对你有帮助