Electron forge 啟動安裝

Electron forge 啟動安裝

Electron 可以用來將 HTML, CSS, Javascript 建構成桌面應用軟體

並且可以支援不同的平台，像是 windows, Mac, Linux….

在運行過程，主要透過 Chromium 及 NodeJS 來讓 HTML, CSS, JS 運作

如果，是透過原生的 Electron ，想要結合目前流行的前端框架，像是 Vue, React, Angular

則必須進行許多調整才能運作

這裡要介紹一個 Electron forge ，可以讓Electron 結合前端框架，變得非常簡單

安裝 Electron forge

Electron 提供了 Vue, React, Angular ….等模板應用程式，首先要在本地安裝Electron forge 環境

npm install -g electron-forge

初始化第一個專案

透過下方指令初始化應用程式

electron-forge init my-electronforge-app

進入專案

cd my-electronforge-app

啟動專案

electron-forge start

//or 

npm start

接著就會初始化並啟動以下畫面

結構說明

關於資料的結構，基本有以下部分：

• package.json 專案應用程式設定檔

• src/infex.js 在package.json指定的首頁 main script，會被作為 GUI elements

• src/index.html 預設會被用來 new BrowserWindow Instance的html檔案

在 main script 所執行的程序稱為 Main Process

進一步來說，Main script 主要是透過 BrowserWindow 實體化(instance)來啟動 Main process ，讓 index.html Web page 運作

多數 spa 僅需要一個main process，但如果需要運作更多的 process

這個實體化的 BrowserWindow 在能夠實現其他 web page 的 Renderere process

應用程式 packaging

透過下方指令進行 packaging

npm run package

打包完成，可以在 out/ 資料夾內產生

如果想要指定 packing 是提供給指定的平台，指令如下：

npm run package -- --platform=<platform> arch=<architecture>

例如：

npm run package -- --platform=linux --arch=x64

經過 packing 的版本，無法直接發布

需要進行 make 才能使用

npm run make

執行完成，會在 out/make/ 建立一個壓縮檔

裡面所包含的就是可以被發佈的軟體