将前端文件打包成 electron 桌面端应用

前言

由于最近安排给我一个桌面端应用的工作，很长时间没有搞桌面端了，有些生疏，所以决定复习一下知识并整理下过程。进入正文吧！

正文

1、初始化 node 项目，生成 package.json 文件

使用命令 npm init
复制代码

//package.json文件
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
复制代码

2、安装electron 依赖到项目中, 使用以下任意命令：

npm install --save-dev electron
cnpm install --save-dev electron
yarn add electron --dev
复制代码

3、package.json配置内容如下：

{
  "name": "electron",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^17.1.2"
  }
}
复制代码

4、创建前端项目或引入前端项目, 项目目录为以下结构：

--main.js
--preload.js
--index.html
--package.json
复制代码

5、参考官网，创建main.js入口文件，配置以下内容：

// main.js
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
function createWindow () {   
  // 隐藏菜单栏
  Menu.setApplicationMenu(null)
  // 创建浏览器窗口
  const win = new BrowserWindow({
    //width: 800,   //窗口宽度,单位像素. 默认是 800
    //height: 600,  //窗口高度,单位像素. 默认是 600
    icon: './logo.ico', // 设置窗口左上角的图标
    show: false, //窗口创建的时候是否显示. 默认为 true
    webPreferences: {
      nodeIntegration: true, // 是否完整支持node。默认为 true
      preload: path.join(__dirname, 'preload.js')  //界面的其它脚本运行之
      前预先加载一个指定脚本。
    }
  })
  // 下面这两行代码配合上面 new BrowserWindow 里面的 show: false，可以实现打开时窗口最大化
  win.maximize()
  win.show()
  // 并且为你的应用加载index.html
  win.loadFile('index.html')
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)
// 当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // 在macOS上，当单击dock图标并且没有其他窗口打开时，
  // 通常在应用程序中重新创建一个窗口。
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
复制代码

6、创建preload.js，所有Node.js API都可以在预加载过程中使用配置以下内容：

// preload.js
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }
  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})
复制代码

7、创建index.html文件，和main.js中生命的win.loadFile('index.html')一致

8、运行命令 npm start ，可快速打开你的web应用，查看应用配置的内容是否正确。

9、安装打包依赖，推荐以下两种方式：electron-packager 和 electron-builder

一、electron-packager

①使用electron-packager打包，安装electron-packager依赖，以下任意一种安装即可：

npm install --save-dev electron-packager
cnpm install --save-dev electron-packager
yarn add electron --dev
复制代码

②安装成功后需要配置package.json文件，配置如下：

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 'app' --platform=win32 --arch=x64 --out=./build --electron-version 9.0.2 --app-version 1.0.0 --overwrite --icon=./logo.ico"
  },
复制代码

packager参数介绍：

- platform：设置平台，window，linux还是Mac
- arch：x84还是x64，
- outapp的位置可以替换成你打包后的exe名字
- electron-version：electron的版本，必须要指定，这里设置为1.6.2，可查看package.json中electron安装的版本号
- icon 图标地址
复制代码

③执行命令 npm run packager，运行成功后就会在项目根目录中看到build文件，运行exe文件就可以看到打包后的项目了。

二、electron-builder

①使用electron-builder打包，安装electron-builder依赖，以下任意一种安装即可：

npm install  electron-builder --save-dev
cnpm install  electron-builder --save-dev
yarn add electron-builder --dev
复制代码

②安装成功后需要配置package.json文件，配置如下：

{
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "electron .",
    "build": "electron-builder --win --x64"
  },
 // 使用electron-builder打包需要配置"build"
 "build": {
      "productName":"xxxx",   // 项目名称
      "appId": "electron.app",  // 安装包名称
      "directories": { 			
        "output": "build"
      }, // 输出文件夹
      "copyright":"xxxx", // 版权信息
      "nsis": {	//nsis相关配置，打包方式为nsis时生效
        "oneClick": false, 				// 是否一键安装
        "allowElevation": true, 			// 允许请求提升，如果为false，则用户必须使用提升的权限重新启动安装程序。
        "allowToChangeInstallationDirectory": true, 	// 允许修改安装目录
        "installerIcon": "./build/icons/aaa.ico",	// 安装图标
        "uninstallerIcon": "./build/icons/bbb.ico",	// 卸载图标
        "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
        "createDesktopShortcut": true, 			// 创建桌面图标
        "createStartMenuShortcut": true,		// 创建开始菜单图标
        "shortcutName": "xxxx", 			// 图标名称
        "include": "build/script/installer.nsh", 	// 包含的自定义nsis脚本
      },
      // 发布到github
      publish: {
        provider: 'github',
        repo: 'xxxx', // git仓库
        owner: 'xxxx', // 拥有者
        token: 'xxxxxxxxxxxxxxx', // gitToken
        releaseType: 'release',
        publishAutoUpdate: true // 发布自动更新（需要配置GH_TOKEN）。 默认true
      },
      //配置windows环境
      "win": {
        "icon": "build/icons/aims.ico",
        "target": ["nsis","zip"]
      },
      //配置mac环境
      "mac": {
        "target": ["dmg","zip"]
      },
      //配置linux环境
      "linux": {
        "icon": "build/icons"
      }
  }
}
//来自：https://segmentfault.com/a/1190000016695922?utm_source=tag-newest
复制代码

③执行命令 npm run build，运行成功后就会在项目根目录中看到build文件，运行exe文件就可以看到打包后的项目了。

一个简单的桌面端应用就生成了。

总结

本文只是简单的讲解了一下electron的安装过程并成功打包成桌面端应用，还有很多深入的东西没有展示，日后平头哥会继续分享详细内容。