Electron+Svelte 開發桌面應用

1711293058發表於2020-06-12

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/my_app.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.iconset移至electronic-builder.yml中配置的內容。
touch dist/mac/template-electron-svelte.app
touch dist/mac/template-electron-svelte.app/Contents/Info.plist

結束

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章