最近 Electron を触り始めたので備忘録してまとめ。
Framework で使い慣れている React を入れたかったのですが、なかなか苦戦しました…。
参考にさせていただいた記事はこちらから。
Electron + React.js でアプリ開発をする。 | tyablog.net
https://tyablog.net/2018/02/19/electron-react-js-project-structure/
最初は別の記事を参考にしていたのですが、上級者向けで「これで開発するのは無理だ」と途中で悟ったため、そちらは無かったことにしました。
さて、開発環境の準備ですが、まず任意の場所に、プロジェクトのディレクトリを作り、そこで npm init で package.json を作成します。
// package.json 作成 npm init
なお、聞かれる値はすべてデフォルト値で OK です。
次に必要なパッケージをインストールします。
npm install -S electron react react-dom npm install -D babel-core babel-loader babel-preset-env babel-preset-react webpack
上記が完了したら、次に webpack.config.js を作成します。
内容は下記のとおりです。
const path = require('path');
const webpack = require('webpack');
module.exports = {
target:"electron-renderer",
devtool: 'source-map',
mode: 'development',
entry: {
app: './src',
},
// バンドルファイルの出力場所
output: {
filename: "[name].js",
path: path.resolve(__dirname, 'public/build')
},
resolve: {
modules: [
// srcディレクトリをimport解決のrootに設定
path.resolve(__dirname, "src"),
"node_modules",
],
extensions: [".js", ".jsx"]
},
module: {
rules: [
{
// react jsx のトランスパイル設定
test: /\.js?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader', options: {presets: [['env', {'modules': false}], "react"]}
}
]
}
]
},
plugins: []
};
なお、参考サイトでは、42行目の plugins にも指定があったのですが、それがあるとビルドが通らなかったので削除しました。
次は index.js です。
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
let win;
function createWindow() {
win = new BrowserWindow({width: 800, height: 600});
win.loadURL(url.format({
pathname: path.join(__dirname, 'public', 'index.html'),
protocol: 'file:',
slashes: true
}));
// Open the DevTools.
win.webContents.openDevTools();
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', () => {
if (win === null) {
createWindow()
}
});
次に public/index.html を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<div id="root"></div>
<script src="build/app.js"></script>
</body>
</html>
最後に src/index.js を作成します。
2つ前に作成した index.js とは違うのでご注意ください。
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
これで用意するファイルは全部です！
あとは、下記コマンドで webpack でバンドルして、実行をしてみましょう。
npx webpack npx electron .
問題がなければ、ウィンドウが起動して、Hello, world! の文字が表示されます。
なお、実行するコマンドについては、package.json の scripts に記述してもいいと思います。
{
......
"scripts": {
"build": "npx webpack",
"start": "npx electron .",
},
......
}
このあたりは好みなのでなくても大丈夫ですが、個人的にはこういったコマンドってすぐに忘れるので書いておいた方が便利かなと思います。
以上、Electron & React の開発環境を用意する方法についてでした。
正直今日一日この作業しかしなかったので…私と同じ初心者の方は是非ご参考にしていただければ幸いです。
