使用 RequireJS 从 CDN 加载 CodeMirror

Question

我想制作一个在线 javascript 演示，并希望允许用户通过更改代码来更改演示行为。我的项目使用 RequireJS 取得了巨大成功，所以我决定坚持使用它。首先我尝试通过绝对 URL 路径加载编辑器：

require(
  [
        "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/codemirror.js",
        "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/mode/javascript/javascript.js",
        "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/continuecomment.js",
        "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/edit/matchbrackets.js",
        "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/addon/comment/comment.js"
  ],
  (CodeMirror)=>{
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
          lineNumbers: true,
          matchBrackets: true,
          continueComments: "Enter",
          extraKeys: {"Ctrl-Q": "toggleComment"}
        });
  }
);

Require JS 尝试加载此路径然后：http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/lib/codemirror 这显然是错误的，因为

1. 我没有要求它把/lib/放在我的路径前面，那它为什么要这样做呢？
2. .js 不见了。

在那次失败之后，我尝试配置 requireJS 并使用相对路径：

requirejs.config({
    paths: {
        codemirror: [
            "//cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4/"
        ]
    },
    waitSeconds: 20   
});

require(
  [
        "codemirror/codemirror",
        "codemirror/mode/javascript/javascript",
        "codemirror/addon/comment/continuecomment",
        "codemirror/addon/edit/matchbrackets",
        "codemirror/addon/comment/comment"
  ],
  (CodeMirror)=>{
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
          lineNumbers: true,
          matchBrackets: true,
          continueComments: "Enter",
          extraKeys: {"Ctrl-Q": "toggleComment"}
        });
  }
);

这一次，.js 存在，但路径仍然错误：http://cdnjs.cloudflare.com/ajax/libs/codemirror/5.13.4//lib/codemirror.js 注意双斜杠。

我没有要求 RequireJS 将随机的东西放在我指定的路径中，那它为什么这样做呢？我怎样才能做到这一点？

Answer 1

问题是codemirror 通常被打包成codemirror.js 文件在/lib 目录中，但是它在cdnjs 上托管的方式是它在根目录中。当您尝试加载一个加载项然后尝试加载 ../../lib/codemirror 时，您的问题就会出现 - 由于上述托管差异，该加载项不存在。

我让它与这样的东西一起工作：

requirejs.config({paths:{
    codemirror:'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2',
    'codemirror/lib':'https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.14.2'}
});
requirejs(["codemirror/lib/codemirror", "codemirror/addon/comment/continuecomment"],
function(CodeMirror) {
});