使用 SystemJS，我如何在 CDN 库 (CodeMirror) 之间映射 URL？

Question

在我的项目中，我想使用SystemJS从cdnjs导入某个CodeMirror插件（xml-fold）。

但是，该插件通过 ../../lib/codemirror 引用了主要的 CodeMirror js。这被解析为 https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/lib/codemirror，这是不正确的 — 应该是 https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.js.

我试过 map 错误 URL 到正确的，但它似乎没有被拾取 — 见下文（浏览器控制台错误）：

SystemJS.config({
    map: { 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/lib/codemirror': 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/codemirror.js' }
});

// in actual project I import it through a dependency, but the problem is the same
SystemJS.import('https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/addon/fold/xml-fold.js');

<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.42/system.js"></script>

控制台错误：

system.js:4 GET https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/lib/codemirror 403

正确的映射方式是什么？

Answer 1

可以在 SystemJS 配置中为 codemirror 定义一个包，并使用 package-local map setting:

将 lib/codemirror 重新映射到 codemirror.js

SystemJS.config({
    map: {
        'codemirror': 'https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0'
    },
    packages: {
        'codemirror': {
            map: {'./lib/codemirror':  './codemirror.js'}
        }
    }
});

这个配置应该足以打开这个导入

SystemJS.import('codemirror/addon/fold/xml-fold');

进入这个url

https://cdnjs.cloudflare.com/ajax/libs/codemirror/4.2.0/addon/fold/xml-fold.js'

然后，从它引用的相对路径 ../../lib/codemirror 将保留在同一个包中，并将重新映射到 ./codemirror.js。（我检查了当前的 SystemJS 版本 - 0.19.42）

您可能还想添加

    main: 'codemirror.js'

到 codemirror 包配置，以便能够将 codemirror 本身导入为

 SystemJS.import('codemirror');

如果您需要这样做。

使用 SystemJS，我如何在 CDN 库 (CodeMirror) 之间映射 URL？

With SystemJS, how do I map URLs between CDN libraries (CodeMirror)?

cdn

codemirror

systemjs