Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/gusenov/electron-seed

Создание Electron-приложения на ECMAScript 6.
https://github.com/gusenov/electron-seed
babel electron es6 jspm seed-project
Last synced: 3 days ago
JSON representation
Создание Electron-приложения на ECMAScript 6.
Host: GitHub
URL: https://github.com/gusenov/electron-seed
Owner: gusenov
License: mit
Created: 2018-12-25T10:23:23.000Z (about 6 years ago)
Default Branch: master
Last Pushed: 2021-12-25T20:29:53.000Z (about 3 years ago)
Last Synced: 2024-11-08T06:44:02.795Z (about 2 months ago)
Topics: babel, electron, es6, jspm, seed-project
Language: JavaScript
Homepage: https://electronjs.org/
Size: 136 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project

README

        * [Шаг № 1 - Установка npm и Node.js](#%D1%88%D0%B0%D0%B3--1)

* [Шаг № 2 - Загрузка .gitignore для Node.js](#%D1%88%D0%B0%D0%B3--2)

* [Шаг № 3 - Создание файла package.json](#%D1%88%D0%B0%D0%B3--3)

* [Шаг № 4 - Установка Electron](#%D1%88%D0%B0%D0%B3--4)

* [Шаг № 5 - Установка jspm (нужно для ES6-транспайлера)](#%D1%88%D0%B0%D0%B3--5)

* [Шаг № 6 - Инициализация jspm](#%D1%88%D0%B0%D0%B3--6)

* [Шаг № 7 - Патч конфигурации jspm](#%D1%88%D0%B0%D0%B3--7)

* [Шаг № 8 - Добавление скрипта запускаемого главным процессом](#%D1%88%D0%B0%D0%B3--8)

* [Шаг № 9 - Подключение ES6-транспайлера в файле index.html](#%D1%88%D0%B0%D0%B3--9)

* [Шаг № 10 - Запуск Electron-приложения](#%D1%88%D0%B0%D0%B3--10)

# Шаг № 1

Установка [npm](https://www.npmjs.com/) и [Node.js](https://nodejs.org/en/):

```bash

$ sudo apt-get install npm

$ sudo apt-get install nodejs-legacy

```

# [Шаг № 2](https://github.com/gusenov/electron-seed/commit/b25052462dd10819b8be61c4ae13a35338dd70e7)

Загрузка [.gitignore для Node.js](https://github.com/github/gitignore/blob/master/Node.gitignore):

```bash

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

```

# [Шаг № 3](https://github.com/gusenov/electron-seed/commit/463752d26cc1de0e8690d38e1bbb2e7f5a9a21fa)

Создание файла [package.json](https://github.com/gusenov/electron-seed/blob/463752d26cc1de0e8690d38e1bbb2e7f5a9a21fa/package.json):

```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](https://github.com/gusenov/electron-seed/commit/8fe874100e7a1cb1bcc273ebbc9b0de697b7c710)

Установка [Electron](https://electronjs.org/):

```bash

$ npm install electron --save-dev

> [email protected] postinstall /home/abbas/electron-seed/node_modules/electron

> node install.js

[email protected] /home/abbas/electron-seed

└─┬ [email protected]

  ├── @types/[email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ └── [email protected]

  │ │ │   ├── [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ ├─┬ [email protected]

  │ │ │   │ │ └── [email protected]

  │ │ │   │ └── [email protected]

  │ │ │   ├── [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ ├── [email protected]

  │ │ │   │ ├─┬ [email protected]

  │ │ │   │ │ └── [email protected]

  │ │ │   │ └─┬ [email protected]

  │ │ │   │   ├─┬ [email protected]

  │ │ │   │   │ └── [email protected]

  │ │ │   │   └─┬ [email protected]

  │ │ │   │     └── [email protected]

  │ │ │   ├── [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ ├─┬ [email protected]

  │ │ │   │ │ ├── [email protected]

  │ │ │   │ │ └─┬ [email protected]

  │ │ │   │ │   └── [email protected]

  │ │ │   │ └─┬ [email protected]

  │ │ │   │   ├─┬ [email protected]

  │ │ │   │   │ ├─┬ [email protected]

  │ │ │   │   │ │ └─┬ [email protected]

  │ │ │   │   │ │   └── [email protected]

  │ │ │   │   │ ├── [email protected]

  │ │ │   │   │ └─┬ [email protected]

  │ │ │   │   │   └── [email protected]

  │ │ │   │   └── [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ ├─┬ [email protected]

  │ │ │   │ │ └─┬ [email protected]

  │ │ │   │ │   └── [email protected]

  │ │ │   │ └── [email protected]

  │ │ │   └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ ├── [email protected]

  │ │ │   │ └── [email protected]

  │ │ │   └─┬ [email protected]

  │ │ │     └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │   └── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ └─┬ [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   ├── [email protected]

  │ │ │   ├─┬ [email protected]

  │ │ │   │ └── [email protected]

  │ │ │   └─┬ [email protected]

  │ │ │     └── [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ └─┬ [email protected]

  │   └─┬ [email protected]

  │     └── [email protected]

  └─┬ [email protected]

    ├─┬ [email protected]

    │ ├── [email protected]

    │ ├── [email protected]

    │ ├─┬ [email protected]

    │ │ ├── [email protected]

    │ │ ├── [email protected]

    │ │ ├── [email protected]

    │ │ ├── [email protected]

    │ │ └── [email protected]

    │ └── [email protected]

    ├─┬ [email protected]

    │ └── [email protected]

    ├─┬ [email protected]

    │ └── [email protected]

    └─┬ [email protected]

      └─┬ [email protected]

        └── [email protected]

```

Файл [package.json](https://github.com/gusenov/electron-seed/blob/8fe874100e7a1cb1bcc273ebbc9b0de697b7c710/package.json) после установки [Electron](https://electronjs.org/):

```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",

  "devDependencies": {

    "electron": "^4.0.0"

  }

}

```

# [Шаг № 5](https://github.com/gusenov/electron-seed/commit/5d59aabc393e3824d076593d08e91e08fb35aabd)

Установка [jspm](https://jspm.org/):

```bash

$ npm install jspm --save-dev

[email protected] /home/abbas/electron-seed

├─┬ [email protected]

│ ├─┬ [email protected]

│ │ ├─┬ [email protected]

│ │ │ └─┬ [email protected]

│ │ │   └── [email protected]

│ │ └─┬ [email protected]

│ │   └─┬ [email protected]

│ │     └── [email protected]

│ └─┬ [email protected]

│   ├─┬ [email protected]

│   │ └─┬ [email protected]

│   │   └── [email protected]

│   └─┬ [email protected]

│     └── [email protected]

└─┬ [email protected]

  ├─┬ [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ └── [email protected]

  ├── [email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ ├── [email protected]

  │ │ └── [email protected]

  │ └─┬ [email protected]

  │   └── [email protected]

  ├─┬ [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ ├── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │   ├── [email protected]

  │ │ │ │ │ │   ├── [email protected]

  │ │ │ │ │ │   └── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └─┬ [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   ├── [email protected]

  │ │ │ │   └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │   ├── [email protected]

  │ │ │ │ │   ├── [email protected]

  │ │ │ │ │   └── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ └── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └─┬ [email protected]

  │ │ │ │   └── [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ │ │ └── [email protected]

  │ │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │ │   └── [email protected]

  │ │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ │ └── [email protected]

  │ │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │ │   └── [email protected]

  │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │   └─┬ [email protected]

  │ │ │ │ │ │     ├── [email protected]

  │ │ │ │ │ │     └─┬ [email protected]

  │ │ │ │ │ │       └── [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │   ├── [email protected]

  │ │ │ │ │ │   └─┬ [email protected]

  │ │ │ │ │ │     ├── [email protected]

  │ │ │ │ │ │     └── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │ │   ├── [email protected]

  │ │ │ │ │ │   ├── [email protected]

  │ │ │ │ │ │   └── [email protected]

  │ │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ │ └── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ └─┬ [email protected]

  │ │ │ │ │   ├── [email protected]

  │ │ │ │ │   ├── [email protected]

  │ │ │ │ │   └── [email protected]

  │ │ │ │ ├── [email protected]

  │ │ │ │ ├─┬ [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ ├── [email protected]

  │ │ │ │ │ └── [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ └── [email protected]

  │ │ └─┬ [email protected]

  │ │   ├── [email protected]

  │ │   └─┬ [email protected]

  │ │     └─┬ [email protected]

  │ │       └── [email protected]

  │ ├─┬ [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ ├── [email protected]

  │ │ └─┬ [email protected]

  │ │   ├─┬ [email protected]

  │ │   │ └─┬ [email protected]

  │ │   │   └─┬ [email protected]

  │ │   │     └── [email protected]

  │ │   ├── [email protected]

  │ │   └─┬ [email protected]

  │ │     └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├─┬ [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └── [email protected]

  │ │ └─┬ [email protected]

  │ │   └── [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ └─┬ [email protected]

  │   ├── [email protected]

  │   └── [email protected]

  ├── [email protected]

  ├─┬ [email protected]

  │ ├── [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ └─┬ [email protected]

  │   └── [email protected]

  ├── [email protected]

  ├─┬ [email protected]

  │ └── [email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ ├── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├─┬ [email protected]

  │ │ │ │ └── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └─┬ [email protected]

  │ │ │   └── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └── [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ └── [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ ├── [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ ├─┬ [email protected]

  │ │ │ ├── [email protected]

  │ │ │ ├── [email protected]

  │ │ │ └── [email protected]

  │ │ └─┬ [email protected]

  │ │   └── [email protected]

  │ ├── [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ └─┬ [email protected]

  │   └── [email protected]

  ├─┬ [email protected]

  │ ├─┬ [email protected]

  │ │ └── [email protected]

  │ ├── [email protected]

  │ ├── [email protected]

  │ └─┬ [email protected]

  │   └─┬ [email protected]

  │     └── [email protected]

  └─┬ [email protected]

    ├── [email protected]

    └─┬ [email protected]

      ├── [email protected]

      ├─┬ [email protected]

      │ ├─┬ [email protected]

      │ │ ├─┬ [email protected]

      │ │ │ ├─┬ [email protected]

      │ │ │ │ └── [email protected]

      │ │ │ └── [email protected]

      │ │ └── [email protected]

      │ ├── [email protected]

      │ └── [email protected]

      └── [email protected]

```

Файл [package.json](https://github.com/gusenov/electron-seed/blob/5d59aabc393e3824d076593d08e91e08fb35aabd/package.json) после установки [jspm](https://jspm.org/):

```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",

  "devDependencies": {

    "electron": "^4.0.0",

    "jspm": "^0.16.53"

  }

}

```

# [Шаг № 6](https://github.com/gusenov/electron-seed/commit/39cb1fd453e3fc6c07070db1d20b9af7df93f0eb)

Инициализация [jspm](https://jspm.org/):

```bash

./node_modules/.bin/jspm init

```

```text

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:

       [email protected]

     Looking up npm:babel-core

     Looking up npm:babel-runtime

     Looking up npm:core-js

     Creating registry cache...

     Downloading npm:[email protected]

     Downloading npm:[email protected]

     Downloading npm:[email protected]

     Looking up github:jspm/nodelibs-process

ok   Installed babel as npm:babel-core@^5.8.24 (5.8.38)

     Downloading github:jspm/[email protected]

     Looking up npm:process

     Downloading npm:[email protected]

     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/[email protected]

     Downloading github:jspm/[email protected]

     Downloading github:jspm/[email protected]

     Looking up github:jspm/nodelibs-assert

     Looking up npm:path-browserify

     Downloading github:jspm/[email protected]

     Downloading github:jspm/[email protected]

     Downloading npm:[email protected]

ok   Installed npm:[email protected] (0.0.0)

     Looking up npm:vm-browserify

     Looking up npm:assert

     Downloading npm:[email protected]

     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:[email protected]

     Looking up npm:indexof

     Downloading npm:[email protected]

     Looking up npm:inherits

ok   Installed npm:assert@^1.3.0 (1.4.1)

     Downloading npm:[email protected]

     Downloading npm:[email protected]

ok   Installed npm:[email protected] (0.0.4)

ok   Installed npm:[email protected] (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:[email protected] (0.0.1)

ok   Installed npm:[email protected] (2.0.1)

     Looking up github:jspm/nodelibs-util

     Downloading github:jspm/[email protected]

ok   Installed github:jspm/nodelibs-util@^0.1.0 (0.1.0)

     Looking up github:jspm/nodelibs-buffer

     Downloading github:jspm/[email protected]

     Looking up npm:buffer

     Downloading npm:[email protected]

     Looking up npm:base64-js

     Looking up npm:ieee754

     Downloading npm:[email protected]

ok   Installed github:jspm/nodelibs-buffer@^0.1.0 (0.1.1)

     Downloading npm:[email protected]

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](https://github.com/gusenov/electron-seed/blob/39cb1fd453e3fc6c07070db1d20b9af7df93f0eb/package.json) после инициализации [jspm](https://jspm.org/):

```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",

  "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](https://github.com/gusenov/electron-seed/blob/39cb1fd453e3fc6c07070db1d20b9af7df93f0eb/config.js) после инициализации [jspm](https://jspm.org/):

```js

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:[email protected]",

    "babel-runtime": "npm:[email protected]",

    "core-js": "npm:[email protected]",

    "github:jspm/[email protected]": {

      "assert": "npm:[email protected]"

    },

    "github:jspm/[email protected]": {

      "buffer": "npm:[email protected]"

    },

    "github:jspm/[email protected]": {

      "path-browserify": "npm:[email protected]"

    },

    "github:jspm/[email protected]": {

      "process": "npm:[email protected]"

    },

    "github:jspm/[email protected]": {

      "util": "npm:[email protected]"

    },

    "github:jspm/[email protected]": {

      "vm-browserify": "npm:[email protected]"

    },

    "npm:[email protected]": {

      "assert": "github:jspm/[email protected]",

      "buffer": "github:jspm/[email protected]",

      "process": "github:jspm/[email protected]",

      "util": "npm:[email protected]"

    },

    "npm:[email protected]": {

      "process": "github:jspm/[email protected]"

    },

    "npm:[email protected]": {

      "base64-js": "npm:[email protected]",

      "ieee754": "npm:[email protected]"

    },

    "npm:[email protected]": {

      "fs": "github:jspm/[email protected]",

      "path": "github:jspm/[email protected]",

      "process": "github:jspm/[email protected]",

      "systemjs-json": "github:systemjs/[email protected]"

    },

    "npm:[email protected]": {

      "util": "github:jspm/[email protected]"

    },

    "npm:[email protected]": {

      "process": "github:jspm/[email protected]"

    },

    "npm:[email protected]": {

      "assert": "github:jspm/[email protected]",

      "fs": "github:jspm/[email protected]",

      "vm": "github:jspm/[email protected]"

    },

    "npm:[email protected]": {

      "inherits": "npm:[email protected]",

      "process": "github:jspm/[email protected]"

    },

    "npm:[email protected]": {

      "indexof": "npm:[email protected]"

    }

  }

});

```

# [Шаг № 7](https://github.com/gusenov/electron-seed/commit/001cfff1b70180fad534e8c4d91a94b748c3bce3)

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

```bash

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](https://github.com/gusenov/electron-seed/blob/001cfff1b70180fad534e8c4d91a94b748c3bce3/config.js) строк:

```js

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

"npm:*": "jspm_packages/npm/*"

```

на:

```js

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

"npm:*": "./jspm_packages/npm/*"

```

# [Шаг № 8](https://github.com/gusenov/electron-seed/commit/270264593151df2ce93c988716a36e4a19b58174)

Добавление скрипта в [package.json](https://github.com/gusenov/electron-seed/blob/270264593151df2ce93c988716a36e4a19b58174/package.json), который запустится *единственным главным процессом*.

Файл [package.json](https://github.com/gusenov/electron-seed/blob/270264593151df2ce93c988716a36e4a19b58174/package.json):

```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](https://github.com/gusenov/electron-seed/blob/270264593151df2ce93c988716a36e4a19b58174/main.js):

```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](https://github.com/gusenov/electron-seed/blob/270264593151df2ce93c988716a36e4a19b58174/index.html):

```html

  

    

    Здравствуй, мир!

  

  

    
Здравствуй, мир!

    Используется Node.js document.write(process.versions.node),

    Chrome document.write(process.versions.chrome),

    и Electron document.write(process.versions.electron).

  

```

# [Шаг № 9](https://github.com/gusenov/electron-seed/commit/136f406b9e8a590788d419894a918e2a8f99077f)

Подключение ES6-транспайлера в файле [index.html](https://github.com/gusenov/electron-seed/blob/136f406b9e8a590788d419894a918e2a8f99077f/index.html):

```html

  

    

    Здравствуй, мир!

    

    

    

      System.import('./lib/main.js');

    

  

  

    
Здравствуй, мир!

    Используется Node.js document.write(process.versions.node),

    Chrome document.write(process.versions.chrome),

    и Electron document.write(process.versions.electron).

  

```

Примеры:

[lib/main.js](https://github.com/gusenov/electron-seed/blob/136f406b9e8a590788d419894a918e2a8f99077f/lib/main.js):

```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](https://github.com/gusenov/electron-seed/blob/136f406b9e8a590788d419894a918e2a8f99077f/lib/Point.js):

```js

export class Point {

  constructor(x, y) {

    this.x = x

    this.y = y

  }

  toString() {

    return '[X=' + this.x + ', Y=' + this.y + ']'

  }

}

```

[lib/ColorPoint.js](https://github.com/gusenov/electron-seed/blob/136f406b9e8a590788d419894a918e2a8f99077f/lib/ColorPoint.js):

```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

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

```bash

./node_modules/.bin/electron .

```

![Скриншот](screenshot.png)