以前、monaco-editorなどをelectron環境とかで使ってサンプルコードを書きました。
sourcechord.hatenablog.comsourcechord.hatenablog.com
だいぶ時間がたって、使っているライブラリ類のバージョンが古くなっていたので、このサンプルのライブラリ類を更新しました。
それぞれ、以下のバージョンを使うように更新しています。
- monaco-editor v0.10.0
- electron v1.7.5
- typescript v2.5.2
monaco-editorのモジュール読み込み方法の変更
monaco-editorでは、このライブラリのモジュール読み込みには、ライブラリ内に含まれるloader.jsという関数を使用することになっています。
このloader.jsはAMD形式のモジュールローダーとなっており、このファイルを読み込むとグローバルのrequire関数がAMD形式のもので上書きされます。
このままだと、electron環境で使えるCommonJS形式のrequire関数が使えなくなるので、とても都合が悪いです。
monaco-editorの公式サンプルコードを見てみると、
electron環境で使う場合には、以下のようにloader.jsのrequire関数をamdRequireという別名にして扱うようにしていました。
https://github.com/Microsoft/monaco-editor-samples/blob/master/sample-electron/index.html
ということで、このコードを参考に以下のように書いてみました。
<script>// loader.jsを読み込むと、require関数がloader.js内のAMD方式のもので上書きされてしまう。// 通常のCommonJSスタイルのrequireが使えるように、別変数に退避しておくvar nodeRequire = global.require;</script><scriptsrc="node_modules/monaco-editor/min/vs/loader.js"></script><script>// loader.jsのrequire関数はamdRequireという名前にしておき、// 退避しておいた、CommonJSスタイルのrequire関数を元に戻すvar amdRequire = global.require; global.require = nodeRequire;：：略
実行結果
monaco-editorのバージョンを上げてみたら、こんな風にスクロールバー横にコードが縮小表示されるようになってました。
最近のVSCodeと同じ表示です。
monaco-editorも色々と便利になってますね。