Electron, React, Babel, Gulpの環境構築

electron, react, babel and gulpの環境をつくる。

create-react-appとかelectron-react-boilerplateとかは、使わない。普通に調べると、前者のコマンドが付いて回る。恐ろしい。後者は、yarnを使う必要がある。yarnは導入に詰まったりしたので、後者は使わない。

githubに全体のソースがあります: ikapper/electron-react-babel-gulp-example: Setup for electron+react+babel+gulp environment

npm initから作成した。最終的なpackage.jsonは以下のようになる。

// 依存関係以外は省略
"devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "electron-mocha": "^8.0.3",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
},
"dependencies": {
    "electron": "^5.0.6"
}

babelは@で始めるパッケージじゃないといけないみたい。ここで時間を食ってしまった。 @がなんだかよくわかってないので、後で調べよう。node_modules/の格納先ディレクトリが同一になるのだろうか。

つまり、インストールコマンドは、下記になる。

npm install -D @babel/core
npm install -D @babel/preset-env
npm install -D @babel/preset-react
npm install -D electron-mocha
npm install -D gulp
npm install -D gulp-babel
npm install -D react
npm install -D react-dom
npm install electron

最終的なディレクトリ構成
問題
参考

最終的なディレクトリ構成

$ tree --filelimit 10 --dirsfirst --sort=name -F
.
├── build/
│   └── index.js
├── data/
│   └── config.json
├── main/
│   ├── main.js
│   └── preload.js
├── node_modules/ [390 entries exceeds filelimit, not opening dir]
├── renderer/
│   ├── index.html
│   └── index.jsx
├── gulpfile.js
├── package-lock.json
└── package.json

.babelrcはgulpfile.jsに書いておいたので不要。data/は存在するが不使用。 nodeIntegrationはfalseにするので、preloadを利用する。

問題

現時点では、jsxを変更するたびに、gulpを走らせる必要がある。なんとかしたい。 2019/07/02: ホットリロードを導入したので、この問題は解決できた。githubも反映済み。詳細は、electron-reloadとgulp.watchでjsxをホットリロードする - ikapblogにて。