Question

我一直在阅读这篇文章，甚至还买了一本专门用于设置带有require.js的木偶应用程序的书，然后在github上点了this小方法，看起来非常简单......但是出于某种原因，我似乎无法像开始一个空的Marionette项目那样简单！

我的项目结构如下：

根目录
- 模型
- 视图
- 库
  - babysitter.js
  - Backbone.js的
  - 的jquery.js
  - marionette.js
  - require.js
  - text.js
  - tpl.js
  - underscore.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需要骨干，所以要么将木偶添加到你的垫片或要求召唤，

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

或

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

Answer 2

我认为您的Backbone垫片可能设置不正确。在看Marionette的AMD版本时，它依赖于'骨干'，而不是'骨干'。

(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 config

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'
    }
  }
});

希望有所帮助

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

3 个答案: