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，效果如图：

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 协议》，转载必须注明作者和本文链接