7

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

我使用最新的 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——失败:'(

我已经尝试在 require 脚本标记中使用相对路径而不是绝对路径data-main。src我所做的一切似乎都不会触发baseUrl. 我完全错过了文档中的某些内容吗？

4

2 回答 2

10

问题是 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!');
    });
});

noterequire()成为define()引导文件中的一个

于 2012-09-25T03:42:00.847 回答
7

您的配置正在异步模式下执行。当第一次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>

更多信息：将配置与主模块分离的模式

于 2015-02-02T12:57:16.667 回答