-->

Electron

パッケージングを行う。パッケージングを行うツールは、何種類かあるみたいだけど、electron-packagerを使うことにする。

[Electron] Hello World的なもの(2) index.htmlの置き場所を変える。からダウンロードできるソースに対して行っていく。

プロジェクトのフォルダでelectron-packagerをインストールする。

npm install electron-packager -D
npm run build:prod

でビルド後、

npx electron-packager dist --overwrite

って、やると実行したOS用のパッケージングが行われる。distはビルド後作成されるフォルダで、その中のファイルをパッケージングする。

32bitのWindows上で実行すると、webpack-electron-win32-ia32フォルダに作成される。このフォルダ名とexeのファイル名のwebpack-electronは、distフォルダにあるpackage.jsonのnameに書いてあるものが使用されている。

macOS用は、

npx electron-packager dist --platform=darwin --arch=x64 --overwrite
で、

64bitのWindows用は、

npx electron-packager dist --platform=win32 --arch=x64 --overwrite

で、x64のLinux用は、

npx electron-packager dist --platform=linux --arch=x64 --overwrite

で作れる。

ただし、Windows上で作ったmacOSのファイルたちをmacOSに持って行っても動かなかったんだよねー。詳しくは調べていないんでなんで動かないのかはわからん。実行権とかなんかの問題なんかな?

Linux、macOS上でWindows用のパッケージングを行うには、Wineをインストールする必要があるようだ。(試してない)

package.jsonのscriptsに

    "package": "electron-packager dist --overwrite"

を追加しておくと、

npm run package

で、パッケージングできる。

変更したソースをダウンロードできるようにしといた。





このエントリーをはてなブックマークに追加

[Electron] Hello World的なもの(1)を少し変更する。

index.htmlをsrcフォルダに移動して、ビルドするとdistにコピーされるようにしたい。つまり、srcフォルダにすべてのソース、ビルドで生成されるファイル+実行に必要なファイルをdistに用意されるようになる。と、すると実行用のpackage.jsonも別途srcフォルダに用意しといた方がいいような気がするのでそれも行う。

webpackでビルド時にファイルをコピーする方法はいろいろあるようなんだけど、copy-webpack-pluginを使うことにする。

copy-webpack-pluginをインストールする。プロジェクトフォルダで

npm install copy-webpack-plugin -D

を実行する。

webpack.config.jsの頭のほうに、

const copyWebpackPlugin = require('copy-webpack-plugin');

を追加して、レンダラープロセスの設定に

    plugins: [
      new copyWebpackPlugin([
        { from: "./src/*.html", to:"[name].[ext]" },
        { from: "./src/package.json" },
      ])
    ]  

を追加する。

index.htmlをsrcフォルダに移動する。
index.htmlでdist/app.jsと指定しているところをapp.jsに変更する。
src/main/main/tsのloadURLで読み込んでいるindex.htmlの場所を変更する。

package.jsonのscriptsのstartを

    "start": "electron ./dist/"

起動用のsrc/package.jsonを用意する。

{
    "name": "webpack-electron",
    "version": "1.0.0",
    "main": "./main.js"
}

こんな感じかな?

変更したソースをダウンロードできるようにしといた。





このエントリーをはてなブックマークに追加

とりあえず、Electronについて簡単に書いておくとHTML、CSS、JavaScriptなんかを使ってデスクトップアプリを作ることができるフレームワークだ。(詳しくはぐぐれ!w)

ということで、[React][TypeScript] Hello World的なもの(1)(更新!)をElectronでデスクトップアプリにしてみる。

Electronは、メインプロセスとレンダラープロセスがあって、まずpackage.jsonのmainに書かれているJavaScriptファイルがメインプロセスとして実行され、そこでHTMLファイルなんかを指定してウインドウを開く(レンダラープロセスを起動させる)ことになる。

ということで、プロジェクトのフォルダに移動してElectronとwebpack-mergeをインストールする。

npm install electron webpack-merge -D

webpack-mergeはwebpackで2つのプロセスのJavaScriptを作るときにそれぞれ設定が少し違う場合にこれを使うといい感じに設定を書くことができる。

元のプロジェクトはレンダラープロセスのコードにするんでフォルダ構成を少し変更する。

src/rendererフォルダを作ってsrc/index.tsxをそこに移動する。

メインプロセスのソースを用意する。メインプロセスのソースは、src/mainに置くことにする。

src/main/main.ts

import {app, BrowserWindow} from "electron";
import * as url from "url";
import * as path from "path";

let mainWindow:BrowserWindow | null;

function createWindow() {
    // メインウィンドウを作る
    mainWindow = new BrowserWindow({
        width:800,
        height:600
    });

    // メインウィンドウにindex.htmlを読み込む
    mainWindow.loadURL(url.format({
        pathname:path.join(__dirname, "../index.html"),
        protocol:"file:",
        slashes:true
    }));

    // ウィンドウが閉じられたときの処理を追加
    mainWindow.on("closed", ()=>{
        mainWindow = null;
    })
}

// ウィンドウの作成準備ができたときの処理を追加
app.on("ready", createWindow);

// すべてのウィンドウが閉じれたときに呼ばれる。
app.on("window-all-closed", ()=>{
    // macOS以外は終了
    // macOSの場合は通常すべてのウィンドウを閉じても
    // アプリは終了しないのでmacOSではapp.quit()を呼ばない。
    if(process.platform !== "darwin") {
        app.quit();
    }
});

// アプリがアクティブになるときの処理を追加
app.on("activate", ()=>{
    if(mainWindow === null) {
        createWindow();
    }
});

package.jsonのmainを変更する

  "main": "dist/main.js",

scriptsにメインプロセスのstartを追加する。

    "start": "electron ."

メインプロセスとレンダラープロセスをビルドするwebpackの設定ファイル(webpack.config.js)を用意する。元のプロジェクトからかなりの変更なんで全部載せておく。

webpack.config.js

webpackMerge = require('webpack-merge');

baseConfig = {   
  module: {
    rules: [
      {
        // 拡張子 .tsもしくは.tsx の場合
        test: /\.tsx?$/,
        // TypeScript をコンパイルする
        use: "ts-loader"
      }
    ]
  },
  // import 文で .ts ファイルを解決するため
  resolve: {
    extensions: [
      ".ts", ".tsx", ".js", ".json"
    ]
  }
};

// レンダープロジェクトのコンパイル設定
renderConfig = webpackMerge(baseConfig, {   
    entry: "./src/renderer/index.tsx",

    target: "electron-renderer",

    output: {
        path:`${__dirname}/dist`,
        filename: "app.js"
    }
});

// メインプロセスのコンパイル設定
mainConfig = webpackMerge(baseConfig, {   
  entry: "./src/main/main.ts",
  
  target: "electron-main",

  output: {
      path:`${__dirname}/dist`,
      filename: "main.js"
  },
  node: {
      console:true,
      __dirname:false,
      __filename:false
  }
});

module.exports = [ renderConfig, mainConfig];
npm run build

でビルドして、

npm run start

で起動する。

ソースをダウンロードできるようにしといた。





このエントリーをはてなブックマークに追加

↑このページのトップヘ