ElectronでHello world

久々に技術ブログを書いていきます。 (最近は書評ブログとかが多かったので、、、、)

babelやwebpack

「Electron 環境構築」とか「Electron Hello wold」とかで検索すると大体は単に画面にテキストを表示するのみで終わってしまっているのもが多いので今回はbabel や webpackなどもいれてトランスパイルできるようにしていきます。

自分は下記の本を購入して勉強しました。おすすめの本です。

まずはnode.jsをインストールしてnpmコマンドが使えるようにしてください。ググればいろいろでてきます。

その後、プロジェクトファイルを作成してnpm initを実行する

mkdir Helloworld
cd Helloworld
npm init -y

すとJsonファイルが作成されます。

package.json

{
  "name": "Helloworld",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

各種パッケージファイルのインストール

Electronをインストール

npm install electron

webpackのインストール

npm install webpack

reactのインストール(今回はreactを使用します)

npm install react react-dom

画面描写に必要なファイルのインストール

npm install babel-core babel-loader babel-preset-es2015 babel-preset-react

Windowを作成するファイル(最初に呼ばれるファイル)

src/main/index.jsを作成する(src と mainは各自ディレクトリを作成してください)

import { app } from "electron";
import createWindow from "./createWindow";

app.on("ready",() => {
  // Windowを生成する
  createWindow();
});

app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", (_e, hasVisibleWindows) => {
  if (!hasVisibleWindows) {
    createWindow();
  }
});

createWindow.jsを作成

electronでwindowを作成するクラスを作成する

src/main/createWindow.js

import { BrowserWindow } from 'electron';

let win;

function createWindow() {
  win = new BrowserWindow();
  win.loadURL(`file://${__dirname}/../../index.html`);
  win.on("close", () => {
    win = null;
  });
}

export default createWindow;

index.htmlを作成

createwindowしたファイルの上に表示するhtmlファイルです (これはプロジェクトディレクトリの直下においてください)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ブログみてね！</title>
  </head>
  <body>
    <div class="window">
      <div id="app" class="window-content"></div>
    </div>
    <script>require("./dist/renderer/app.js")</script>
  </body>
</html>

app.jsxの作成

ここでHello worldします

src/renderer/app.jsx

import React from "react";
import { render } from "react-dom";


render(<div> Hello World </div>, document.getElementById("app"));

webpackの設定ファイルを作成する

プロジェクトディレクトリの直下に下記のファイルを作成する

webpack.config.js

module.exports = {
    target: "electron",
    node:{
        __dirname:false,
        __filename:false
    },
    resolve:{
        extensions: [".js",".jsx"]
    },
    module:{
    rules:[
        {
        test: /\.jsx?$/,
        exclude:/node_modules/,
        loader: "babel-loader"
        },
        {
        test: /.css$/,
            loaders:["style-loader","css-loader?modules"]
        }
        ]
    },
    entry: {
        "main/index":"./src/main/index.js",
        "renderer/app": "./src/renderer/app.jsx"
    },
    output: {
        filename: "dist/[name].js"
    },
    devtool:"source-map"
};