从CDN加载RequireJS的CodeMirror

3

我希望制作一个在线的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在我指定的路径中添加随机内容,那么它为什么这样做呢?我该如何使其正常工作?
1个回答

3
问题在于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) {
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接