Cross Domain Modules with Require.js not adding “.

问题:

I'm having trouble getting cross domain modules to work in require.js

I have a submodule on othersite.com

// othersite.com/js/submodule.js
define(function() {
   return { test: "Submodule here!" };
});

And a module on othersite.com that uses that submodule

// othersite.com/js/mainmodule.js
define(['./submodule'], function(SubModule) {
  return {
    test: "Main Module Here" + SubModule.test,
  };
});

Now on mainsite.com I have a module that tries to reference mainmodule on othersite.com.

// mainsite.com/js/app.js
requirejs([
    './somelocalmodule',
    './someotherlocalmodule',
    'http://othersite.com:1234/js/mainmodule.js',
  ], function(
    SomeLocalModule,
    SomeOtherLocalModule,
    MainModule) {
  console.log("test: " + MainModule.test);
});

The problem is when require.js tries to load submodule.js it fails because it combines the URL from mainmodule.js. So ./submodule becomes http://othersite.com:1234/js/submodule. Then the code in require.js checks that URL, sees it has a colon in it, decides not to add the .js and tries to load http://othersite.com:1234/js/submodule which of course without the .js does not exist which means it fails to load submodule.js

I can add .js to ./submodule in mainmodule.js but that kind of defeats the whole point which is that if I've got some large set of files using require.js in the recommended way without the .js suffixes and then I try to reference those cross domain I'd have to go change all the files on otherdomain.com to be non-standard.

Am I doing something wrong? Is there a way to get require.js to handle this case?

回答1:

Adding a config path fixed this for me

In my html

<script data-main="/js/app.js" src="/js/require.js"></script>
<script>
requirejs.config({
  paths: {
    othersite: '//othersite.com:1234',
  },
});
</script>

Then in mainsite.com/js/app.js

// mainsite.com/js/app.js
requirejs([
    './somelocalmodule',
    './someotherlocalmodule',
    'othersite/js/mainmodule.js',
  ], function(
    SomeLocalModule,
    SomeOtherLocalModule,
    MainModule) {
  console.log("test: " + MainModule.test);
});

回答2:

I came across similar challenge recently, found Loading Modules from Packages pretty usefull.

Example:

require.config({
    paths: {
        source1: 'https://cdnjs.cloudflare.com/ajax/libs/ractive/0.7.3',
        source2: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.0.0',
        source3: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.0.0',
        lodash: 'lodash.min',
        ractive: 'ractive.min',
        jquery: 'jquery.min'
    }
});

require.config({
    baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/'
});
require(['jquery'], function($) {
    print('jQuery version ' + $.fn.jquery);
});

require(['source1/ractive'], function(ractive) {
    console.debug('Ractive version ' + ractive.VERSION);
});

require(['source2/lodash'], function(_) {
    console.debug('Lodash version ' + _.VERSION);
});

require(['source3/lodash'], function(_) {
    console.debug('Lodash version ' + _.VERSION);
});

Will output:

jQuery version 2.0.0
Lodash version 3.0.0
Lodash version 2.0.0
Ractive version 0.7.3

See JSBin example