はじめに
Electron + React は、よい感じのものが用意されていますが、Electron + Angular はまだのようです。
少しノウハウたまったので書いてみます。
環境
- Electron 15.3.0
- Angular 12.2.0
ディレクトリ/ファイル構成
projectsディレクトリを作り、メインプロセスとレンダラープロセス(Angular)を分けました。
├── angular.json
├── karma.conf.js
├── package.json
├── package-lock.json
├── projects
│ ├── main # メインプロセス
│ │ ├── src
│ │ │ ├── main.ts
│ │ │ └── preload.ts
│ │ └── tsconfig.json # メインプロセス用tsconfig
│ ├── renderer # レンダラープロセス(Angular)
│ │ ├── src
│ │ ├── tsconfig.app.json
│ │ └── tsconfig.spec.json
│ └── types # 共通型定義
└── tsconfig.json
なぜこうしたか
メインプロセスとAngularのtsconfigは内容が異なる。
↓
別々のファイルにしたい。
↓
別々のファイルにしてtscへコンパイルオプションを渡すだけだと、vscodeが期待するtsconfigを見つけられない。
↓
tsconfigをディレクトリごとに配置
ちなみに
ngcliで新規に始めるときは、以下のようにしてアプリケーションをあとから作成するとよいです。
ng new --no-create-application MyApplication
cd MyApplication
ng generate application
メインプロセス用tsconfig
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"lib": ["ES2020", "DOM"],
"outDir": "../../dist",
"types": [],
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": ["../projects/types/**/*.d.ts", "src/**/*.ts"]
}
なぜこうしたか
メインプロセスとAngularのビルド結果が同じディレクトリに存在しないといけない。
↓
compilerOptions > outDir をAngularに合わせる。
tsc --build --watchで全部見るようにする。
↓
includeに全部書く。
package.jsonのscripts
"scripts": {
"start:el": "electron .",
"build:el": "tsc --build projects/main/tsconfig.json",
"watch:el": "tsc --build --watch projects/main/tsconfig.json",
"ng": "ng",
"start:ng": "ng serve",
"build:ng": "ng build",
"watch:ng": "ng build --watch --configuration development",
"test:ng": "ng test",
"build": "run-p build:*",
"watch": "run-p watch:*"
},
普段はnpm run watchでビルドしながら、適宜npm run start:elで起動させてます。
なぜこうしているのか
ホットリロードしたいなぁ。
↓
Electron自体にはそういったものは用意されていない。
↓
Webpackのdev serverみたいなもの作らないとだめか。。。つらいな。。。
↓
とりあえずビルドだけ自動にしておくか。。。
良い方法ないでしょうか？ 