我有一个使用 SystemJS 的 SPA(在 Aurelia/TypeScript 中,但这应该无关紧要)。假设它在 http://spa:5000/app
上运行。
它有时会根据需要从外部 URL 加载 JavaScript 模块,如 waterservice/external.js
http://otherhost:5002/fetchmodule?moduleId=waterservice.external.js
。我使用 SystemJS.import(url)
来执行此操作并且工作正常。
但是当这个外部模块想要使用一个简单的import { OtherClass } from './other-class';
导入另一个模块时,这(可理解地)是行不通的。当由 SPA 加载时,它会查看 http://spa:5000/app/other-class.js
。在这种情况下,我必须拦截路径/位置以将其重定向到 http://otherhost:5002/fetchmodule?moduleId=other-class.js
。
注意:waterservice/external.ts
的 Typescript 编译可以找到,因为 typescript 编译器可以轻松找到 ./other-class.ts
。显然我不能使用绝对 URL 进行导入。
我如何拦截我使用 SystemJS 导入的模块中的模块加载?
我已经测试过的一种方法是在 SystemJS 配置中添加一个映射。如果我像 import { OtherClass } from 'other-class';
一样导入它并添加像 "other-class": "http://otherhost:5002/fetchmodule?moduleId= 这样的映射其他类”
它有效。但如果这种方法很好,我如何在运行时动态添加映射?
也欢迎其他方法,例如通用加载 url 拦截。
更新
我试图按照 artem 的建议拦截 SystemJS,就像这样
var systemLoader = SystemJS;
var defaultNormalize = systemLoader.normalize;
systemLoader.normalize = function(name, parentName) {
console.error("Intercepting", name, parentName);
return defaultNormalize(name, parentName);
}
这通常不会改变任何东西,只会产生一些控制台输出以查看发生了什么。不幸的是,这似乎确实改变了一些东西,因为我在 system.js
中收到错误 Uncaught (in promise) TypeError: this.has is not a function。
然后我尝试使用 SystemJS.config({map: ...});
添加映射。令人惊讶的是,这个函数是增量工作的,所以当我调用它时,它不会丢失已经提供的映射。所以我可以这样做:
System.config({map: {
"other-class": `http://otherhost:5002/fetchModule?moduleId=other-class.js`
}});
这不适用于相对路径(那些以 .
或 ..
开头的路径)但是如果我将共享路径放在根 中就可以了.
我仍然更愿意拦截加载以便能够处理更多场景,但目前我不知道上述方法中缺少哪个 has
功能。
最佳答案
how can I add mapping dynamically at runtime?
AFAIK SystemJS 可以随时通过调用进行配置
SystemJS.config({ map: { additional-mappings-here ... }});
如果它对您不起作用,您可以覆盖 loader.normalize 并在其中添加您自己的从模块 ID 到 URL 的映射。沿着这些线的东西:
// assuming you have one global SystemJS instance
var loader = SystemJS;
var defaultNormalize = loader.normalize;
loader.normalize = function(name, parentName) {
if (parentName == 'your-external-module' && name == 'your-external-submodule') {
return Promise.resolve('your-submodule-url');
} else {
return defaultNormalize.call(loader, name, parentName);
}
}
我不知道这是否适用于 typescript 。此外,您还必须弄清楚在您的情况下传递给 loader.normalize 的名称到底是什么。
此外,如果您使用 systemjs builder 来捆绑您的代码,您将需要将该重写添加到 builder 使用的加载器中(这完全是另一回事)。
关于JavaScript拦截模块导入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38766824/