Electron で ES Modules を使う。

概要

Node.jsがES Modules(以下ESM）をサポートするようになったので、ElectronのメインプロセスでもESMを使いたいというニーズが当然のように出てきました。
そこでElectronのクイックスタートガイドを改変して、メインプロセス(main.js) でESMをインポートできるようにやってみましたのでその方法を紹介します。ただし今のところ少し問題があるので、補足2を読んだ上で実際に使うかどうかは判定してください。

準備

Electron Quick Startをクローンしてそのフォルダに入ります。

$ git clonen https://github.com/electron/electron-quick-start
$ cd electron-quick-start

手順

package.json を変更します。

package.json.diff

-  "main": "main.js",
+  "main": "main.cjs",
+  "type": "module",
+  "build": {
+    "asar": false
+  },

• スタートアップファイルを main.js -> main.cjs に変更します。

• "type": "module"を指定することで拡張子が js のファイルのモジュールシステムがES Modulesになります。

• 拡張子がcjsのファイルはこの指定に関係なくモジュールシステムがCommonJSになります。

• buildオプションでasarをfalseにします。これをやらないとelectron-builderでbuildしたモジュールがどうもファイルを見つけてくれないようです。（補足2を参照）

main.cjs というファイルを以下の内容で作ります。

main.cjs

global.require = require
global.__dirname = __dirname
import( './main.js' )

CommonJSの中でも[Dynamic Importは使える] (https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import)ので、これを使って`main.js`を読み込みます。

require, __dirnameはモジュールの中では消えてしまうので、globalに退避します。他にも消えるものがありますので必要な場合は同様にglobalにセットしてやればいいでしょう。

テスト

モジュールのサンプルを作ります。

sample.js

export const X = { A: 'B' }
export default { 1: 2 }

main.js でこのサンプルを読み込んで表示してみます。

main.js.diff

+ import D, { X } from './sample.js'
+ console.log( D, X )

実行

$ npm start

> electron-quick-start@1.0.0 start
> electron .

{ '1': 2 } { A: 'B' }

補足1

requireをグローバルに退避しないで、以下のようにESMの中で新しく作るやり方もあります。

import { createRequire } from 'module'
const require = createRequire( import.meta.url )

補足2

asarをfalseにしてbuildするとソースが丸見えになってしまいます。そのせいか以下のような推奨されていませんというメッセージが表示されます。
そのうちasarがデフォルトのtrueでもビルドしたモジュールがちゃんと動くようになってくれることを祈ります。

  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack files that must be externally available