Electron+Svelte 开发桌面应用
Electron+Svelte开发桌面应用
1. 工具介绍
2. 创建svelte项目
npx degit sveltejs/template my-svelte-test
npm install
package.json,您将看到sirv-cli仅是生产依赖项。Electron不需要此功能,因此将其移至dev:
npm install sirv-cli --save-dev
public / index.html,将所有的文件链接/
去掉
...
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
变成
...
<link rel='stylesheet' href='build/bundle.css'>
<script defer src='build/bundle.js'></script>
运行测试:
npm run dev
打开http:// localhost:5000,效果如图:
3. 安装Electron
安装依赖:
npm install --save-dev --verbose electron
npm install --save-dev npm-run-all
npm install --save-dev cross-env
创建入口文件 src/electron.js
const { app, BrowserWindow } = require('electron');
const path = require('path')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
function createWindow() {
const mode = process.env.NODE_ENV;
mainWindow = new BrowserWindow({
width: 900,
height: 680,
});
mainWindow.loadURL(`file://${path.join(__dirname, '../public/index.html')}`);
mainWindow.on('closed', () => {
mainWindow = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
修改 package.json
加入
"main": "./src/electron.js", "scripts":{ "electron": "run-s build pure-electron", "pure-electron": "electron ." }
运行测试:
npm run electron
效果如图:
至此:Electron+Svelte的桌面应用就搭建成功!
4. 热加载
- 安装Chokidar库,文件监视:
npm install chokidar --save-dev
- 编辑src / electron.js,加入:
let watcher;
if (process.env.NODE_ENV === 'development') {
watcher = require('chokidar').watch(path.join(__dirname, '../public/build'), { ignoreInitial: true });
watcher.on('change', () => {
mainWindow.reload();
});
}
- 同时在现有的mainWindow.on(’closed’…中关闭观察器)
mainWindow.on("closed", function () {
if (watcher) {
watcher.close();
}
})
- 现在将这些命令添加到package.json中:
"electron-dev": "run-p dev pure-electron-dev",
"pure-electron-dev": "cross-env NODE_ENV=development electron ."
热加载配置完毕,运行测试!
npm run electron-dev
- 改动代码观察效果
4. 打包发行 OS X
- 安装软件包:Electron Builder
npm install electron-builder --save-dev
- 在项目的根目录中创建一个electronic-builder.yml文件:
appId: "my.app.id"
# Package app code into a asar archive. Set to false to debug issues.
asar: true
# Mac OS configuration
mac:
icon: "public/icons/AppIcon.icns"
category: "public.app-category.utilities"
- 将此命令添加到package.json:
"dist-darwin": "run-s build pure-dist-darwin"
"pure-dist-darwin": "electron-builder --dir --mac --config electron-builder.yml"
开始打包
npm run dist-darwin
open dist/mac/svelte-app.app
至此,mac打包发行完成
5. 设置应用程序图标(OS X)
- 使用Gravit Designer创建图像。
- 将图像导出为PNG。
- 使用图标生成器从PNG生成图标
- 将生成的图标文件夹从重命名
AppIcon.appiconset
为AppIcon.iconset
(以便iconutil可以使用它) - 在终端上执行:
iconutil -c icns AppIcon.iconset
- 此时会生成AppIcon.icns 文件
- 将AppIcon.icns移至electronic-builder.yml中配置的内容。
结束
本作品采用《CC 协议》,转载必须注明作者和本文链接