具有Require.js的交叉域模块未添加“.js”对于子模块 [英] Cross Domain Modules with Require.js not adding ".js" for submodules

问题描述

我无法让跨域模块在require.js中工作

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

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

I have a submodule on othersite.com

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

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

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

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

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

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

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

我可以将 .js 添加到<$在mainmodule.js中c $ c> ./ submodule 但这种情况失败了，如果我在推荐的方式中使用require.js获得了一些大的文件而没有 .js 后缀然后我尝试引用那些跨域我必须将otherdomain.com上的所有文件更改为非标准。

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.

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

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

推荐答案

我最近遇到过类似的挑战，发现从软件包加载模块非常有用。

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

示例：

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

参见JSBin示例

这篇关于具有Require.js的交叉域模块未添加“.js”对于子模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！