使用 TypeScript 開發 electron入門體驗

本文嘗試根據官方示例，使用 TypeScript 開發基於 electron 的桌面應用
官方示例

# Clone this repository
git clone 
# Go into the repository
cd electron-quick-start-typescript
# Install dependencies
npm install
# Run the app
npm start

遇到的問題

中間可能由於網路問題，electron 依賴下載錯誤，如果npm install執行成功，npm start失敗，考慮刪掉node_modules資料夾重新安裝依賴

分析

檢視 build 之後的 dist 資料夾，實際上是將 ts 檔案編譯成了 js 檔案
執行的時候再呼叫 electron 執行 build 之後的 js 檔案

執行結果

最終跑起來是這樣子的

手動搭建工程

從零開始執行第一個 electron 應用，從 hello world 到打包釋出
參考

初始化工程

沒安裝的話，首先全域性安裝
選擇yarn，因為它可以更好地處理依賴關係，並可以使用yarn clean幫助減少最後構建檔案的大小

npm install -g yarn

初始化一個空專案

yarn init

安裝依賴

首先安裝 electron，electron 包會透過electron-download包來下載相關檔案，會訪問獲取相關檔案，大部分情況會由於網路問題無法下載，此時就需要透過設定 electron 映象解決，參考
win 使用者新增環境變數ELECTRON_MIRROR=""，可使用 powershell，快速設定臨時環境變數，此環境變數只在本次生效

$env:ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/

yarn add -D electron

yarn add -D typescript

設定指令碼和頁面內容

package.json配置檔案節點scripts新增一個指令碼，指定入口檔案為main.js，ts檔案最終會編譯為js檔案，所以指定入口檔案為js檔案即可

  "main": "main.js",
  "scripts": {
    "start": "tsc main.ts && electron main.js"
  }

新建main.ts和index.html檔案，內容分別如下

main.ts

const { app, BrowserWindow } = require("electron");
import * as path from "path";

let win;

function createWindow() {
  // 建立瀏覽器視窗
  win = new BrowserWindow({ width: 600, height: 800 });

  //然後載入app的index.html
  let indexPath = path.join(__dirname, "index.html");
  win.loadFile(indexPath);

  win.webContents.openDevTools();

  // 當 window 被關閉，這個事件會被觸發。
  win.on("closed", () => {
    // 取消引用 window 物件，如果你的應用支援多視窗的話，
    // 通常會把多個 window 物件存放在一個陣列裡面，
    // 與此同時，你應該刪除相應的元素。
    win = null;
  });
}

app.on("ready", createWindow);

// 當全部視窗關閉時退出。
app.on("window-all-closed", () => {
  // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其選單欄會保持啟用。
  if (process.platform !== "darwin") {
    app.quit();
  }
});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>

  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
      document.write(process.versions.node);</script>, Chrome
    <script>
      document.write(process.versions.chrome);</script>, and Electron
    <script>
      document.write(process.versions.electron);</script>.
  </body>
</html>

執行

一切準備就緒，執行即可看到跑起來的應用
注意記得加上在退出應用時執行app.quit()，否則會有部分程式無法退出，一直鎖定檔案，無法重新打包釋出執行

yarn start

打包

參考
推薦使用，打包好可安裝程式，帶自動更新功能，如果第一次安裝，由於網路原因下載資源失敗，可先使用
安裝electron-builder，並設定指令碼，新增pack、dist指令碼

yarn add -D electron-builder

  "scripts": {
    "build": "tsc main.ts",
    "start": "tsc main.ts && electron main.js",
    "pack": "yarn build && electron-builder --dir",
    "dist": "yarn build && electron-builder",
  }

執行打包

yarn dist

最終打包好的應用在dist資料夾，win-unpacked資料夾則是釋出的應用，直接開啟electron.exe即可執行應用

專案結構

最終專案的結構

總結

想要高效開發顏值高的應用，還得搭配好的模板，這裡推薦
，建議通讀，寫的很好，提供的資源也多
-只有自己動手從零開始實踐，才會收穫得更多！

使用 TypeScript 開發 electron入門體驗

使用 TypeScript 開發 electron入門體驗

遇到的問題

分析

執行結果

手動搭建工程

初始化工程

安裝依賴

設定指令碼和頁面內容

執行

打包

專案結構

總結

相關文章