Electron+Svelte 开发桌面应用

Electron+Svelte开发桌面应用

参考文章

1. 工具介绍

  1. Electron 开发桌面应用的框架 官网
  2. Svelte 类似vue的js框架 官网
  3. 开发过程可能会使用到node-api API文档

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,效果如图:

Electron+Svelte开发桌面应用

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开发桌面应用

至此: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.appiconsetAppIcon.iconset(以便iconutil可以使用它)
  • 在终端上执行:
iconutil -c icns AppIcon.iconset
  • 此时会生成AppIcon.icns 文件
  • 将AppIcon.icns移至electronic-builder.yml中配置的内容。

结束

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!