加载 Ace 导致未捕获错误：不匹配的匿名定义（）模块：答案

【问题标题】：loading Ace causes Uncaught Error: Mismatched anonymous define() module:加载 Ace 导致未捕获错误：不匹配的匿名定义（）模块：
【发布时间】：2014-04-22 15:51:55
【问题描述】：

我正在尝试使用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="..."> 调用。

我怎样才能做到这一点？

【问题讨论】：

标签： javascript html requirejs ace-editor

【解决方案1】：

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

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

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

不要在该路径中包含 .js 扩展名。

【讨论】：