JavaScript拦截模块导入

ZoolWay

我有一个使用SystemJS的SPA(在Aurelia / TypeScript中,但这没关系)假设它的运行时间为http://spa:5000/app

有时,它会waterservice/external.js根据需要从外部URL加载JavaScript模块,例如按需加载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=other-class"的映射工作。但是,如果这种方法很好,那么如何在运行时动态添加映射呢?

也欢迎使用其他方法,例如通用的加载URL拦截。


更新资料

我试图像这样artem一样拦截SystemJS

var systemLoader = SystemJS;
var defaultNormalize = systemLoader.normalize;
systemLoader.normalize = function(name, parentName) {
    console.error("Intercepting", name, parentName);
    return defaultNormalize(name, parentName);
}

通常这不会改变任何东西,但是会产生一些控制台输出以查看发生了什么。不幸的是,这似乎确实改变了某些东西,因为我收到了一个错误Uncaught(承诺)TypeError:this.has不是inside中的函数system.js

然后,我尝试使用添加映射SystemJS.config({map: ...});令人惊讶的是,此函数是增量工作的,因此当我调用它时,它不会失去已经提供的映射。所以我可以做:

System.config({map: {
   "other-class": `http://otherhost:5002/fetchModule?moduleId=other-class.js`
}});

这不适用于相对路径(以.开头的路径..),但是如果我将共享路径放在根中,则可以解决

我仍然希望拦截负载以处理更多场景,但是目前我不知道has上述方法缺少哪个功能。

蒿甲醚

如何在运行时动态添加映射?

可以通过调用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);
    }
}

我不知道这是否适用于打字稿。另外,您还必须弄清楚在您的情况下到底将哪些名称传递给loader.normalize。

另外,如果您使用systemjs builder捆绑代码,则需要将该替代项添加到builder使用的加载器中(这又是另一回事了)。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TOP 榜单

热门标签

归档