Electron项目开发入门＋打包

Electron 可以让你使用纯 JavaScript 调用丰富的原生(操作系统) APIs 来创造桌面应用。你可以把它看作一个 Node. js 的变体，它专注于桌面应用而不是 Web 服务器端。这不意味着 Electron 是某个图形用户界面（GUI）库的 JavaScript 版本。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

初始化项目

从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。与 Node.js 模块相同，应用的入口是package.json文件。一个最基本的 Electron 应用一般来说会有如下的目录结构：

your-app/├── package.json

├── main.js

└── index.html

为你的新Electron应用创建一个新的空文件夹。打开你的命令行工具，然后从该文件夹运行npm init

npm init

如果嫌命令提示确认啰嗦，可以使用选项-y跳过：

npm init -y

npm 会帮助你创建一个基本的package.json文件。其中的main字段所表示的脚本为应用的启动脚本，如果你愿意，main也可以设置为index.js 或者其他，它将会在主进程中执行。如下片段是一个package.json的示例：

{

"name": "your-app",

"version": "0.1.0",

"main": "main.js"}添加Electron引导

"scripts": {

"start": "electron ."}

首先你需要安装electron。我们推荐的安装方法是把它作为你 app 中的开发依赖项，这使你可以在不同的 app 中使用不同的 Electron 版本。在你的app所在文件夹中运行下面的命令：

npm install --save-dev electron

当然，你也可以全局安装electron:

npm install -g electron

接下来，在package.json中增加以下配置项：

"scripts": {

"start": "electron ."}

这样，当在项目根目录下执行npm start时，将会唤起electron来执行main.js。但在这之前我们需要创建main.js和main.html。

一个简易的应用

Electron apps 使用JavaScript开发，其工作原理和方法与Node.js 开发相同。electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样：

const electron = require('electron')

electron模块所提供的功能都是通过命名空间暴露出来的。比如说：electron.app负责管理Electron 应用程序的生命周期，electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口：

const { app, BrowserWindow } = require('electron')function createWindow () {

// 创建浏览器窗口

let win = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

})

// 加载index.html文件

win.loadFile('index.html')}

app.whenReady().then(createWindow)

创建你想展示的index.html：

Hello World!

Hello World!

We are using node document.write(process.versions.node),

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

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

运行应用

在项目根目录下执行命令：

npm start

一个桌面应用就诞生了！

应用打包

这里我们使用electron-packager来进行打包。全局方式下下载安装：

npm install -g electron-packager

在项目根目录执行以下打包命令：

electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64

这里，我们声明项目名称为HelloWorld, 仅打包到Windows 64位平台，打包输出文件为根目录上一级的HelloWorldApp目录。执行后将会输出：

Packaging app for platform win32 x64 using electron v9.0.3Wrote new app to ..\HelloWorldApp\HelloWorld-win32-x64

我们在..\HelloWorldApp\HelloWorld-win32-x64 目录下会发现出现了以下文件：

双击HelloWorld.exe即可运行我们的应用。

因为每次打包都要输入那么长串命令，效率特低，没有一种编程愉悦感，我们可以将打包命名写在package.json文件里。在scripts配置部分加入以下配置：

"package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64"

然后执行以下命令进行打包：

npm run-script package

往期回顾：

MutationObserver: dom变化监听｜给你代码

扩展的上传与更新｜给你代码

你是否像我一样排斥Composer？｜给你代码