NEW ARTICLE
Oracle Database 右側の空白を除去する
  1. HOME
  2. windows
  3. windows10にelectronをインストールする

windows10にelectronをインストールする

windows10にelectronをインストールする

electronはマルチプラットフォーム対応で、 オープンソースかつ商用利用可能 なので、非常に便利なため、windows10にelectronをインストール。その際の作業メモ。ちなみに、 SlackやAtomといったツールもelectronが採用されている
※nodejsがインストールされることが前提

window10にnodejsのインストール手順はこちら

目次

環境

windows10 pro

インストール

コマンドプロンプト上で実行

## package.json の作成
npm init

後で変更できるので、とりあえず、全てENTERキーを押下

※Windows Terminalについてはこちら

## ローカルインストール（※ローカルインストールついて後述）
npm install --save-dev electron
下記でも同じ
npm i -D electron

## 確認
electron -v
v6.0.12

## 起動
npx electron

起動すると下図の画面が立ち上がる

実行

ファルダ構成画像

同一階層にindex.jsを作成

"use strct";

const electron = require("electron");

const app = electron.app;

const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

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


app.on("ready", () => {

  mainWindow = new BrowserWindow({width: 1280, height: 720, useContentSize: true});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

index.html も作成

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <p>Hello World！</p>
</body>
</html>
## 実行
.\node_modules\.bin\electron .
下記でも同じ
npx electron .

アプリが起動すれば完了

パッケージング

## パッケージツール　インストール
npm i -D electron-packager

## パッケージ化
npx electron-packager . test --platform=win32 --arch=x64 --overwrite

<出力結果>
Packaging app for platform win32 x64 using electron v6.0.12

これで、「test-win32-x64」フォルダ配下に

test.exeが作成されます

パッケージング オプション

オプション 名内容
platformall, linux, win32, darwin が選択可能。
–allだと全て
archall, ia32, x64 が選択可能
versionelectronのバージョン指定

グローバルインストール と ローカルインストール について

グローバルインストール

実行ファイルをパスを指定しなくて実行できる
バージョンアップ等で、動作しなくなるプロジェクトが発生する場合がある

ローカルインストール

プロジェクト単位でバージョンを管理できる
プロジェクトごとなため、 容量がとられてしまう

ローカルインストールとグローバルインストールについて詳細はこちら

yarn インストール

yarnは、パッケージの依存関係処理がnpmより速いとのことなので、 ついでにyarnもインストールしておく

## インストール
npm install -g yarn

## バージョン確認
yarn --version

<出力結果>
1.19.1