如何使用require.js设置一个简单的骨干/木偶项目及其依赖项

How to set up a simple Backbone/Marionette project and their dependencies using require.js

本文关键字：项目 依赖 简单 设置 js require 何使用 一个      更新时间：2023-09-26

我一直在阅读很多这方面的内容，甚至买了一本专门关于使用 require.js 设置木偶应用程序的书，并在 github 上遵循了这个看起来很简单的小操作方法...... 然而，由于某种原因，我似乎无法像启动一个空的木偶项目这样简单的事情来工作！

我的项目结构如下：

  • 根目录
    • 模型
    • 视图
    • 库
      • 保姆.js
      • 骨干.js
      • jquery.js
      • 木偶.js
      • 要求.js
      • 文本.js
      • TPL.js
      • 下划线.js
      • 雷克尔.js
    • 收集
    • 模板
    • 索引.html
    • 主.js

这是我的索引.html：

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

而我的主要.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();
});

我从他们的网站下载了AMD/RequireJS版本的木偶.js

在浏览器中打开索引.html时，我在控制台中看到一个错误"引用错误：未定义主干"（在木偶上.js第 20 行）

我做错了什么？

木偶

需要骨干，所以要么将木偶添加到你的垫片或你的需要调用中，

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

或

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

我认为您的骨干垫片可能设置不正确。在查看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');

我遇到了同样的问题，并在这个问题上花费了几个小时。我在深入研究主干源代码版本 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 工作制作我的优化代码

这是我的需求js配置

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

希望对你有帮助

相关文章：