Windows10にフレームワークelectronをインストールする

2021年12月27日

環境
Windows10 64bit
>npm –version
8.3.0
>node –version
v17.0.1

インストールの方法
1.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 init` 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: (user)　　　#全てENTERキーを押下
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
略
Is this OK? (yes)

2.ローカルインストール

>npm install --save-dev electron

3.electronを起動します

>npx electron
Need to install the following packages:
  electron
Ok to proceed? (y) y


Electron 16.0.5 - Build cross platform desktop apps with JavaScript, HTML, and CSS
Usage: electron [options] [path]

A path to an Electron app may be specified. It must be one of the following:
  - index.js file.
  - Folder containing a package.json file.
  - Folder containing an index.js file.
  - .html/.htm file.
  - http://, https://, or file:// URL.

Options:
  -i, --interactive     Open a REPL to the main process.
  -r, --require         Module to preload (option can be repeated).
  -v, --version         Print the version.
  -a, --abi             Print the Node ABI version.
  
xxx\1323dbbc85759269\node_modules\electron\dist\electron.exe path-to-app

4.electronを実行します
index.jsを作成します

"use strct";
 
const electron = require("electron");
 
const app = electron.app;
 
const BrowserWindow = electron.BrowserWindow;
 
let mainWindow = null;
 
app.on("window-all-closed", () => {
  if (process.platform != "darwin") {
    app.quit();
  }
});
 
 
app.on("ready", () => {
 
  mainWindow = new BrowserWindow({width: 1280, height: 720, useContentSize: true});
  mainWindow.loadURL(`file://${__dirname}/index.html`);
  
  mainWindow.on("closed", () => {
    mainWindow = null;
  });
});

index.htmlを作成します

 <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>test</title>
</head>
<body>
  <p>Hello World！888</p>
</body>
</html>

electronを実行します

略>1323dbbc85759269>npx electron .

5.パッケージツールをインストールします

>npm i -D electron-packager
>npx electron-packager . test --platform=win32 --arch=x64 --overwrite
Packaging app for platform win32 x64 using electron v16.0.5
WARNING: Found 'electron' but not as a devDependency, pruning anyway
Wrote new app to C:\Users\USER\AppData\Local\npm-cache\_npx\1323dbbc85759269\test-win32-x64

6.yarnをインストールします

>npm install -g yarn
バージョン確認
>yarn --version
1.22.17

Electron

Posted by arkgame