electron-webpackでts+reactプロジェクトを作成する
table:versions
electron-webpack 2.8.2
electron 10.0.0
基礎的な部分はこのようになっている
また、macOS High Sierra バージョン10.13.6上で動作を確認している
electron-webpack導入
code:console.sh
echo node_modules > .gitignore
yarn add electron-webpack electron webpack --dev
yarn add source-map-support
.gitignoreにnode_moduleを追加。
あとは https://webpack.electron.build/development の通りにelectron-webpack, electron, webpack, source-map-supportを導入する。
source-map-supportは--devが付かないことに注意。
パッケージ化する際に必要となっている。
electron-webpack-quick-startのページを表示するアプリが起動する
code:console.sh
echo dist >> .gitignore
.gitignoreにdistを追加
code:package.json
{
"scripts": {
"dev": "electron-webpack dev"
},
~~~~~~
}
package.jsonにscriptsを追加
electron-webpack-quick-startの2020/08/04時点最新 の src/main/index.js と src/renderer/index.js を同様のディレクトリ構造でコピー
これらの作業もhttps://webpack.electron.build/development の通り
この時点で yarn dev コマンドを実行すると、electronアプリが起動する
Typescriptを導入
code:console.sh
yarn add typescript electron-webpack-ts --dev
yarnでtypescriptとelectron-webpack-tsを導入
code:tsconfig.json
{
"extends": "./node_modules/electron-webpack/tsconfig-base.json"
}
tsconfig.jsonをrootに作成し、electron-webpackからextendsする設定を記述
ここまでは https://webpack.electron.build/add-ons#typescript の通り
code:console.sh
yarn add @types/node@12 --dev
electron 9系はnode12上で動くため、型情報は@types/node@12を使う
src/main/index.jsをsrc/main/index.tsにリネームする。
10行目のlet mainWindowで型が無いことをによりエラーが発生するため、 let mainWindow: BrowserWindow | null としておく
この時点で yarn dev コマンドを実行すると、再度electronアプリが起動できる。
この時点でMainProcessのコードがTypescriptによって動く状態になっている。
React導入
code:console.sh
yarn add @babel/preset-react --dev
code:tsconfig.json
{
~~~~~~~~~~~~
"compilerOptions": { "jsx": "react" }
}
https://webpack.electron.build/add-ons#react-jsx の通り、jsxのコンパイルに必要なものを入れる
code:console.sh
yarn add react react-dom @types/react @types/react-dom --dev
react関連の依存を追加する
src/renderer/index.jsをsrc/renderer/index.tsxにリネームし、Reactの表示用コードを書く。
ここで、https://webpack.electron.build/development#use-of-html-webpack-plugin にある通り、ReactDOM.renderで最初に指定するcontainerはid=appのelementを取得する必要がある
ReactDevTools導入
code:console.sh
yarn add electron-devtools-installer @types/electron-devtools-installer --dev
https://github.com/electron/electron/blob/v10.0.0/docs/tutorial/devtools-extension.md に You may also try electron-devtools-installerとある通り、electron-devtools-installerを導入
https://www.npmjs.com/package/electron-devtools-installer の通りにsrc/main/index.tsでReactDevToolsを読み込むようにする。
アプリをビルドできる
code:console.sh
yarn add electron-builder --dev
electron-builderを導入
code:package.json
{
"scripts" {
"dev": "electron-webpack dev",
"build": "electron-webpack && electron-builder --mac --x64"
}
"name": "electron-webpack-ts-react-template",
"version": "10.0.0"
}
buildスクリプトを追加
nameはアプリの名前
versionは使っているelectronのバージョン
code:src/main/index.ts
-import installExtension, {
- REACT_DEVELOPER_TOOLS,
-} from 'electron-devtools-installer';
const isDevelopment = process.env.NODE_ENV !== 'production';
@@ -22,9 +19,12 @@ function createMainWindow() {
}
if (isDevelopment) {
- installExtension(REACT_DEVELOPER_TOOLS)
- .then((name) => console.log(Added Extension: ${name}))
- .catch((err) => console.log('An error occurred: ', err));
+ import('electron-devtools-installer').then((module) => {
+ module
+ .default(module.REACT_DEVELOPER_TOOLS)
+ .then((name) => console.log(Added Extension: ${name}))
+ .catch((err) => console.log('An error occurred: ', err));
+ });
window.loadURL(http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT});
} else {
electron-devtools-installerはアプリ化した際に読み込めないようなので、開発時にのみ動的にimportするように変更する
package.jsonでelectron-devtools-installerをdevDependencyからdependencyに移動することでも対処できる。
しかし、開発用の機能なのでdependencyに移動するのも良くないと考え、動的importを選択した。
ボタン追加
クリック可能なボタンを作成し、クリック時にconsoleに文字列を表示する
nodeの力を使ってみる
Button.tsxでchildProcessをimportし、lsコマンドを実行、dev toolのconsoleに表示する
これでローカルのリソースにアクセスできていることが確認できる