環境
- OS: Windows10
- terminal: Cmder
前提
node.js、npm、electron、electron-packagerはインストール済みであること。
$ node -v
v10.3.0
$ npm -v
6.1.0
$ electron -v
v1.4.13
手順
1. プロジェクトフォルダを作成する
$ mkdir sample
$ cd sample
2. npm initでpackage.jsonを作成する
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (sample)
version: (1.0.0)
description:
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: fk2000
license: (ISC) MIT
About to write to C:\Users\fk2000\workspace\sample\package.json:
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "fk2000",
"license": "MIT"
}
Is this OK? (yes) yes
3. デバッグ起動の確認
$ electron .
デバッグコンソールも起動する。
4. electronのバージョンを確認する
パッケージングのコマンドオプションにElectronのバージョンを入力するために確認します。
$ electron -v
v1.4.13
5. パッケージングする
electron-packagerコマンドの使い方は以下の通り。
Usage: electron-packager <sourcedir> <appname> [options...]
※Macではないのでdarwinオプションはskipされます。
$ electron-packager . sample --platform=darwin,win32 --arch=x64 --electron-version=1.4.13
Downloading tmp-18752-0-electron-v1.4.13-darwin-x64.zip
Downloading tmp-18752-1-SHASUMS256.txt-1.4.13
[============================================>] 100.0% of 2.88 kB (2.88 kB/s)
Cannot create symlinks (on Windows hosts, it requires admin privileges); skipping darwin platform
Wrote new app to C:\Users\fk2000\workspace\sample\sample-win32-x64
6. 出来上がったファイルを確認する
~\workspace\sample sample@1.0.0
$ ls -l
total 10
-rw-r--r-- 1 OryLab 197121 389 1月 10 17:53 index.html
-rw-r--r-- 1 OryLab 197121 1083 1月 10 17:52 main.js
drwxr-xr-x 1 OryLab 197121 0 1月 10 17:56 sample-win32-x64/
-rw-r--r-- 1 OryLab 197121 211 1月 10 17:49 package.json
7. バイナリを起動してみる
デバッグ起動のときと同じ画面が表示される。
$ cd sample-win32-x64
$ sample.exe
sample.exeを実行するとデバッグ起動と同じものが表示される。
以上、Electronの最速チュートリアルでした。