Windows10にフレームワークelectronをインストールする
環境
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)
>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)
>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
>npm install --save-dev electron
>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
>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
>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;
});
});
"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;
});
});
"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>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<p>Hello World！888</p>
</body>
</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 .
略>1323dbbc85759269>npx 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
>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
>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
>npm install -g yarn
バージョン確認
>yarn --version
1.22.17
>npm install -g yarn バージョン確認 >yarn --version 1.22.17