fk2000/electron-tutorial.md

## electron-tutorial.md

      
    Raw
  

              electron-tutorial.md
            
          
    Electronの最速チュートリアル

環境


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


以上、Electronの最速チュートリアルでした。