Question

我正在尝试使用ace text editor。 Ace库ace.js似乎需要一个库require.js，我的html代码最初看起来像这样（省略了一些元素）：

<html><body>
  <script src="path/to/require.js">
  <script src="path/to/ace.js">
<body></html>

在文档加载后的某个时刻，ajax调用会将目标<div>插入到文本编辑器中，并将<script>节点插入到dom中，从而产生如下结构：

<html><body>
  <div id="foo">Hello World</div>
  <script>ace.edit('foo');</script>
  <script src="path/to/require.js">
  <script src="path/to/ace.js">
<body></html>

ajax函数仅在加载文档后才起作用，因此可以肯定的是，当部件<script>ace.edit('foo');</script>添加到dom时，文件require.js和ace.js已经存在加载。

当ajax完成后，JavaScript会引发此错误：

Uncaught Error: Mismatched anonymous define() module: function (require, exports, module) {
"use strict";

require("./lib/fixoldbrowsers");

var dom = require("./lib/dom");
var event = require("./lib/event");

var Editor = require("./editor").Edito...<omitted>...ch

来自require.js。我认为这个错误在require.js中很常见，我可以看到描述here，其中说：

如果您在HTML中手动编写脚本标记以使用匿名的define（）调用加载脚本，则可能会发生此错误。

但我不知道这意味着什么。我相信ace.js正在调用require，但ace.js未在<script>标记中直接编码，它位于文件中，通过<script src="...">调用。

我该如何做到这一点？

Answer 1

如果您使用pre-packaged ace.js，那么您不需要require.js，ace将使用它自己的define。如果您同时包含require.js和ace.js，则需要使用src-noconflict版本。

如果您使用的是require.js，那么您应该使用它来加载ace，而不是使用src标记的<script>属性（这是您的错误描述所讨论的内容））：

<script>
  var ace = require("./path/to/ace");
</script>

请勿在该路径中加入.js扩展名。

加载Ace会导致未捕获错误：匿名的define（）模块不匹配：

1 个答案: