我是requirejs的新手,并试图让一个简单的结构正常工作(请参阅下文)。我尝试了多种方法,但没有成功。
我的目标是将requirejs配置设置为所有页面共享。
我的方法是让每个页面的script标记中的datamain指向与该页面对应的模块(page.php到js/page.js)。并从相应的模块中调用js/config.js作为第一依赖项。问题是路径键在模块中不起作用。
然后我读到,应该为配置设置脚本标记中的data-main。因此,我尝试将data-main指向js/config.js,而不是相应的页面代码。然后在页面中添加了第二个脚本标记。让第一脚本标记首先加载到配置中,然后第二脚本标记加载到对应页面的模块中。但与路径相同的问题,模块中的路径键不起作用。
问题是,当我在模块(['jquery'])中使用路径键(比如说'jquery')时,浏览器会在js文件夹中查找'jquery'键,而不是在js/config.js中指定的'libs/jquery'路径中。因此,在'js/'中添加了一个baseRrl,然后尝试'/js',然后也尝试'/j/',并在paths对象中的值前面尝试'/'。没有运气。
然后我试着指向jquery的谷歌CDN,但浏览器仍然找不到它。
因此,我将关键字从"jquery"更改为"ooo",浏览器仍然在js目录中查找ooo.js文件,而不是像配置路径中指定的那样查找CDN。
不确定我的文件结构是否错误,或者路径和/或baseUrl设置是否正确。我尝试了很多不同的方法,但都没有成功。请帮忙。不确定我是不是因为看得太久而错过了显而易见的东西而失明了。谢谢你的帮助。
文件结构:------------index.phpjs/-config.js-index.js-libs/--jquery.js--require.js------------
index.php:
<head>
<script data-main="js/config" src="js/libs/require.js"></script>
<script src="js/index.js"></script>
</head>
<body>
</body>
js/config.js:
require.config({
baseUrl: 'js/',
paths: {
'ooo': 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min',
//'ooo': 'libs/jquery',
'mod': 'modules/module1'
},
shim: {
'ooo': {
exports: '$'
}
}
});
js/index.js:
require( ['ooo'], function( $ ) {
$( document ).ready( function() {
alert( 'work!' );
});
});
开发工具中的网络选项卡:
GEThttp://localhost/requirejs/site2/js/ooo.js404(未找到)
您不能使用data-main
加载配置。data-main
所做的是告诉RequireJS启动加载它所指向的模块,但不能保证此操作何时完成。您得到的错误是因为js/index.js
中的require
在加载js/config
之前执行,因此它不使用您的配置。解决这个问题的一个非常简单的方法是使用一个模块,而不是现有的require
。因此js/index.js
将包含:
define(['ooo'], function( $ ) {
$( document ).ready( function() {
alert( 'work!' );
});
});
您的RequireJS配置可以有以下选项:
deps: [ 'index' ]
(是的,这只是index
,不是js/index
,也不是js/index.js
。)deps
选项告诉RequireJS立即开始加载一些模块。通过这种方式,js/index.js
中的代码在加载配置之前不会执行。