Question

我无法在require.js中使用跨域模块

我在othersite.com上有一个子模块

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

在othersite.com上使用该子模块的模块

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

现在在mainsite.com上我有一个试图在othersite.com上引用mainmodule的模块。

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

问题是，当require.js尝试加载submodule.js时，它失败了，因为它结合了mainmodule.js的URL。因此./submodule变为http://othersite.com:1234/js/submodule。然后require.js中的代码检查该URL，看到它有一个冒号，决定不添加.js并尝试加载http://othersite.com:1234/js/submodule当然没有.js没有存在意味着它无法加载submodule.js

我可以在mainmodule.js中将.js添加到./submodule但是这样做会打败整个点，即如果我使用require.js获得了大量文件没有.js后缀的推荐方式然后我尝试引用那些跨域我必须将otherdomain.com上的所有文件更改为非标准。

我做错了吗？有没有办法让require.js来处理这种情况？

Answer 1

添加配置路径为我修复了这个

在我的HTML中

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

然后在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);
});

Answer 2

我最近遇到了类似的挑战，发现Loading Modules from Packages非常有用。

示例：

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);
});

将输出：

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

See JSBin example

具有Require.js的跨域模块不为子模块添加“.js”

2 个答案: