Question

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

我正在使用最新的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 - 失败：'（

我已尝试在require脚本标记中为data-main和src使用相对路径而不是绝对路径。我所做的一切似乎都没有触发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时会注入另一个脚本标记（{1}}
的（具有异步属性）

因此，只需在同步模式下执行配置：

scripts/main.js

更多信息：Patterns for separating config from the main module

Require.js忽略baseUrl

2 个答案: