Electron の入門記事で $ npm install -g electron する手順が載っていますが、複数プロジェクトに関わる可能性がある場合は、この手順を実行しない方が良いと思われます。これは、使用している electron のバージョンの違いから、余計なトラブルを招く可能性があるからです。
もちろん、入門記事では、話を単純にするためにこのように説明している可能性が高いのですが。
- 例えば、古い electron を使用して開発されているプロジェクトは
$ electron .で起動できない場合があります。 - そのような場合でも package.json の "devDependencies" に electron-prebuilt が指定されていれば、
$ ./node_modules/.bin/electron .で起動する場合があります。 - あるいは、
$ npm startで起動できるプロジェクトもあります。
筆者の環境
- VineSeed (Vine Linux 開発版) 64bit
- nodebrew use v4.4.7(LTS)
Electron プロジェクトの始め方とそのポイント
-
プロジェクト用のディレクトリを作成し、そのディレクトリをカレントディレクトリにする。
``` $ mkdir myproject $ cd myproject/ ``` -
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> --save` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. name: (myproject) ← プロジェクト名を入力。デフォルトはディレクトリ名になります。 version: (1.0.0) 0.1.0 ← プロジェクトのバージョンを入力します。0.1 みたいな形式は使えません。 description: my project is test project. entry point: (index.js) ← ここで入力したファイル名がメインプロセスのファイル名になる。 test command: git repository: keywords: author: Yasumichi Akahoshi <yasumichi@vinelinux.org> ← 自分の名前とメールアドレスを入力します。 license: (ISC) MIT About to write to /home/yasumichi/Projects/myproject/package.json: { "name": "myproject", "version": "0.1.0", "description": "my project is test project.", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "Yasumichi Akahoshi <yasumichi@vinelinux.org>", "license": "MIT" } Is this ok? (yes) ``` -
メインプロセスとなる JavaScript ファイルとレンダラプロセスとなる HTML を用意する。
-
デバッグ用に electron-prebuilt という Node.js モジュールをプロジェクトローカルにインストールする。
```
$ npm install --global-style --save-dev electron-prebuilt
(出力省略)
```
- この操作により、プロジェクトのディレクトリ直下に node_modules というディレクトリが作成され、パッケージが配置されます。
-
--global-styleオプションを指定することにより、依存関係を考慮して node_modules 配下へパッケージが配置されます。(指定しないと electron-prebuilt が依存するパッケージは同列に配置されてしまう。) -
--save-devオプションを指定したことにより package.json の "devDependencies" に "electron-prebuilt" が追加されます。
-
パッケージング用に electron-packager という Node.js モジュールをプロジェクトローカルにインストールする。
```
$ npm install --global-style --save-dev electron-packager
(出力省略)
```
-
package.json に start スクリプトを追加する。
```diff
@@ -4,6 +4,7 @@
"description": "my project is test project.",
"main": "index.js",
"scripts": {
- "start": "electron .",
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Yasumichi Akahoshi yasumichi@vinelinux.org",
```
-
実際に起動してみる
``` $ npm start > myproject@0.1.0 start /path/to/myproject > electron . ```
electron-packager の重要なオプション
以下は、Windows 32bit 向けバイナリを生成する場合の例です。 (npm script として記述する場合は、./node_modules/.bin/ というパスを省略できる。)
$ ./node_modules/.bin/electron-packager --platform=win32 --arch=ia32 --prune --asar=true --out=releases .
| option | 説明 |
|---|---|
| --prune | 配布物から "devDependencies" な node モジュールを削除する。 |
| --asar=true | resources/app を asar 形式でアーカイブする。 |
| --out=releases | 配布物を現在のディレクトリ直下ではなく releases ディレクトリ以下に生成する。 |