Require.js ignoring baseUrl

问题:

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-main attribute to point to a config file with a baseUrl. When I try to load a module the baseUrl is ignored and require is attempting to load from the same location as 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> 

Expected:

Loads http://localhost:3000/js/vendor/bootstrap.js and logs hello world!

Actual:

Attempts to loadhttp://localhost:3000/js/bootstrap.js -- Fails :'(

I've tried using relative paths instead of absolute paths for both data-main and src in the require script tag. Nothing I do seems to trigger the baseUrl. Am I totally missing something in the docs?

回答1:

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.js get loaded.

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

/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!');     }); }); 

note require() became a define() in the bootstrap file

回答2:

Your config is being executed in async mode. When first require call is founded, your config is not yet applied. According to documentation:

when require.js loads it will inject another script tag (with async attribute) for 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

文章来源: Require.js ignoring baseUrl