FreeStyleWiki

Electron

このエントリーをはてなブックマークに追加

[Javascript,NodeJS]

Electron

  Getting Started

どうせ型を使いたいのでTypeScriptも設定する

  試行錯誤

結局Reactを使うことにした

  Electronのあれやこれや

electronにおけるデベロッパーツールの開き方、ショートカットキーは、ctrl-shift-Iです。F12とかctrl-shift-F12とか押してみても反応ないから…。

メニューバーの実装

Electron側で雛形が用意されているので、それに設定を流せば実装できる。

アイコンの実装

electron-builderを使っていれば、package.jsonにアイコンを設定すればクロスプラットホームでアイコンを設定できる。

TypeScriptの導入

Typescript関連メモ にメモを記載している

すでに素のJavascriptでElectron+React環境を構築済みとする、その上で

  • 手順概要
    • jsファイルの拡張子を、全て「.ts」「.tsx」に変更
    • js側ですでに導入済みのライブラリについてtypescript版を使用する
    • React側をTypeScriptへの書き換え
    • ElectronをTypeScriptに対応させる
    • webpack導入
jsファイルの拡張子を、全て「.ts」「.tsx」に変更
割と気合
  • まず.tsに変更
$ git ls-files *.js | xargs rename 's/.js/.ts/'
  • React関連のファイルは.tsxに変換
$ find ./src -name App\*.ts -print | xargs rename 's/.ts/.tsx/'

...これをやるよりもcreate-react-appの実行時にtypescriptを指定すれば良かった…

js側ですでに導入済みのライブラリについてtypescript版を使用する
ここの手順が非常に参考になった Electron + React + TypeScript の開発環境構築
// typescript導入
$ npm install --save-dev typescript ts-node @types/node @types/react @types/react-dom @types/jest

// TypeScirpt 設定ファイル: tsconfig.json の作成
// 中身についてはリンク先参照、というか場合によって変えるべき
$ touch tsconfig.json

// 導入していなければElectronのホットリロードツールをインストール
$ npm install --save-dev electronmon

// その後、package.jsonに下記を追記
>>> ここから
"electronmon": {
    "patterns": ["dist/**/*"]
},
<<< ここまで
  • いったん休憩
    • うまくいっていればこの時点でreact-scripts buildが実行できるはず。tscは実行しなくてもいいようです。
    • 上記リンクで参考にするのはここまで、なぜならreact-scriptsで環境構築しているのでwebpackを直接いじる必要は今はないと思うから。 結局webpackをいじることにした
    • ここからは create-react-appでTypeScriptを使う方法 を参考にした。
React側をTypeScriptへの書き換え
拡張子を.tsに変えた中身をTypescriptに変える

(2)の型定義ファイルの作業は、既存のJavascriptライブラリが多いと中々大変かもしれない

tsconfig.jsonを用意して、electronのTypeScriptソースコードをtscでビルドするように変える。➔ TypeScript使用時の正しいディレクトリ構成

myapp/
  +-- build/         # トランスパイル後の .js ファイルを格納
  +-- src/           # .ts ファイルを格納
  +-- public/        # そのままパッケージングするもの
  |     +-- index.html
  +-- package.json   # Node.js 用設定ファイル
  +-- tsconfig.json  # TypeScript 用設定ファイル

↑ の現象があったので、結局 create-react-app を捨てて、webpackを導入する

webpack導入
再度参照する Electron + React + TypeScript の開発環境構築

上記の設定のキモはwebpack.config.tsである。

  • 手順をなぞって実行したこと
    • (1) バンドラー (webpack) の設定
      • `npm i -D webpack webpack-cli ts-loader css-loader html-webpack-plugin mini-css-extract-plugin`
    • (2) 設定ファイル webpack.config.ts の作成
      • リンク先を見てコピペ
      • index.htmlは今までpublic/index.htmlに配置していたが、webpack側でsrc/web/index.htmlを見ているのでファイルを移動した
      • レンダラープロセスでは'web'を使うべきだが、どうせ個人用アプリなので'electron-renderer' ターゲットを使用するように変えた
// レンダラープロセス向け設定
const renderer: Configuration = {
  ...common,
  // セキュリティ対策として 'electron-renderer' ターゲットは使用しない
-  target: 'web',
+  target: 'electron-renderer',

このように設定しないと、'fs'などのnodejsのネイティブ周りのモジュールがweb配下で動作しなくなる。

本当は'web'を使用するべきなので、恒久対応のためのリンクを記載: umamichi/Electron で nodeIntegration: false にする方法.md

    • (3) NPM スクリプトの設定
    • (4) NPM スクリプトの作成

(3),(4)は特にTODOなし。

  その他TODO

eslintの設定をTypeScriptプロジェクト用に作成する

これをやらない場合、create-react-appが内部で保持するeslint設定が動くことになる

// package.jsonに以下の記述が必要(templateで作成時にあるはず)
// これがないと、おかしな判定でReactのコードがビルドできなくなる。

+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },

electron-builder向けにエントリーポイントを設定する

セキュリティ対策として 'electron-renderer' ターゲットは使用しないほうがよい