30分でelectronをはじめる
11626 ワード
はじめに
electronでhello worldを表示させる(linux環境)
環境
hibi221b@hibi221b:~$ uname -a
Linux hibi221b 4.15.0-38-generic #41-Ubuntu SMP Wed Oct 10 10:59:38 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux
node.js npm
Ubuntuに最新のNode.jsを難なくインストールする
@seibeさん、ありがとうございます。
hibi221b@hibi221b:~$ sudo apt-get install -y nodejs npm
...
...
hibi221b@hibi221b:~$ sudo npm cache clean
hibi221b@hibi221b:~$ sudo npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
/usr/local/lib
└── [email protected]
hibi221b@hibi221b:~$ sudo n stable
install : node-v11.0.0
mkdir : /usr/local/n/versions/node/11.0.0
fetch : https://nodejs.org/dist/v11.0.0/node-v11.0.0-linux-x64.tar.gz
installed : v11.0.0
hibi221b@hibi221b:~$ sudo ln -sf /usr/local/bin/node /usr/bin/node
hibi221b@hibi221b:~$ node -v
v11.0.0
hibi221b@hibi221b:~$ sudo apt-get purge -y nodejs npm
...
...
hibi221b@hibi221b:~$ node -v
v11.0.0
hibi221b@hibi221b:~$ npm -v
6.4.1
electronのインストール
- 作業ディレクトリを作る
hibi221b@hibi221b:~$ mkdir electron_app
hibi221b@hibi221b:~$ cd electron_app/
hibi221b@hibi221b:~/electron_app$ mkdir hello_world
hibi221b@hibi221b:~/electron_app$ cd hello_world/
hibi221b@hibi221b:~/electron_app/hello_world$ node -v
v11.0.0
hibi221b@hibi221b:~/electron_app/hello_world$ npm -v
6.4.1
npm install --save-dev electronnpm init -y
- npm init -y でpackage.jsonを作成して、各種設定してからのnpm install —save-dev electronを行った方が良いです
hibi221b@hibi221b:~/electron_app/hello_world$ npm install --save-dev electron
> [email protected] postinstall /home/hibi221b/electron_app/hello_world/node_modules/electron
> node install.js
Downloading tmp-5140-1-SHASUMS256.txt-3.0.7
[============================================>] 100.0% of 4.74 kB (4.74 kB/s)
npm WARN saveError ENOENT: no such file or directory, open '/home/hibi221b/electron_app/hello_world/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/hibi221b/electron_app/hello_world/package.json'
npm WARN hello_world No description
npm WARN hello_world No repository field.
npm WARN hello_world No README data
npm WARN hello_world No license field.
+ [email protected]
added 144 packages from 125 contributors and audited 200 packages in 81.289s
found 0 vulnerabilities
hibi221b@hibi221b:~/electron_app/hello_world$ ls
node_modules package-lock.json
hibi221b@hibi221b:~/electron_app/hello_world$ npm init -y
Wrote to /home/hibi221b/electron_app/hello_world/package.json:
{
"name": "hello_world",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"electron": "^3.0.7"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
hibi221b@hibi221b:~/electron_app/hello_world$ ls
node_modules package-lock.json package.json
hibi221b@hibi221b:~/electron_app/hello_world$
- package.jsonの設定
package.json
{
"name": "hello_world",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"electron": "^3.0.7"
},
"devDependencies": {},
"scripts": {
"start": "electron ."
},
"keywords": [],
"author": "hibi221b",
"license": "MIT"
}
main.js , index.html
main.js
const electron = require('electron');
const url = require('url');
const path = require('path');
const {app, BrowserWindow} = electron;
let mainWindow;
app.on('window-all-closed', function() {
if(process.platform !== 'darwin') {
app.quit();
};
});
app.on('ready', function() {
mainWindow = new BrowserWindow({});
// file://dirname/index.html
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file',
slashes: true
}));
mainWindow.on('closed', function() {
app.quit();
});
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>hello world</title>
</head>
<body>
<h1>hello world</h1>
</body>
</html>
hibi221b@hibi221b:~$ cd electron_app/
hibi221b@hibi221b:~/electron_app$ cd hello_world/
hibi221b@hibi221b:~/electron_app/hello_world$ ls
index.html main.js node_modules package-lock.json package.json
npm start
hibi221b@hibi221b:~/electron_app/hello_world$ npm start
> [email protected] start /home/hibi221b/electron_app/hello_world
> electron .
Author And Source
この問題について(30分でelectronをはじめる), 我々は、より多くの情報をここで見つけました https://qiita.com/hibi221b/items/10d3b4958f18a33334ef著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .