Electron(Node.js・javascript) で、ファイル分割時に変数を共有したい

Question

初めての質問になります。
javascriptは基本的なwebでしか触ったことがなく、こういったシステム的なものは初心者です。
調べながら見よう見まねでやってみたのですが、うまくいかないので質問させていただきました。
質問内容など、不足事項や間違い、追加情報が必要でしたらコメントをいただけますとすぐ追記・修正いたします。
どうぞよろしくお願いいたします。

Electronのmain.js(エントリーポイント)ファイルが膨大になったので、分割をしたいがその際に変数を共有したい

Electronで開発を行っている際に、ファイルの中身が膨大になった。
その際に、ファイルを分割しようと考えたが分割した先々で使いたい変数があり、これをそれぞれ分割先で共有させたい。
色々調べて見よう見まねで試してみたのですが、うまくいかず質問させていただきました。

作成しているもの

3個の画面をelectronで作成して、それぞれの画面で表示する内容をPOSTで投稿
GETで表示している値を取得というものを作っていました。

以下参考
・画面A(windowA) => カテゴリーA
・画面B(windowB) => カテゴリーB
・画面C(windowC) => カテゴリーC
のような位置付けとなっていて

1. POST (localhost:80/windowA)とパラメータ{ title: "hoge", name: "taro"}を送信
2. main.jsの中にあるexpressのexpress.post(/windowA, function().....）が実行される
3. 色々処理され、2の関数内で出力命令を画面に送る => windowA.webContents.sendを実行してレンダラー側に命令を送信
4. 受け取ったレンダラー側は情報を元に出力する

発生している問題・エラーメッセージ

現状、electronのエントリーポイントである、main.jsだけで全ての処理をまとめているが、下記のような構成にしたい。

- main.js (electronのメインファイル)
- express.js (expressの処理をまとめたい)
- preload.js (プリロードこれは現在既にある)

その際に、electronのウィンドウの情報が入っている変数がexpress.js側になくうまくいかない。

やりたいこと

1. Node.jsのモジュール、expressでAPIを受信して(外部からGETやPOSTされる)
2. GET、POSTの内容を受け取り処理を行いメインプロセスからレンダラープロセスにipc通信でその情報を送りたい

その際に、現状はmain.jsの中にwindowAの変数もあるのでipc通信ができているが、
ファイル分割をしたときに、呼び出し元にあるwindowAをどうしたら良いかがわからない

該当のソースコード

main.jsの中身(現状)

// main
import { app, ipcMain } from 'electron'
let windowA = new BrowserWindow({
  webPreferences: false,
  contextIsolation: true,
  preload: './preload.js'
})

//express
const express = require('express');
const ex = express();

// 参考サイトのコピー
const bodyParser = require('body-parser');
ex.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
next();
});
ex.use(bodyParser.urlencoded({ extended: true }));
ex.use(bodyParser.json());
ex.listen(80);

ex.post('/', function() {
  windowA.webContents.send('update', { title: "hoge", name: "taro"})
})

このソースを次のような感じに分割してファイルをすっきりしたい
express.js => 外部からのGET,POSTを受け付けて処理をしてレンダラープロセスにipc通信をしたい

//express
const express = require('express');
const ex = express();

// 参考サイトのコピー
const bodyParser = require('body-parser');
ex.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
next();
});
ex.use(bodyParser.urlencoded({ extended: true }));
ex.use(bodyParser.json());
ex.listen(80);

ex.post('/', function() {
  windowA.webContents.send('update', { title: "hoge", name: "taro"})
})

main.js => windowの作成などコアな部分に分けたい

//main
import { app, ipcMain } from 'electron'
let windowA = new BrowserWindow({
  webPreferences: false,
  contextIsolation: true,
  preload: './preload.js'
})

と分けたいが、windowAがmain.jsのなかにあるため、express.jsではipc通信が実行できませんでした。

お聞きしたい内容が、
１これは実現できないのか
２実現する方法があるのか、そもそもが間違っているのか、できるのか
３可能であれば何をするべきなのか

です。
何卒よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

Answer 1

module.exportsでエクスポートすることでmain.jsからrequireすることができるようになるのでそれで分割して使えるようになります。
そのときにmain.js側でmainWindowを渡してあげる(express(mainWindow);)ことで分割したファイルからも利用できるようになります

const { app, BrowserWindow } = require('electron');
const express = require('./express.js');

let mainWindow = new BrowserWindow({
  webPreferences: false,
  contextIsolation: true,
  preload: './preload.js'
})

express(mainWindow);

// express.js
const express = require('express');
const ex = express();

module.exports = (mainWindow) => {
  ex.get('/', function() {
    mainWindow.webContents.send('test', "test data")
  })
}

（JavaScriptのモジュールはいくつか方法がありますがelectronは基本nodeでCommon.jsなのでそれで書きました）

Comments

[nutti]

ご回答いただきましてありがとうございますm(_ _)m
`Common.js`こちら初めて知りました！ありがとうございます。

このような変数の渡し方があったのですね！とても勉強になります。
こちらルーティングがもしも複数個になる場合、
`module.exports`の中にどんどん増やしていくことは可能でしょうか？
また、書き方的に問題はないでしょうか？

```
module.exports = (mainWindow) => {
ex.get('/', function() {
mainWindow.webContents.send('test', "test data")
})
ex.get('/test1', function() {
mainWindow.webContents.send('test1', "test data1")
})
ex.post('/test2', function() {
mainWindow.webContents.send('test2', "test data2")
})
}
```
このような感じです!
勉強不足で申し訳ないのですが、ご教示いただければ幸いです。
何卒よろしくお願い致しますm(_ _)m

[mouse_484]

それで問題ないです！
でも大きいコードになってきたらそれぞれ機能ごとに分けるなどが必要かもしれません

[nutti]

お早いご回答いただきましてありがとうございます。

もしも大きいコードになり、機能毎に分けるとなった場合、どういった形になるのでしょうか？
express.jsの中身の詳細になってしまうのですが、、
これをそのまま複製するとなりますと、私が参考にしているサイトのコピペで申し訳ないのですが
```
const express = require('express');
const ex = express();
const bodyParser = require('body-parser');
ex.use(function (req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept'
);
next();
});
ex.use(bodyParser.urlencoded({ extended: true }));
ex.use(bodyParser.json());
ex.listen(80);
```
みたいなのがあってこれも複製するとまずいのかなと思いました。

そうだとしたらmodule.exportsの中身を別ファイルに移すことになると思ったのですが、
その場合、
expressA.jsファイルを用意して
module.exports = (mainWindow, ex) => {
ex.get('/moduleA', function() {
mainWindow.webContents.send('testModuleA', "test data") {
})
...
})
このようなものを用意する感じでしょうか？
ちょっと混乱してしましました。。。

express.js
const express = require('express');
const ex = express();
const moduleA = require('./moduleA.js') ???

module.exports = (mainWindow) => {
moduleA(mainWindow, ex)???
}
ご教示いただければ幸いです。。

[mouse_484]

その考え方であってます
moduleA,B,Cと増えていくと大変なのでfsなどを使って自動で読み込んで...とかをやることが多いと思います

[nutti]

なるほどですね！
まずこの問題をクリアして、次のステップでfsでの自動読み込みをやってみようと思います！
fsやってみて、また行き詰まってしまったら質問をあげさせていただきますm(_ _)m
この度はありがとうございました！