Javascript Require JS正在忽略我的配置
我有一个非常简单的脚本目录结构:Javascript Require JS正在忽略我的配置,javascript,requirejs,Javascript,Requirejs,我有一个非常简单的脚本目录结构: /js/ <-- located in site root libs/ jquery-1.10.1.min.js knockout-2.2.1.js knockout.mapping.js models/ model-one.js model-two.js ... require.js config.js HTML
/js/ <-- located in site root
libs/
jquery-1.10.1.min.js
knockout-2.2.1.js
knockout.mapping.js
models/
model-one.js
model-two.js
...
require.js
config.js
HTML中的某处:
require(["jquery", "knockout", "komapping"], function($, ko, mapping){
// ...
});
所以问题是RequireJS完全忽略了配置文件中定义的baseUrl
和路径。下面的代码中需要的每个模块都有404错误。我在浏览器控制台中看到,RequireJS尝试从/js/
加载这些模块,而不进行任何路径转换:
404: http://localhost/js/jquery.js
404: http://localhost/js/knockout.js
404: http://localhost/js/komapping.js
但是,在页面加载并显示错误后,我在控制台中键入并
> require.toUrl("jquery")
"/js/libs/jquery-1.10.1.min"
为什么会这样?如何解决这个问题
这是我第一次使用RequireJS,所以我觉得我跳过了一些非常简单和明显的东西。请帮忙
更新
刚刚发现这个问题:
这绝对是我的事。我在我的网络面板中看到,config.js
在require(…)
启动自己的依赖项加载之前没有完全加载
但是我不想将我的require(…)
放在config中,因为它对于调用它的页面来说非常具体。在以前的任何示例中,我从未注意到异步性存在这样的问题。这些例子的作者是如何让它们继续工作的?已解决
问题在于,在datamain
属性中定义的配置文件与其他依赖项一样是异步加载的。所以我的config.js
在调用require
之前从未被完全加载和执行过
官方RequireJS API中描述了该解决方案:
。。。此外,您可以在require.js加载之前将config对象定义为全局变量require,并自动应用这些值
因此,我刚刚更改了我的config.js
,以使用正确的配置定义全局require
哈希:
var require = {
baseUrl: "/js/libs",
paths: {
"jquery": "jquery-1.10.1.min",
"knockout": "knockout-2.2.1",
"komapping": "knockout.mapping"
}
};
并在require.js
之前包含它:
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/require.js"></script>
这种方法允许控制脚本的执行顺序,因此config.js
总是在下次require
调用之前加载
现在一切正常。修复了该问题
我的配置是异步加载的,因此在调用require语句之前没有设置配置路径
根据RequireJS文档,我在require.js调用之前向配置中添加了一个脚本调用。并删除了数据主属性
var require = {
baseUrl: '/js',
paths: {
'jquery': 'vendor/jquery/jquery-2.0.3.min',
'picker': 'vendor/pickadate/picker.min',
'pickadate': 'vendor/pickadate/picker.date.min'
},
shim: {
'jquery': {
exports: '$'
},
'picker': ['jquery'],
'pickadate': {
deps: ['jquery', 'picker'],
exports: 'DatePicker'
}
}
}
现在一切正常您是否尝试删除第一个尾随斜杠“js/libs/”?@paka刚刚尝试过。没有更改。它是否适用于绝对路径?是的,它适用于绝对路径(除了ko映射
,因为它取决于knockout
)。因此,您必须找出从脚本(配置)到libs的正确路径。。。它会说require没有定义thanks,这是可行的,但它在另一个脚本中引起了一个小问题:require不是一个函数。(认为这与变量范围有关)为了避免这种情况,可以使用requirejs={…}而不是require={…}。似乎做了同样的事情,但没有问题。此外,您可能希望在模板中创建一个脚本标记,以便在config.js中的config include和set“baseUrl:webroot”之前定义一个变量,例如var webroot='',以防止seo URL引起的路由问题。此解决方案很难看,您正在分配一个全局变量,该变量将在库声明后被覆盖。只需将配置放在单独的脚本标记中,就在require.js之后。更多信息:非常感谢-我遇到了各种各样的问题,脚本加载不正确,无法找到答案。谢谢!真的帮了我的忙。
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/require.js"></script>
var require = {
baseUrl: '/js',
paths: {
'jquery': 'vendor/jquery/jquery-2.0.3.min',
'picker': 'vendor/pickadate/picker.min',
'pickadate': 'vendor/pickadate/picker.date.min'
},
shim: {
'jquery': {
exports: '$'
},
'picker': ['jquery'],
'pickadate': {
deps: ['jquery', 'picker'],
exports: 'DatePicker'
}
}
}