简介
electron是一个使用HTML、CSS、JavaScript构建跨平台桌面应用的框架。这样的话我们就可以将一个web网页项目打包成桌面应用。
初始化项目
我们可以直接下载github上的electron快速上手项目
git clone https://github.com/electron/electron-quick-start.git
执行包安装
npm install
这样我们就有了一个electron项目
打包时主要通过项目根目录下的main.js构建桌面应用。可以知道该文件mainWindow.loadFile(‘index.html’)是加载index.html
我们只要将需要打包的单页应用文件放置到该项目的根路径下覆盖index.html即可
打包
在项目中安装相关依赖包
npm install electron-winstaller--save-dev //打包成windows安装包需要用的
全局安装electron-packager
npm install electron-packager -g //将网页打包成exe应用
在项目的package.json文件配置一个命令
"scripts": {
"start": "electron .",
"build": "electron-packager . bobo --out ../electron --ignore=node_modules"
}
使用npm run build 构建exe应用。
这样我们就在上一层的electron目录下构建了bobo.exe。点击则可以打开应用。至此已经完成了打包成exe.接下来使用electron-winstaller构建安装包。
在项目根目录下新建build.js文件
//build.js
var electronInstaller = require('electron-winstaller');
var path = require("path");
resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: path.join('../electron/bobo-win32-x64'), //刚才生成打包文件的路径
outputDirectory: path.join('./tmp/build/installer64'), //输出路径
authors: 'My App Inc.',
exe: 'bobo.exe', //在appDirectory寻找exe的名字
setupMsi:'bobo.msi',
noMsi:true
});
resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));
在项目中运行node build.js 即可构建安装包。至此electron的简单使用介绍完毕