Electron打包Web程序,部署web端桌面程序(很简单!)
背景:
闲来无事,玩了一下Web程序桌面端打包。感觉挺好玩,随手记录下。
1、安装node环境,node官网 Node.js — Run JavaScript Everywhere (nodejs.org)
Win + R, 调出来cmd命令窗口,输入
node -v
下图返回版本号,证明安装node成功。
没有成功的友友可以看下面这篇文章。
Node.js下载安装及环境配置教程【超详细】_nodejs下载-CSDN博客
2、新建一个文件夹名为test,打开终端或者cmd命令窗口,使用npm init -y 初始化一个package.json文件。
npm init -y
新生成的文件内容如下。
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }
对内容做如下修改
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { // "test": "echo \"Error: no test specified\" && exit 1" //修改前 "start": "electron ." //修改后 }, "keywords": [], "author": "", "license": "ISC" }
3、安装electron
npm install electron --save-dev --verbose
安装完成后,文件内容如下:
4、将自己的web项目(名为webApp)放到test文件夹中。我的web项目是html、css、js三件套写的。如下。
5、新建一个js入口文件,名为index.js。 注意:要与 package.json文件中的 main属性对应的文件名相同!。
根据你的文件路径,进行适当修改(注:下列代码icon属性和pathname属性对应的路径,均替换为你的web项目对应的图标和html路径)
const electron = require('electron'); const app = electron.app; const path = require('path'); const url = require('url'); const BrowserWindow = electron.BrowserWindow; //创建主窗口 app.on('ready', function() { // 创建窗口 mainWindow = new BrowserWindow({ minimizable: true,//最小化 maximizable: true,//最大化 closable: true, movable: true, frame: true,//边框 fullscreen: false,//全屏 titleBarStyle: 'hidden', autoHideMenuBar: true, //图标 icon: path.join(__dirname, '/webApp/icon.png') }); // 最大化窗口 mainWindow.maximize(); // 载入应用的index.html mainWindow.loadURL(url.format({ pathname: path.join(__dirname, '/webApp/index.html'), protocol: 'file:', slashes: true })); // 窗口关闭时触发 mainWindow.on('closed', function() { // 想要取消窗口对象的引用, 如果你的应用支持多窗口,你需要将所有的窗口对象存储到一个数组中,然后在这里删除想对应的元素 mainWindow = null }); });
6、安装electron打包工具
npm install electron-packager -g
7、上述安装完成后,打开之前的package.json文件,在scripts中添加如下代码
{ "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "electron .", //下面这行 "packager":"electron-packager ./ ISCS --platform=win32 --arch=x64 --electron-version=1.8.4 --out --overwrite" //新增 }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "electron": "^29.1.5" } }
每一个属性说明:
./表示当前路径 ISCS :exe应用的名称 platform: 打包平台 darwin, linux, mas, win32或者选择all arch: 可选 ia32, x64, armv7l, arm64或者选择all electron-version: electron的版本() out:生成的exe保存目录 overwrite:添加此属性在每次打包可以直接覆盖原来的exe文件了。
8、运行如下命令进行打包。
npm run-script packager
打包后,生成下图文件ISCS-win32-x64。
找到对应的exe文件,运行即可。
启动成功!