Michael_Jheng的部落格

Electron是GitHub開發的一個開源框架,可以使用Node.js與Chromium來完成桌面GUI應用程式的開發,Electron已被多個開源Web應用程式用於開發前端與後端,官方網站如下,

Electron官方網站

網站移動到最下面可看到簡單的使用方法,如下所示,

Electron GitHub載點

點擊右上角Clone or download->Download ZIP進行下載

下載完成解完壓縮,開啟Visual Studio Code這軟體來安裝並執行Electron,

Visual Studio Code官方網站

在終端機依次輸入

cd electron-quick-start

npm install && npm start

顯示結果如下,

npm start此指令主要是去執行electron-quick-start-master->main.js

在Electron中可以更換icon圖片,首先在electron-quick-start-master資料夾新增icons資料夾,在裏頭放一張圖片,如下所示,

接下來在electron-quick-start-master->main.js中的mainWindow = new BrowserWindow({width: 800, height: 600})增加icon的路徑,如下所示,

  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
    icon: path.join(__dirname, 'icons/Mushroom.ico')
  })

接下來執行npm start來看結果,

Electron有一個重要功能是將撰寫好程式打包輸出成桌面GUI應用程式,這時需要輸入以下指令,

npm install electron-packager --save-dev

在electron-quick-start-master->package.json中的"devDependencies"中會多出electron-packager與版本,如下所示,

接下來需要在"scripts"增加執行electron-packager的指令,指令如下,

"build":"electron-packager . MyApp --platform=win32 --arch=x64 --version=1.7.10

--icon=icons/Mushroom.ico --asar=true --out=dist --ignore=node_modules/electron-* "

指令內容說明如下:

electron-packager . MyApp: 將目前全部資料打包成MyApp這個名字

--platform = darwin(Mac),win32(Windows),linux(LINUX)

--arch = ia32,x64,all

--version = Electron版本

--icon = icon路徑

--asar = true or false,設定trun是把程式文件封裝,比較不容易被看到原始碼

--out = 輸出文件名稱(dist)

--ignore = 忽略檔案不要打包,建議把electron都忽略掉,因為打包後裡面就有了,可以減少檔案大小

接下來執行,並等待一段時間,

npm run build

產生dist資料夾,如下所示,

進入electron-quick-start-master->dist->MyApp-win32-x64中找MyApp.exe,如下所示,

點擊後開啟結果如下,