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にて。
コメント