4

我们有一个完全命名空间的大型 javascript 应用程序。我们使用 require.js 加载所有内容（require 存在于命名空间中）然后我们使用 grunt 编译 100+/- js 文件，包括库到一个缩小文件。

我能够加载 ace.js

define(['ace/ace'], function (ace) {....

我能够创建一个编辑器，例如

var editor = ace.edit("editor");

但是我不确定要加载模式和主题。当我尝试类似..

editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

该请求尝试在 Web 根目录中查找文件。 

mysite.com/theme-monokai.js

但是，这些文件需要与其余文件一起编译并放入一个大的缩小文件中。

我想我需要在我的定义语句中包含主题和模式，但是我已经尝试过了，虽然我可以得到一个主题对象，例如

define(['ace/mode-javascript'], function (mode_js) {
console.log('mode loaded just fine')
console.log(mode_js)
...

但是，我没有任何运气尝试将对象传递给 setTheme 和 setMode 函数。

editor.setTheme(ace_theme);
editor.getSession().setMode(mode_js);

所有这一切的最终结果是我有一个 ace 编辑器在工作，但没有突出显示或主题。行编号工作，标签工作。我不确定这些东西是否在主 ace.js 中，或者它是否成功加载了它的依赖项，只是无法加载或无法将主题/模式路径映射到它们的加载方式。

有没有办法通过配置设置主题和模式默认值？这可能会有所帮助。有谁知道我错过了什么？

谢谢。

4

1 回答 1

0

我拥有的 ace.js 构建的文件夹/文件结构是这样的

/ace/ace.js
/ace/mode-javascript.js
/ace/theme-textmate.js
etc
etc

问题是 ace 需要魔法路径（'ace/theme/textmate'） 我需要的是 require 获得对文件（真实文件）的正确引用并拥有 ace 的正确引用（'ace/theme/ textmate') 一旦全部缩小并合并到一个文件中。

解决方案是

  1. 更改文件夹/文件名结构以模仿预期的内容。所以我在 /ace 目录下创建了一个名为 mode 的文件夹。我将 mode-javascript.js 重命名为 javascript.js 并将其放在新的 mode 文件夹中。

  2. 我将此文件添加到我的项目中的 define() 调用中，以便在需要添加到组合文件中时将其拾取。

    定义(['ace/ace', 'ace/mode/javascript'], function (ace, ace_mode) {....

  3. 在此之后我对 ace_mode 什么都不做，但我需要它被 requirjs 看到，以便将它添加到组合文件中。

  4. 在此之后，我就像 ace 网站所说的那样使用魔术字符串

    editor.getSession().setMode("ace/mode/javascript");

我为主题做了同样的事情。到目前为止，它看起来像它的工作。我有主题、语法突出显示、代码折叠等工作。

还要提一件事。正如我所说，我们的项目是名称空间 CXX，并且需要在该名称空间上存在。Ace 在窗口或它自己的命名空间“ace”上查找 require，这些都不是我想要的，所以我删除了 ace 文件底部的代码，该代码试图启动 ace 本身并将其分配给全局变量。通过删除它，我的定义调用能够像最合适的 AMD 模块一样加载 ace。大多。

于 2015-04-03T17:39:45.550 回答