monaco-editor + electronのサンプルコードを更新しました

以前、monaco-editorなどをelectron環境とかで使ってサンプルコードを書きました。

sourcechord.hatenablog.com sourcechord.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>
    <script src="node_modules/monaco-editor/min/vs/loader.js"></script>
    <script>
      // loader.jsのrequire関数はamdRequireという名前にしておき、
      // 退避しておいた、CommonJSスタイルのrequire関数を元に戻す
      var amdRequire = global.require;
      global.require = nodeRequire;
      ：
      ：
      略