4

完全に名前空間を持つ大規模な JavaScript アプリケーションがあります。require.js を使用してすべてをロードします (名前空間にライブが必要です)。次に、grunt を使用して、ライブラリを含む 100 +/- js ファイルを 1 つの縮小ファイルにコンパイルします。

私は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

ただし、これらのファイルは残りのファイルと一緒にコンパイルし、1 つの大きな縮小ファイルに入れる必要があります。

defineステートメントにテーマとモードを含める必要があると思いますが、試してみましたが、次のようなテーマオブジェクトを取得できます

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.jsにあるのか、それとも依存関係を正常にロードしていて、ロードできないのか、ロードされた方法にテーマ/モードパスをマップできないのかはわかりません.

config でテーマとモードのデフォルトを設定する方法はありますか? これは役立つかもしれません。誰かが私が欠けているものを知っていますか?

ありがとう。

4

1 に答える 1

0

私が持っていたace.jsビルドのフォルダ/ファイル構造はこのようなものでした

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

問題は、ace がマジック パス ('ace/theme/textmate') を予期していることですtextmate') すべてが縮小され、1 つのファイルに結合された後。

解決策は

  1. フォルダー/ファイル名の構造を変更して、予想どおりにします。というわけで /ace ディレクトリの下に mode というフォルダを作りました。mode-javascript.js の名前を javascript.js に変更し、新しいモード フォルダーに配置しました。

  2. このファイルをプロジェクトの define() 呼び出しに追加して、結合されたファイルに追加する必要があるとして選択されるようにしました。

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

  3. この後、ace_mode は何もしませんが、結合されたファイルに追加するために、requirjs に表示される必要がありました。

  4. この後、エースサイトが言うように魔法のひもを使用します

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

テーマについても同じことをしました。これまでのところ、それは機能しているようです。テーマ、構文の強調表示、コードの折りたたみなどが機能しています。

言及するもう1つのこと。私が述べたように、私たちのプロジェクトは名前空間 CXX であり、その名前空間に命が必要です。Ace はウィンドウまたは独自の名前空間 "ace" で require を探しますが、どちらも私が望んでいたものではなかったので、ace ファイルの下部にある、ace 自体を開始してそれをグローバル変数に割り当てようとするコードを削除しました。これを削除することで、私の define 呼び出しは、ほぼ適切な AMD モジュールのように ace をロードできます。多くの場合。

于 2015-04-03T17:39:45.550 に答える