Require.js忽略baseUrl

Question

好吧这让我发疯了所以也许有人可以指出我正确的方向......

我正在使用最新的require.js和jquery作为我的模块加载器.我使用该data-main属性指向一个带有的配置文件baseUrl.当我尝试加载模块时,baseUrl忽略并且require尝试从同一位置加载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- 失败:'(

我已经尝试使用相对路径而不是绝对路径两者data-main和srcrequire脚本标记.我没做什么似乎触发了baseUrl.我完全错过了文档中的内容吗？

Answer 1

问题是require.js异步加载脚本(这是requirejs背后的点),因此当您require()在加载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!');
    });
});

- 要么 -

/js/main.js

require.config({
    baseUrl: '/js/vendor/',
    deps: ['../boostrap']
});

/js/boostrap.js

define(['jquery', 'bootstrap'], function($) {
    $(function() {
        console.log('hello world!');
    });
});

note require()成为define()引导程序文件中的一个

Answer 2

您的配置正在异步模式下执行.require建立第一个呼叫时,您的配置尚未应用.根据文件:

当require.js加载它会注入其他脚本标记(与异步属性)为scripts/main.js

因此,只需在同步模式下执行配置:

<script src="/js/vendor/require-jquery.js"></script>
<script src="/js/main.js"></script>
<script>
require(['jquery', 'bootstrap'], function($) {
  $(function() {
    console.log('hello world!');
  });
});
</script>

更多信息:用于从主模块中分离配置的模式