javascript Require.js 忽略 baseUrl
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12574255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Require.js ignoring baseUrl
提问by robdodson
OK this is driving me crazy so maybe someone can point me in the right direction...
好吧，这让我发疯了，所以也许有人可以指出我正确的方向......
I'm using the latest require.js combined with jquery as my module loader. I am using the data-mainattribute to point to a config file with a baseUrl. When I try to load a module the baseUrlis ignored and require is attempting to load from the same location as main.js.
我正在使用最新的 require.js 和 jquery 作为我的模块加载器。我正在使用该data-main属性指向带有baseUrl. 当我尝试加载一个模块时，该模块baseUrl被忽略并且 require 试图从与main.js.
/js/main.js
/js/main.js
require.config({
baseUrl: '/js/vendor/'
});
/path/to/page.html
/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>
Expected:
预期的：
Loads http://localhost:3000/js/vendor/bootstrap.jsand logs hello world!
负载http://localhost:3000/js/vendor/bootstrap.js和日志hello world!
Actual:
实际的：
Attempts to loadhttp://localhost:3000/js/bootstrap.js-- Fails :'(
尝试加载http://localhost:3000/js/bootstrap.js- 失败 :'(
I've tried using relative paths instead of absolute paths for both data-mainand srcin the require script tag. Nothing I do seems to trigger the baseUrl. Am I totally missing something in the docs?
我已经使用相对路径，而不是绝对路径，同时也试图data-main和src在需要的脚本。我所做的一切似乎都不会触发baseUrl. 我在文档中完全遗漏了什么吗？
回答by Simon Boudrias
the trouble is that require.js load script asynchronously (that's the point behind requirejs), so when you add the require()into a script tag right after you load require, this script execute before js/main.jsget loaded.
问题是 require.js 异步加载脚本（这就是 requirejs 背后的点），所以当你require()在加载 require 之后立即将 加入到脚本标签中时，这个脚本会在js/main.js加载之前执行。
The easy way would be to include all this in main.js, or create a new file to hold this piece and load it from js/main
简单的方法是将所有这些都包含在 中main.js，或者创建一个新文件来保存这部分并从 js/main 加载它
/js/main.js
/js/main.js
require.config({
baseUrl: '/js/vendor/'
});
require(['jquery', 'bootstrap'], function($) {
$(function() {
console.log('hello world!');
});
});
-- OR --
- 或者 -
/js/main.js
/js/main.js
require.config({
baseUrl: '/js/vendor/',
deps: ['../boostrap']
});
/js/boostrap.js
/js/boostrap.js
define(['jquery', 'bootstrap'], function($) {
$(function() {
console.log('hello world!');
});
});
note require()became a define()in the bootstrap file
noterequire()成为define()引导文件中的一个
回答by Pedro Vagner
Your config is being executed in async mode. When first requirecall is founded, your config is not yet applied. According to documentation:
您的配置正在以异步模式执行。require建立第一个呼叫时，您的配置尚未应用。根据文档：
when
require.jsloads it will inject another script tag (with async attribute) forscripts/main.js
当
require.js加载它会注入其他脚本标记（与异步属性）为scripts/main.js
So, just execute your config in sync mode:
因此，只需在同步模式下执行您的配置：
<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>
More info: Patterns for separating config from the main module
更多信息：从主模块中分离配置的模式
