Lar*_*arz 3 javascript directory-structure project-structure relative-path requirejs
在给定项目结构的情况下,我无法理解如何为requirejs设置基本URL.
问题:并非所有html文件都在同一文件夹级别.脚本文件路径不断变化,具体取决于html页面的位置.
我尝试了什么:我已经搜索了API,但我只是不明白BaseURL应该是什么,以获得所有页面的正确路径.我已经测试了变体(../js/lib,/ js/lib /,我试过在main.js文件中没有包含它)但下面这个是唯一一个似乎在某些文件上产生正确结果的文件.
Main.js
requirejs.config({
baseUrl: '../js/lib',
paths: {
'jquery' : (document.addEventListener) ? ['vendor/jquery'] : ['vendor/jquery-1.9.1']
},
shim: {
'foundation/foundation': {
deps: ['jquery']
},
'foundation/foundation.alert': {
deps: ['jquery', 'foundation/foundation']
},
'vendor/slick.min': {
deps: [
'jquery',
'foundation',
'foundation/foundation.interchange'
],
exports: 'slick'
}
}
});
requirejs(['jquery'
, 'foundation/foundation'
]);
文件夹结构
Main Folder
?
? Some Folder
? ??? css
? ??? js
? ? ??? lib
? ? ? ??? foundation
? ? ? ? ??? foundation.alert.js
? ? ? ? ??? ...(foundation component js files)
? ? ? ? ??? foundation.js
? ? ? ??? vendor
? ? ? ? ??? jquery-1.9.1.js
? ? ? ? ??? jquery.js
? ? ? ??? foundation.min.js
? ? ? ??? slick.min.js
? ? ? ??? slickModule.js
? ? ??? main.js
? ? ??? require.js
? ??? html
? ? ??? components
? ? ? ??? slider.html [All scripts throw 404: Main Folder/Some Folder/html/js/lib/vendor/file.js ]
? ? ??? home.html [loads files as expected]
? ? ??? second.html [loads files as expected]
? ? ??? subfolder
? ? ? ??? random.html
? ??? extra folder
? ? ??? index.html [All scripts throw 404: Main Folder/Some Folder/extra folder/js/lib/vendor/file.js ]
? ?
? Another Folder
? ??? index.html [All scripts throw 404]
/html/components/slider.html
当我尝试以这种方式调用require时,slickModule的url是"Main Folder/Some Folder/html/js/lib/slickModule.js" - 注意'html'是在基本url之后添加的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script data-main="../../js/main" src="../../js/require.js"></script>
<script>
require(['../js/main'], function () {
require(['slickModule']);
});
</script>
</head>
<body>
...
</body>
</html>
有人可以帮我看看为什么会这样吗？
如果它甚至可能,我该怎么做才能使基本URL保持一致？
data-main属性将很困难(尽管不是不可能).paths当您包含模块或设置配置时,使用配置选项指向文件,而不是相对路径.首先,您可能会遇到data-main属性的一些问题,因为当用于多个入口点时,它的行为没有记录.正如它所说:
如果要
require()在HTML页面中进行调用,则最好不要使用data-main.data-main仅在页面只有一个主入口点data-main脚本时使用.对于要进行内联require()调用的页面,最好将这些内容嵌套在require()调用中以进行配置
其次,您正在使用该data-main属性加载您的配置,该配置定义了库的行为(换句话说,require/ requirejsfunction是自定义的),但是您使用该自定义工具再次加载配置:
<script data-main="../../js/main" src="../../js/require.js"></script>
<script>
require(['../js/main'], function () {
require(['slickModule']);
});
</script>
我几乎是肯定的,这引入了一些奇怪的行为.
paths以避免../三,你baseUrl会自动设置为任意加载它的HTML的位置,或该位置data-main脚本.您可以通过创建单个入口点(可能js/main)来使用此优势,然后定义路径配置选项以隐藏嵌套模块.
换句话说,您的应用程序永远不需要请求../(或其任何变体),因为任何嵌套都应该被路径条目隐藏,如:
"paths": {
"slickModule": "lib/slickModule"
}
我知道这个答案没有具体解决你的问题,但我很肯定其中一个问题 - 纠正后 - 将解决你的404问题.
| 归档时间： |
|
| 查看次数： |
7802 次 |
| 最近记录： |