• Шаг № 1 - Установка npm и Node.js
• Шаг № 2 - Загрузка .gitignore для Node.js
• Шаг № 3 - Создание файла package.json
• Шаг № 4 - Установка Electron
• Шаг № 5 - Установка jspm (нужно для ES6-транспайлера)
• Шаг № 6 - Инициализация jspm
• Шаг № 7 - Патч конфигурации jspm
• Шаг № 8 - Добавление скрипта запускаемого главным процессом
• Шаг № 9 - Подключение ES6-транспайлера в файле index.html
• Шаг № 10 - Запуск Electron-приложения

Шаг № 1

Установка npm и Node.js:

$ sudo apt-get install npm
$ sudo apt-get install nodejs-legacy

Шаг № 2

Загрузка .gitignore для Node.js:

$ wget https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore -O .gitignore

Шаг № 3

Создание файла package.json:

{
  "name": "electron-seed",
  "description": "Seed project for electron apps.",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gusenov/electron-seed.git"
  },
  "homepage": "https://github.com/gusenov/electron-seed#readme",
  "license": "MIT"
}

Шаг № 4

Установка Electron:

$ npm install electron --save-dev

> electron@4.0.0 postinstall /home/abbas/electron-seed/node_modules/electron
> node install.js

electron-seed@0.1.0 /home/abbas/electron-seed
└─┬ electron@4.0.0
  ├── @types/node@8.10.39
  ├─┬ electron-download@4.1.1
  │ ├─┬ debug@3.2.6
  │ │ └── ms@2.1.1
  │ ├── env-paths@1.0.0
  │ ├─┬ fs-extra@4.0.3
  │ │ ├── graceful-fs@4.1.15
  │ │ ├── jsonfile@4.0.0
  │ │ └── universalify@0.1.2
  │ ├── minimist@1.2.0
  │ ├─┬ nugget@2.0.1
  │ │ ├─┬ debug@2.6.9
  │ │ │ └── ms@2.0.0
  │ │ ├─┬ pretty-bytes@1.0.4
  │ │ │ ├── get-stdin@4.0.1
  │ │ │ └─┬ meow@3.7.0
  │ │ │   ├─┬ camelcase-keys@2.1.0
  │ │ │   │ └── camelcase@2.1.1
  │ │ │   ├── decamelize@1.2.0
  │ │ │   ├─┬ loud-rejection@1.6.0
  │ │ │   │ ├─┬ currently-unhandled@0.4.1
  │ │ │   │ │ └── array-find-index@1.0.2
  │ │ │   │ └── signal-exit@3.0.2
  │ │ │   ├── map-obj@1.0.1
  │ │ │   ├─┬ normalize-package-data@2.4.0
  │ │ │   │ ├── hosted-git-info@2.7.1
  │ │ │   │ ├─┬ is-builtin-module@1.0.0
  │ │ │   │ │ └── builtin-modules@1.1.1
  │ │ │   │ └─┬ validate-npm-package-license@3.0.4
  │ │ │   │   ├─┬ spdx-correct@3.1.0
  │ │ │   │   │ └── spdx-license-ids@3.0.3
  │ │ │   │   └─┬ spdx-expression-parse@3.0.0
  │ │ │   │     └── spdx-exceptions@2.2.0
  │ │ │   ├── object-assign@4.1.1
  │ │ │   ├─┬ read-pkg-up@1.0.1
  │ │ │   │ ├─┬ find-up@1.1.2
  │ │ │   │ │ ├── path-exists@2.1.0
  │ │ │   │ │ └─┬ pinkie-promise@2.0.1
  │ │ │   │ │   └── pinkie@2.0.4
  │ │ │   │ └─┬ read-pkg@1.1.0
  │ │ │   │   ├─┬ load-json-file@1.1.0
  │ │ │   │   │ ├─┬ parse-json@2.2.0
  │ │ │   │   │ │ └─┬ error-ex@1.3.2
  │ │ │   │   │ │   └── is-arrayish@0.2.1
  │ │ │   │   │ ├── pify@2.3.0
  │ │ │   │   │ └─┬ strip-bom@2.0.0
  │ │ │   │   │   └── is-utf8@0.2.1
  │ │ │   │   └── path-type@1.1.0
  │ │ │   ├─┬ redent@1.0.0
  │ │ │   │ ├─┬ indent-string@2.1.0
  │ │ │   │ │ └─┬ repeating@2.0.1
  │ │ │   │ │   └── is-finite@1.0.2
  │ │ │   │ └── strip-indent@1.0.1
  │ │ │   └── trim-newlines@1.0.0
  │ │ ├─┬ progress-stream@1.2.0
  │ │ │ ├── speedometer@0.1.4
  │ │ │ └─┬ through2@0.2.3
  │ │ │   ├─┬ readable-stream@1.1.14
  │ │ │   │ ├── isarray@0.0.1
  │ │ │   │ └── string_decoder@0.10.31
  │ │ │   └─┬ xtend@2.1.2
  │ │ │     └── object-keys@0.4.0
  │ │ ├─┬ request@2.88.0
  │ │ │ ├── aws-sign2@0.7.0
  │ │ │ ├── aws4@1.8.0
  │ │ │ ├── caseless@0.12.0
  │ │ │ ├─┬ combined-stream@1.0.7
  │ │ │ │ └── delayed-stream@1.0.0
  │ │ │ ├── extend@3.0.2
  │ │ │ ├── forever-agent@0.6.1
  │ │ │ ├─┬ form-data@2.3.3
  │ │ │ │ └── asynckit@0.4.0
  │ │ │ ├─┬ har-validator@5.1.3
  │ │ │ │ ├─┬ ajv@6.6.2
  │ │ │ │ │ ├── fast-deep-equal@2.0.1
  │ │ │ │ │ ├── fast-json-stable-stringify@2.0.0
  │ │ │ │ │ ├── json-schema-traverse@0.4.1
  │ │ │ │ │ └─┬ uri-js@4.2.2
  │ │ │ │ │   └── punycode@2.1.1
  │ │ │ │ └── har-schema@2.0.0
  │ │ │ ├─┬ http-signature@1.2.0
  │ │ │ │ ├── assert-plus@1.0.0
  │ │ │ │ ├─┬ jsprim@1.4.1
  │ │ │ │ │ ├── extsprintf@1.3.0
  │ │ │ │ │ ├── json-schema@0.2.3
  │ │ │ │ │ └── verror@1.10.0
  │ │ │ │ └─┬ sshpk@1.16.0
  │ │ │ │   ├── asn1@0.2.4
  │ │ │ │   ├── bcrypt-pbkdf@1.0.2
  │ │ │ │   ├── dashdash@1.14.1
  │ │ │ │   ├── ecc-jsbn@0.1.2
  │ │ │ │   ├── getpass@0.1.7
  │ │ │ │   ├── jsbn@0.1.1
  │ │ │ │   ├── safer-buffer@2.1.2
  │ │ │ │   └── tweetnacl@0.14.5
  │ │ │ ├── is-typedarray@1.0.0
  │ │ │ ├── isstream@0.1.2
  │ │ │ ├── json-stringify-safe@5.0.1
  │ │ │ ├─┬ mime-types@2.1.21
  │ │ │ │ └── mime-db@1.37.0
  │ │ │ ├── oauth-sign@0.9.0
  │ │ │ ├── performance-now@2.1.0
  │ │ │ ├── qs@6.5.2
  │ │ │ ├── safe-buffer@5.1.2
  │ │ │ ├─┬ tough-cookie@2.4.3
  │ │ │ │ ├── psl@1.1.31
  │ │ │ │ └── punycode@1.4.1
  │ │ │ ├── tunnel-agent@0.6.0
  │ │ │ └── uuid@3.3.2
  │ │ ├─┬ single-line-log@1.1.2
  │ │ │ └─┬ string-width@1.0.2
  │ │ │   ├── code-point-at@1.1.0
  │ │ │   ├─┬ is-fullwidth-code-point@1.0.0
  │ │ │   │ └── number-is-nan@1.0.1
  │ │ │   └─┬ strip-ansi@3.0.1
  │ │ │     └── ansi-regex@2.1.1
  │ │ └── throttleit@0.0.2
  │ ├── path-exists@3.0.0
  │ ├─┬ rc@1.2.8
  │ │ ├── deep-extend@0.6.0
  │ │ ├── ini@1.3.5
  │ │ └── strip-json-comments@2.0.1
  │ ├── semver@5.6.0
  │ └─┬ sumchecker@2.0.2
  │   └─┬ debug@2.6.9
  │     └── ms@2.0.0
  └─┬ extract-zip@1.6.7
    ├─┬ concat-stream@1.6.2
    │ ├── buffer-from@1.1.1
    │ ├── inherits@2.0.3
    │ ├─┬ readable-stream@2.3.6
    │ │ ├── core-util-is@1.0.2
    │ │ ├── isarray@1.0.0
    │ │ ├── process-nextick-args@2.0.0
    │ │ ├── string_decoder@1.1.1
    │ │ └── util-deprecate@1.0.2
    │ └── typedarray@0.0.6
    ├─┬ debug@2.6.9
    │ └── ms@2.0.0
    ├─┬ mkdirp@0.5.1
    │ └── minimist@0.0.8
    └─┬ yauzl@2.4.1
      └─┬ fd-slicer@1.0.1
        └── pend@1.2.0

Файл package.json после установки Electron:

{
  "name": "electron-seed",
  "description": "Seed project for electron apps.",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gusenov/electron-seed.git"
  },
  "homepage": "https://github.com/gusenov/electron-seed#readme",
  "license": "MIT",
  "devDependencies": {
    "electron": "^4.0.0"
  }
}

Шаг № 5

Установка jspm:

$ npm install jspm --save-dev

electron-seed@0.1.0 /home/abbas/electron-seed
├─┬ electron@4.0.0
│ ├─┬ electron-download@4.1.1
│ │ ├─┬ nugget@2.0.1
│ │ │ └─┬ debug@2.6.9
│ │ │   └── ms@2.0.0
│ │ └─┬ sumchecker@2.0.2
│ │   └─┬ debug@2.6.9
│ │     └── ms@2.0.0
│ └─┬ extract-zip@1.6.7
│   ├─┬ concat-stream@1.6.2
│   │ └─┬ readable-stream@2.3.6
│   │   └── isarray@1.0.0
│   └─┬ debug@2.6.9
│     └── ms@2.0.0
└─┬ jspm@0.16.53
  ├─┬ chalk@1.1.3
  │ ├── ansi-styles@2.2.1
  │ ├── escape-string-regexp@1.0.5
  │ ├── has-ansi@2.0.0
  │ └── supports-color@2.0.0
  ├── core-js@1.2.7
  ├─┬ glob@6.0.4
  │ ├─┬ inflight@1.0.6
  │ │ └── wrappy@1.0.2
  │ ├── once@1.4.0
  │ └── path-is-absolute@1.0.1
  ├─┬ jspm-github@0.13.20
  │ ├─┬ expand-tilde@1.2.2
  │ │ └── os-homedir@1.0.2
  │ ├── netrc@0.1.4
  │ ├─┬ tar@2.2.1
  │ │ ├── block-stream@0.0.9
  │ │ └── fstream@1.0.11
  │ └─┬ which@1.3.1
  │   └── isexe@2.0.0
  ├─┬ jspm-npm@0.26.14
  │ ├── buffer-peek-stream@1.0.1
  │ ├── glob@5.0.15
  │ ├─┬ resolve@1.9.0
  │ │ └── path-parse@1.0.6
  │ └── tar@1.0.3
  ├─┬ jspm-registry@0.4.4
  │ └── semver@4.3.6
  ├─┬ liftoff@2.5.0
  │ ├─┬ findup-sync@2.0.0
  │ │ ├── detect-file@1.0.0
  │ │ ├─┬ is-glob@3.1.0
  │ │ │ └── is-extglob@2.1.1
  │ │ ├─┬ micromatch@3.1.10
  │ │ │ ├── arr-diff@4.0.0
  │ │ │ ├── array-unique@0.3.2
  │ │ │ ├─┬ braces@2.3.2
  │ │ │ │ ├── arr-flatten@1.1.0
  │ │ │ │ ├─┬ extend-shallow@2.0.1
  │ │ │ │ │ └── is-extendable@0.1.1
  │ │ │ │ ├─┬ fill-range@4.0.0
  │ │ │ │ │ ├── extend-shallow@2.0.1
  │ │ │ │ │ ├── is-number@3.0.0
  │ │ │ │ │ ├── repeat-string@1.6.1
  │ │ │ │ │ └── to-regex-range@2.1.1
  │ │ │ │ ├── repeat-element@1.1.3
  │ │ │ │ ├─┬ snapdragon-node@2.1.1
  │ │ │ │ │ ├─┬ define-property@1.0.0
  │ │ │ │ │ │ └─┬ is-descriptor@1.0.2
  │ │ │ │ │ │   ├── is-accessor-descriptor@1.0.0
  │ │ │ │ │ │   ├── is-data-descriptor@1.0.0
  │ │ │ │ │ │   └── kind-of@6.0.2
  │ │ │ │ │ └── snapdragon-util@3.0.1
  │ │ │ │ └── split-string@3.1.0
  │ │ │ ├─┬ define-property@2.0.2
  │ │ │ │ └─┬ is-descriptor@1.0.2
  │ │ │ │   ├── is-accessor-descriptor@1.0.0
  │ │ │ │   ├── is-data-descriptor@1.0.0
  │ │ │ │   └── kind-of@6.0.2
  │ │ │ ├─┬ extend-shallow@3.0.2
  │ │ │ │ ├── assign-symbols@1.0.0
  │ │ │ │ └── is-extendable@1.0.1
  │ │ │ ├─┬ extglob@2.0.4
  │ │ │ │ ├─┬ define-property@1.0.0
  │ │ │ │ │ └─┬ is-descriptor@1.0.2
  │ │ │ │ │   ├── is-accessor-descriptor@1.0.0
  │ │ │ │ │   ├── is-data-descriptor@1.0.0
  │ │ │ │ │   └── kind-of@6.0.2
  │ │ │ │ ├─┬ expand-brackets@2.1.4
  │ │ │ │ │ ├─┬ debug@2.6.9
  │ │ │ │ │ │ └── ms@2.0.0
  │ │ │ │ │ ├── define-property@0.2.5
  │ │ │ │ │ ├── extend-shallow@2.0.1
  │ │ │ │ │ └── posix-character-classes@0.1.1
  │ │ │ │ └── extend-shallow@2.0.1
  │ │ │ ├── fragment-cache@0.2.1
  │ │ │ ├── kind-of@6.0.2
  │ │ │ ├─┬ nanomatch@1.2.13
  │ │ │ │ ├── is-windows@1.0.2
  │ │ │ │ └── kind-of@6.0.2
  │ │ │ ├─┬ regex-not@1.0.2
  │ │ │ │ └─┬ safe-regex@1.1.0
  │ │ │ │   └── ret@0.1.15
  │ │ │ ├─┬ snapdragon@0.8.2
  │ │ │ │ ├─┬ base@0.11.2
  │ │ │ │ │ ├─┬ cache-base@1.0.1
  │ │ │ │ │ │ ├─┬ collection-visit@1.0.0
  │ │ │ │ │ │ │ ├── map-visit@1.0.0
  │ │ │ │ │ │ │ └── object-visit@1.0.1
  │ │ │ │ │ │ ├── get-value@2.0.6
  │ │ │ │ │ │ ├─┬ has-value@1.0.0
  │ │ │ │ │ │ │ └─┬ has-values@1.0.0
  │ │ │ │ │ │ │   └── kind-of@4.0.0
  │ │ │ │ │ │ ├─┬ set-value@2.0.0
  │ │ │ │ │ │ │ └── extend-shallow@2.0.1
  │ │ │ │ │ │ ├── to-object-path@0.3.0
  │ │ │ │ │ │ ├─┬ union-value@1.0.0
  │ │ │ │ │ │ │ └─┬ set-value@0.4.3
  │ │ │ │ │ │ │   └── extend-shallow@2.0.1
  │ │ │ │ │ │ └─┬ unset-value@1.0.0
  │ │ │ │ │ │   └─┬ has-value@0.3.1
  │ │ │ │ │ │     ├── has-values@0.1.4
  │ │ │ │ │ │     └─┬ isobject@2.1.0
  │ │ │ │ │ │       └── isarray@1.0.0
  │ │ │ │ │ ├─┬ class-utils@0.3.6
  │ │ │ │ │ │ ├── arr-union@3.1.0
  │ │ │ │ │ │ ├── define-property@0.2.5
  │ │ │ │ │ │ └─┬ static-extend@0.1.2
  │ │ │ │ │ │   ├── define-property@0.2.5
  │ │ │ │ │ │   └─┬ object-copy@0.1.0
  │ │ │ │ │ │     ├── copy-descriptor@0.1.1
  │ │ │ │ │ │     └── define-property@0.2.5
  │ │ │ │ │ ├── component-emitter@1.2.1
  │ │ │ │ │ ├─┬ define-property@1.0.0
  │ │ │ │ │ │ └─┬ is-descriptor@1.0.2
  │ │ │ │ │ │   ├── is-accessor-descriptor@1.0.0
  │ │ │ │ │ │   ├── is-data-descriptor@1.0.0
  │ │ │ │ │ │   └── kind-of@6.0.2
  │ │ │ │ │ ├─┬ mixin-deep@1.3.1
  │ │ │ │ │ │ └── is-extendable@1.0.1
  │ │ │ │ │ └── pascalcase@0.1.1
  │ │ │ │ ├─┬ debug@2.6.9
  │ │ │ │ │ └── ms@2.0.0
  │ │ │ │ ├─┬ define-property@0.2.5
  │ │ │ │ │ └─┬ is-descriptor@0.1.6
  │ │ │ │ │   ├── is-accessor-descriptor@0.1.6
  │ │ │ │ │   ├── is-data-descriptor@0.1.4
  │ │ │ │ │   └── kind-of@5.1.0
  │ │ │ │ ├── extend-shallow@2.0.1
  │ │ │ │ ├─┬ source-map-resolve@0.5.2
  │ │ │ │ │ ├── atob@2.1.2
  │ │ │ │ │ ├── decode-uri-component@0.2.0
  │ │ │ │ │ ├── resolve-url@0.2.1
  │ │ │ │ │ ├── source-map-url@0.4.0
  │ │ │ │ │ └── urix@0.1.0
  │ │ │ │ └── use@3.1.1
  │ │ │ └── to-regex@3.0.2
  │ │ └─┬ resolve-dir@1.0.1
  │ │   ├── expand-tilde@2.0.2
  │ │   └─┬ global-modules@1.0.0
  │ │     └─┬ global-prefix@1.0.2
  │ │       └── expand-tilde@2.0.2
  │ ├─┬ fined@1.1.1
  │ │ ├─┬ expand-tilde@2.0.2
  │ │ │ └─┬ homedir-polyfill@1.0.1
  │ │ │   └── parse-passwd@1.0.0
  │ │ ├─┬ object.defaults@1.1.0
  │ │ │ ├── array-each@1.0.1
  │ │ │ └── array-slice@1.1.0
  │ │ ├── object.pick@1.3.0
  │ │ └─┬ parse-filepath@1.0.2
  │ │   ├─┬ is-absolute@1.0.0
  │ │   │ └─┬ is-relative@1.0.0
  │ │   │   └─┬ is-unc-path@1.0.0
  │ │   │     └── unc-path-regex@0.1.2
  │ │   ├── map-cache@0.2.2
  │ │   └─┬ path-root@0.1.1
  │ │     └── path-root-regex@0.1.2
  │ ├── flagged-respawn@1.0.1
  │ ├─┬ is-plain-object@2.0.4
  │ │ └── isobject@3.0.1
  │ ├─┬ object.map@1.0.1
  │ │ ├─┬ for-own@1.0.0
  │ │ │ └── for-in@1.0.2
  │ │ └─┬ make-iterator@1.0.1
  │ │   └── kind-of@6.0.2
  │ └── rechoir@0.6.2
  ├─┬ minimatch@3.0.4
  │ └─┬ brace-expansion@1.1.11
  │   ├── balanced-match@1.0.0
  │   └── concat-map@0.0.1
  ├── ncp@2.0.0
  ├─┬ proper-lockfile@1.2.0
  │ ├── err-code@1.1.2
  │ └── retry@0.10.1
  ├─┬ rimraf@2.6.2
  │ └─┬ glob@7.1.3
  │   └── fs.realpath@1.0.0
  ├── rsvp@3.6.2
  ├─┬ systemjs@0.19.46
  │ └── when@3.7.8
  ├─┬ systemjs-builder@0.15.36
  │ ├─┬ babel-core@6.26.3
  │ │ ├─┬ babel-code-frame@6.26.0
  │ │ │ ├── esutils@2.0.2
  │ │ │ └── js-tokens@3.0.2
  │ │ ├─┬ babel-generator@6.26.1
  │ │ │ ├── detect-indent@4.0.0
  │ │ │ ├── jsesc@1.3.0
  │ │ │ └── trim-right@1.0.1
  │ │ ├── babel-helpers@6.24.1
  │ │ ├── babel-messages@6.23.0
  │ │ ├─┬ babel-register@6.26.0
  │ │ │ ├── core-js@2.6.1
  │ │ │ └─┬ home-or-tmp@2.0.0
  │ │ │   └── os-tmpdir@1.0.2
  │ │ ├─┬ babel-runtime@6.26.0
  │ │ │ ├── core-js@2.6.1
  │ │ │ └── regenerator-runtime@0.11.1
  │ │ ├── babel-template@6.26.0
  │ │ ├─┬ babel-traverse@6.26.0
  │ │ │ ├─┬ debug@2.6.9
  │ │ │ │ └── ms@2.0.0
  │ │ │ ├── globals@9.18.0
  │ │ │ └─┬ invariant@2.2.4
  │ │ │   └── loose-envify@1.4.0
  │ │ ├─┬ babel-types@6.26.0
  │ │ │ └── to-fast-properties@1.0.3
  │ │ ├── babylon@6.18.0
  │ │ ├── convert-source-map@1.6.0
  │ │ ├─┬ debug@2.6.9
  │ │ │ └── ms@2.0.0
  │ │ ├── json5@0.5.1
  │ │ ├── lodash@4.17.11
  │ │ ├── private@0.1.8
  │ │ └── slash@1.0.0
  │ ├── babel-plugin-transform-cjs-system-wrapper@0.3.0
  │ ├─┬ babel-plugin-transform-es2015-modules-systemjs@6.24.1
  │ │ └── babel-helper-hoist-variables@6.24.1
  │ ├── babel-plugin-transform-global-system-wrapper@0.0.1
  │ ├── babel-plugin-transform-system-register@0.0.1
  │ ├── bluebird@3.5.3
  │ ├── data-uri-to-buffer@0.0.4
  │ ├─┬ es6-template-strings@2.0.1
  │ │ ├─┬ es5-ext@0.10.46
  │ │ │ ├── es6-iterator@2.0.3
  │ │ │ ├── es6-symbol@3.1.1
  │ │ │ └── next-tick@1.0.0
  │ │ └─┬ esniff@1.1.0
  │ │   └── d@1.0.0
  │ ├── glob@7.1.3
  │ ├─┬ rollup@0.36.4
  │ │ └── source-map-support@0.4.18
  │ ├── source-map@0.5.7
  │ └─┬ uglify-js@2.7.5
  │   └── async@0.2.10
  ├─┬ traceur@0.0.105
  │ ├─┬ commander@2.9.0
  │ │ └── graceful-readlink@1.0.1
  │ ├── glob@5.0.15
  │ ├── semver@4.3.6
  │ └─┬ source-map-support@0.2.10
  │   └─┬ source-map@0.1.32
  │     └── amdefine@1.0.1
  └─┬ uglify-js@2.8.29
    ├── uglify-to-browserify@1.0.2
    └─┬ yargs@3.10.0
      ├── camelcase@1.2.1
      ├─┬ cliui@2.1.0
      │ ├─┬ center-align@0.1.3
      │ │ ├─┬ align-text@0.1.4
      │ │ │ ├─┬ kind-of@3.2.2
      │ │ │ │ └── is-buffer@1.1.6
      │ │ │ └── longest@1.0.1
      │ │ └── lazy-cache@1.0.4
      │ ├── right-align@0.1.3
      │ └── wordwrap@0.0.2
      └── window-size@0.1.0

Файл package.json после установки jspm:

{
  "name": "electron-seed",
  "description": "Seed project for electron apps.",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gusenov/electron-seed.git"
  },
  "homepage": "https://github.com/gusenov/electron-seed#readme",
  "license": "MIT",
  "devDependencies": {
    "electron": "^4.0.0",
    "jspm": "^0.16.53"
  }
}

Шаг № 6

Инициализация jspm:

./node_modules/.bin/jspm init

Would you like jspm to prefix the jspm package.json properties under jspm? [yes]:
Enter server baseURL (public folder path) [./]:
Enter jspm packages folder [./jspm_packages]:
Enter config file path [./config.js]:
Configuration file config.js doesn't exist, create it? [yes]:
Enter client baseURL (public folder URL) [/]:
Do you wish to use a transpiler? [yes]:
Which ES6 transpiler would you like to use, Babel, TypeScript or Traceur? [babel]:
ok   Verified package.json at package.json
     Verified config file at config.js
     Looking up loader files...
       system.js
       system.src.js
       system.js.map
       system-csp-production.js
       system-csp-production.js.map
       system-polyfills.js
       system-csp-production.src.js
       system-polyfills.js.map
       system-polyfills.src.js

     Using loader versions:
       systemjs@0.19.46
     Looking up npm:babel-core
     Looking up npm:babel-runtime
     Looking up npm:core-js
     Creating registry cache...
     Downloading npm:core-js@1.2.7
     Downloading npm:babel-runtime@5.8.38
     Downloading npm:babel-core@5.8.38
     Looking up github:jspm/nodelibs-process
ok   Installed babel as npm:babel-core@^5.8.24 (5.8.38)
     Downloading github:jspm/nodelibs-process@0.1.2
     Looking up npm:process
     Downloading npm:process@0.11.10
     Looking up github:jspm/nodelibs-path
     Looking up github:jspm/nodelibs-fs
     Looking up github:systemjs/plugin-json
ok   Installed npm:process@^0.11.0 (0.11.10)
ok   Installed github:jspm/nodelibs-process@^0.1.0 (0.1.2)
     Looking up github:jspm/nodelibs-vm
     Downloading github:systemjs/plugin-json@0.1.2
     Downloading github:jspm/nodelibs-path@0.1.0
     Downloading github:jspm/nodelibs-fs@0.1.2
     Looking up github:jspm/nodelibs-assert
     Looking up npm:path-browserify
     Downloading github:jspm/nodelibs-vm@0.1.0
     Downloading github:jspm/nodelibs-assert@0.1.0
     Downloading npm:path-browserify@0.0.0
ok   Installed npm:path-browserify@0.0.0 (0.0.0)
     Looking up npm:vm-browserify
     Looking up npm:assert
     Downloading npm:assert@1.4.1
     Looking up npm:util
ok   Installed github:jspm/nodelibs-fs@^0.1.0 (0.1.2)
ok   Installed github:systemjs/plugin-json@^0.1.0 (0.1.2)
ok   Installed github:jspm/nodelibs-path@^0.1.0 (0.1.0)
     Downloading npm:vm-browserify@0.0.4
     Looking up npm:indexof
     Downloading npm:util@0.10.3
     Looking up npm:inherits
ok   Installed npm:assert@^1.3.0 (1.4.1)
     Downloading npm:indexof@0.0.1
     Downloading npm:inherits@2.0.1
ok   Installed npm:vm-browserify@0.0.4 (0.0.4)
ok   Installed npm:util@0.10.3 (0.10.3)
ok   Installed github:jspm/nodelibs-vm@^0.1.0 (0.1.0)
ok   Installed github:jspm/nodelibs-assert@^0.1.0 (0.1.0)
ok   Installed npm:indexof@0.0.1 (0.0.1)
ok   Installed npm:inherits@2.0.1 (2.0.1)
     Looking up github:jspm/nodelibs-util
     Downloading github:jspm/nodelibs-util@0.1.0
ok   Installed github:jspm/nodelibs-util@^0.1.0 (0.1.0)
     Looking up github:jspm/nodelibs-buffer
     Downloading github:jspm/nodelibs-buffer@0.1.1
     Looking up npm:buffer
     Downloading npm:buffer@5.2.1
     Looking up npm:base64-js
     Looking up npm:ieee754
     Downloading npm:base64-js@1.3.0
ok   Installed github:jspm/nodelibs-buffer@^0.1.0 (0.1.1)
     Downloading npm:ieee754@1.1.12
ok   Installed npm:buffer@^5.0.6 (5.2.1)
ok   Installed npm:base64-js@^1.0.2 (1.3.0)
ok   Installed npm:ieee754@^1.1.4 (1.1.12)
ok   Installed babel-runtime as npm:babel-runtime@^5.8.24 (5.8.38)
ok   Installed core-js as npm:core-js@^1.1.4 (1.2.7)

     The following new package versions were substituted by install deduping:

       util 0.10.4 -> 0.10.3

ok   Loader files downloaded successfully

Файл package.json после инициализации jspm:

{
  "name": "electron-seed",
  "description": "Seed project for electron apps.",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gusenov/electron-seed.git"
  },
  "homepage": "https://github.com/gusenov/electron-seed#readme",
  "license": "MIT",
  "devDependencies": {
    "electron": "^4.0.0",
    "jspm": "^0.16.53"
  },
  "jspm": {
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}

Файл config.js после инициализации jspm:

System.config({
  baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "babel",
  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system"
    ]
  },
  paths: {
    "github:*": "jspm_packages/github/*",
    "npm:*": "jspm_packages/npm/*"
  },

  map: {
    "babel": "npm:babel-core@5.8.38",
    "babel-runtime": "npm:babel-runtime@5.8.38",
    "core-js": "npm:core-js@1.2.7",
    "github:jspm/nodelibs-assert@0.1.0": {
      "assert": "npm:assert@1.4.1"
    },
    "github:jspm/nodelibs-buffer@0.1.1": {
      "buffer": "npm:buffer@5.2.1"
    },
    "github:jspm/nodelibs-path@0.1.0": {
      "path-browserify": "npm:path-browserify@0.0.0"
    },
    "github:jspm/nodelibs-process@0.1.2": {
      "process": "npm:process@0.11.10"
    },
    "github:jspm/nodelibs-util@0.1.0": {
      "util": "npm:util@0.10.3"
    },
    "github:jspm/nodelibs-vm@0.1.0": {
      "vm-browserify": "npm:vm-browserify@0.0.4"
    },
    "npm:assert@1.4.1": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "buffer": "github:jspm/nodelibs-buffer@0.1.1",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "util": "npm:util@0.10.3"
    },
    "npm:babel-runtime@5.8.38": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:buffer@5.2.1": {
      "base64-js": "npm:base64-js@1.3.0",
      "ieee754": "npm:ieee754@1.1.12"
    },
    "npm:core-js@1.2.7": {
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "systemjs-json": "github:systemjs/plugin-json@0.1.2"
    },
    "npm:inherits@2.0.1": {
      "util": "github:jspm/nodelibs-util@0.1.0"
    },
    "npm:path-browserify@0.0.0": {
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:process@0.11.10": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "vm": "github:jspm/nodelibs-vm@0.1.0"
    },
    "npm:util@0.10.3": {
      "inherits": "npm:inherits@2.0.1",
      "process": "github:jspm/nodelibs-process@0.1.2"
    },
    "npm:vm-browserify@0.0.4": {
      "indexof": "npm:indexof@0.0.1"
    }
  }
});

Шаг № 7

Патч конфигурации jspm:

sed -i -e 's|"github:\*": "jspm_packages/github/\*"|"github:\*": "\./jspm_packages/github/\*"|g' "config.js"
sed -i -e 's|"npm:\*": "jspm_packages/npm/\*"|"npm:\*": "\./jspm_packages/npm/\*"|g' "config.js"

Т.е. замена в файле config.js строк:

"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"

на:

"github:*": "./jspm_packages/github/*",
"npm:*": "./jspm_packages/npm/*"

Шаг № 8

Добавление скрипта в package.json, который запустится единственным главным процессом.

Файл package.json:

{
  "name": "electron-seed",
  "description": "Seed project for electron apps.",
  "main": "main.js",
  "version": "0.1.0",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/gusenov/electron-seed.git"
  },
  "homepage": "https://github.com/gusenov/electron-seed#readme",
  "license": "MIT",
  "devDependencies": {
    "electron": "^4.0.0",
    "jspm": "^0.16.53"
  },
  "jspm": {
    "devDependencies": {
      "babel": "npm:babel-core@^5.8.24",
      "babel-runtime": "npm:babel-runtime@^5.8.24",
      "core-js": "npm:core-js@^1.1.4"
    }
  }
}

Скрипт запускаемый единственным главным процессом может отображать GUI и создавать веб-страницы:

Файл main.js:

const { app, BrowserWindow } = require('electron')

// Глобальная ссылка для удержания объекта окна, иначе окно автоматически закроется,
// когда JavaScript-объект утилизируется сборщиком мусора:
let win

function createWindow () {
  // Создать окно браузера:
  win = new BrowserWindow({ width: 800, height: 600 })

  // Загрузить index.html в созданное окно браузера:
  win.loadFile('index.html')

  // Открыть DevTools:
  win.webContents.openDevTools()

  // Обработчик закрытия окна браузера:
  win.on('closed', () => {
    // Если приложение поддерживает несколько окон, то нужно хранить их в массиве.
    // Здесь же нужно удалять соответствующие элементы:

    // Удаление ссылки на объект окна:
    win = null
  })
}

// Этот метод будет вызван после того как Electron завершит инициализацию
// и будет готов создать окна браузера
// (некоторые API могут использоваться только после того как произойдёт это событие):
app.on('ready', createWindow)

// Выйти, когда все окна закрылись:
app.on('window-all-closed', () => {
  // На macOS приложение и его меню должно оставаться активным
  // до тех пор пока пользователь не выйдет из приложения явно нажатием Cmd + Q:
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // На macOS нужно пересоздавать окно приложения,
  // когда нажат значок приложения на панели и нет других открытых окон:
  if (win === null) {
    createWindow()
  }
})

// В этот файл можно включить оставшуюся часть кода приложения,
// который должен выполняться в единственном главном процессе.
// Можно также разместить его в отдельных файлах, а здесь запросить.

Electron использует мультипроцессную архитектуру Chromium для отображения веб-страниц. Каждая веб-страница работает в собственном процессе, который называется рендерингом. В обыкновенных браузерах, веб-страницы запускаются в песочницах и не могут получить доступ к нативным ресурсам. Но в Electron на веб-страницах пользователям доступен Node.js API, который позволяет низкоуровневое взаимодействие с ОС.

Файл index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Здравствуй, мир!</title>
  </head>
  <body>
    <h1>Здравствуй, мир!</h1>
    Используется Node.js <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    и Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Шаг № 9

Подключение ES6-транспайлера в файле index.html:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Здравствуй, мир!</title>

    <script src="jspm_packages/system.js"></script>
    <script src="config.js"></script>
    <script>
      System.import('./lib/main.js');
    </script>

  </head>
  <body>
    <h1>Здравствуй, мир!</h1>
    Используется Node.js <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    и Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Примеры:

lib/main.js:

import { Point } from './Point.js';
import { ColorPoint } from './ColorPoint.js';

const firstPoint = new Point(2, 10)
console.log('Первая точка: ' + firstPoint)

let colorPoint = new ColorPoint(2, 10, 'green')
console.log('Вторая точка: ' + colorPoint)

colorPoint = ColorPoint.default()
console.log('Цветная точка по умолчанию: ' + colorPoint)

lib/Point.js:

export class Point {

  constructor(x, y) {
    this.x = x
    this.y = y
  }

  toString() {
    return '[X=' + this.x + ', Y=' + this.y + ']'
  }

}

lib/ColorPoint.js:

import { Point } from './Point.js';

export class ColorPoint extends Point {

    static default() {
        return new ColorPoint(0, 0, 'black')
    }

    constructor(x = 0, y = 0, color = 'white') {
        super(x, y)
        this.color = color
    }

    toString() {
        return '[X=' + this.x + ', Y=' + this.y + ', color=' + this.color + ']'
    }

}

Шаг № 10

Запуск приложения:

./node_modules/.bin/electron .