electron 生成项目及打包

一. 准备工作

1. 首先，我们要安装electron-prebuilt，它是一个npm模块，因此我们可以使用Npm来进行安装，它是一个electron的预编译版本。

npm install -g electron-prebuilt

2. 接下来安装electron-packager ，它也是一个npm模块，是一个用于打包electron应用的工具，具体使用方法我们稍后会详细说明。

npm install -g electron-packager

二. 创建一个应用

创建一个electron应用。我们现在仅仅需要3个文件。

index.html
main.js
package.json

index.html使我们想要显示的页面，main.js为此应用的入口，package.json为npm项目的配置文件。

1.新建一个名为myApp的文件夹

2.进入项目目录进行初始化

npm init

3.新建一个package.json，内容如下：

{
"name": "electrons",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"package": "electron-packager . electronApp --win --out ./ElectronApp --arch=x64 --electron-version=1.4.13"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron-builder": "^23.6.0"
}
}

4.新建一个index.html, 内容如下：

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World! guixinl</h1>
We are using io.js <script>document.write(process.version)</script>
and Electron <script>document.write(process.versions['electron'])</script>.
</body>
</html>

5. 新建一个main.js, 内容如下：

const {app, BrowserWindow} = require('electron');
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({width: 800, height: 600});

// 加载应用的 index.html
mainWindow.loadURL('file://' + __dirname + '/index.html');

// 打开开发工具
mainWindow.openDevTools();

// 当 window 被关闭，这个事件会被触发
mainWindow.on('closed', function() {
// 取消引用 window 对象，如果你的应用支持多窗口的话，
// 通常会把多个 window 对象存放在一个数组里面，
// 但这次不是。
mainWindow = null;
});
});

三. 运行

现在只要在myApp目录下执行npm start 就可以运行了