javascript - 使用 Require.js 的跨域模块不为子模块添加 ".js"

标签 javascript requirejs

我无法让跨域模块在 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

我可以将 .js 添加到 mainmodule.js 中的 ./submodule 但这种做法破坏了整点,即如果我有一些大的集合文件以推荐的方式使用 require.js,没有 .js 后缀,然后我尝试引用那些跨域,我必须将 otherdomain.com 上的所有文件更改为非标准文件。

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

最佳答案

添加配置路径为我解决了这个问题

在我的 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);
});

关于javascript - 使用 Require.js 的跨域模块不为子模块添加 ".js",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24350691/

相关文章:

javascript - 商店状态更改后,React 应用程序不会重新渲染

JavaScript regex.test Firefox 与其他浏览器,不同的行为

javascript - 在 Chrome 扩展中使用 Require.JS 时如何让 chrome.runtime.onInstalled 触发

angularjs - AngularJS + RequireJS + domReady 未捕获的对象

javascript - 使用 requirejs 加载 : long, ByteBuffer 和 ProtoBuff

javascript - react-native-really-awesome-button onPress 在状态改变时不更新功能

javascript - 手工构建的 JSON 与 JSON.stringify

javascript - 如何使用 requireJs 缓存获取调用的结果?

javascript - RequireJS:如何在模块之间传递更新的数据

javascript - 如何对具有多个 $resource 调用的 Angular Controller 进行单元测试