require.js加载的模块对于引导和解析为空
require.js loaded modules are null for bootstrap and parse
我正在尝试使用RequireJS加载Parse JS(parse.com)和Bootstrap JS。 我无法让它与这些库一起使用,但其他库似乎工作正常(例如 backcore.js)。
我已确保将其包含在我的索引.html文件中:
<script data-main="js/main" src="js/libs/require/require.js"></script>
我的主.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();
});
最后我的应用程序.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
我看到我的用于解析/引导的 JS 文件正在由浏览器在 firebug 控制台选项卡中加载,但是 app.js 中的控制台.log语句返回 null。 当我打印路由器、_ 或 $ 时,它们不为空。
我在这里做错了什么?有什么指示吗?谢谢!
对于非 AMD 文件,您需要使用填充码配置。由于 parse-min 通过全局变量 'Parse' 导出它的功能,因此您需要在填充码配置中指定全局变量名称,如下所示。由于 bootstrap 不会导出特定的全局变量,因此您可以使用它的任何插件全局变量,例如 $.fn.popover。
有关垫片配置的更多信息,请阅读此内容: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: '$'
}
}
});
相关文章:
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 我可以获得相对于被点击元素的确切点击位置吗
- 如果使用 lodash 将属性存在于另一个对象中,则向对象添加属性
- Twitter 引导 - 点击时专注于模态内的文本区域
- 如何自定义类似于角度材质选项卡的 Angular Ui 引导选项卡
- 使用 jquery 专注于引导文本区域
- 专注于引导下拉列表
- 引导下拉列表永久显示 - 不特定于按钮单击
- 在Zend Framework中引导特定于模块的样式/脚本
- 引导程序/标记输入应用于所有表单字段/未正确显示
- 将引导程序下拉菜单相对于父菜单居中对齐
- 如何将JavaScript应用于引导程序btn组以选择/取消选择子按钮元素
- 使用数据属性的引导粘贴仅适用于页面重新加载
- 引导程序可折叠嵌套导航jquery应用于多个目标
- 将客户端引导到正确的页面以下载适用于其操作系统版本的IE
- jQuery文本大小调整插件只适用于第一张幻灯片的引导旋转木马
- 如何将引导模式调用应用于图像标签
- 适用于小型设备的Twitter引导响应导航栏标题
- 适用于移动设备的引导导航切换开关