require.js 加载的模块对于引导和解析是空的

Question

我正在尝试使用 RequireJS 加载 Parse JS (parse.com) 和 Bootstrap JS。我无法让它与这些库一起使用，但其他库似乎可以正常工作（例如backbone.js）。

我已确保将其包含在我的 index.html 文件中：

<script data-main="js/main" src="js/libs/require/require.js"></script>

我的 main.js 文件是这样的：

require.config({
  paths: {
    jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    bootstrap: 'libs/bootstrap/bootstrap-min',
    parse: 'libs/parse/parse-min',
    templates: '../templates'
  }

});

require([
  // Load our app module and pass it to our definition function
  'app',

], function(App){
  // The "app" dependency is passed in as "App"
  // Again, the other dependencies passed in are not "AMD" therefore don't pass a parameter to this function
  App.initialize();
});

最后我的 app.js 是：

// Filename: app.js
define([
  'jquery', 
  'underscore', 
  'parse',
  'bootstrap',
  'router' // Request router.js
], function($, _, Parse, Bootstrap, Router){
  var initialize = function(){
    *console.log(Parse);*
    // Pass in our Router module and call it's initialize function
    Router.initialize();
  };

  return { 
    initialize: initialize
  };
});

如果相关的是我的文件结构：

/* File Structure
├── js
│   ├── libs
│   │   ├── jquery
│   │   │   ├── jquery-min.js
│   │   ├── backbone
│   │   │   ├── backbone-min.js
│   │   └── underscore
│   │   │   ├── underscore-min.js
│   │   └── parse
│   │   │   ├── parse-min.js
│   │   └── bootstrap
│   │   │   ├── bootstrap-min.js
│   │   └── require
│   │   │   ├── require.js
│   ├── router.js
│   ├── app.js
│   ├── main.js  // Bootstrap
│   └── text.js  //Require.js plugin
└── index.html

我看到我的 parse/bootstrap JS 文件正在由浏览器在 firebug 控制台选项卡中加载，但是 app.js 中的 console.log 语句返回 null。当我打印 Router、_ 或 $ 时，它们不为空。

我在这里做错了什么？任何指针？谢谢！

Answer 1

对于非 AMD 文件，您需要使用 shim 配置。由于 parse-min 通过全局变量“Parse”导出其功能，因此您需要在 shim 配置中指定全局变量名称，如下所示。 由于 bootstrap 不会导出特定的全局变量，因此您可以使用它的任何插件全局变量，例如 $.fn.popover。

有关 shim 配置的更多信息，请阅读：http://requirejs.org/docs/api.html#config-shim

require.config({
  paths: {
    jquery: 'libs/jquery/jquery-min',
    underscore: 'libs/underscore/underscore-min',
    backbone: 'libs/backbone/backbone-min',
    bootstrap: 'libs/bootstrap/bootstrap-min',
    parse: 'libs/parse/parse-min',
    templates: '../templates'
  },
  shim: {
     parse: {
        exports: 'Parse',
        deps: ["jquery"]
     },
     bootstrap: {
        exports: '$.fn.popover',
        deps: ["jquery"]
     },
     backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
     }, 
     underscore: {
        exports: '_'
     }, 
     jquery: {
        exports: '$'
     }
  }

});