Electron + React + Webpackの導入

Electron単体で動かすのはNode.jsとnpm or yean があれば簡単に終わりますが、色々付属品を載せようと思うと、情報が１年前のものですると途端にエラーになり、結局、色々付属品の使い方を理解してないまま進めているので効率悪いったら。。と思いながら、エラー対処で少しずつ分かってきました。 Githubに現時点で動くものを上げました。数か月後には動くんだろうか。。怪しい。。 MamiTakata/electron-webpack-react-base

1
2
git clone https://github.com/MamiTakata/electron-webpack-react-base.git my-proj
cd my-proj

構成はこんな感じです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
electron-webpack-react-base
├─src
│  ├─main
│  │  ├─createMainWindow.js
│  │  └─index.js
│  └─renderer
│     └─App.jsx
├─.babelrc
├─index.html
├─package.json
├─package-lock.json
└─webpack.config.js

npm installでpackage.jsonに定義されたモジュールがnode_moduleフォルダ内にインストールされます。

webpack.config.jsに以下のように定義します。entry記載のファイルをエントリーポイントとして、ビルドした結果をoutput記載のdist/main or renderer/

\[name\]

.jsに出力します。

1
2
3
4
5
6
7
8
  entry: {
    "main/index": "./src/main/index.js",
    "renderer/app": "./src/renderer/app.jsx"
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "[name].js"
  }

簡単なコマンドで実行できるように、package.jsonにはショートカットコマンドを定義してあります。

1
2
3
4
  "scripts": {
    "build": "webpack --mode production",
    "start": "electron .",
  }

npm run buildをすると、distフォルダが出来上がります。その後npm startすると以下のような画面が起動します。