Require.js忽略baseUrl
好的,这快把我逼疯了,也许有人能给我指个正确的方向…
我将使用最新的require.js和jQuery组合作为我的模块加载器。我使用data-main
属性指向带有baseUrl
的配置文件。当我尝试加载模块时,baseUrl
被忽略,并且需要尝试从与main.js
相同的位置加载。
/js/main.js
require.config({
baseUrl: '/js/vendor/'
});
/path/to/page.html
<script data-main="/js/main" src="/js/vendor/require-jquery.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
$(function() {
console.log('hello world!');
});
});
</script>
预期:
加载http://localhost:3000/js/vendor/bootstrap.js
和日志hello world!
实际:
尝试加载http://localhost:3000/js/bootstrap.js
--失败:‘(
我尝试在Required script标记中对data-main
和src
使用相对路径,而不是绝对路径。我做的任何事情似乎都不会触发baseUrl
。我是否完全遗漏了文档中的某些内容?
解决方案
问题在于Required.js异步加载脚本(这是Requirejs后面的点),因此当您在加载Required之后立即将require()
添加到脚本标记中时,此脚本将在js/main.js
加载之前执行。
最简单的方法是将所有这些都包含在main.js
中,或者创建一个新文件来保存此片段并从js/main加载它
/js/main.js
require.config({
baseUrl: '/js/vendor/'
});
require(['jquery', 'bootstrap'], function($) {
$(function() {
console.log('hello world!');
});
});
--OR--
/js/main.js
require.config({
baseUrl: '/js/vendor/',
deps: ['../boostrap']
});
/js/boostrap.js
define(['jquery', 'bootstrap'], function($) {
$(function() {
console.log('hello world!');
});
});
备注require()
成为引导文件中的define()
相关文章