1. 程式人生 > >Electron學習筆記Part3-利用Electron builder應用打包EXE

Electron學習筆記Part3-利用Electron builder應用打包EXE

HelloWorld寫完並能夠成功運行了,接下來將這個HelloWorld應用打包成exe安裝包,這樣就可以拿到其他電腦安裝運行了,個人總結兩種打包方式,其實現原理相同,但過程不同。

目前剛剛實驗利用Electron builder工具進行打包,需要安裝Electron builder模組,在cmd中執行命令

    cnpm install electron builder

如圖即已安裝完成,可至目錄中檢視安裝後的檔案

驗證electron builder是否安裝成功,在cmd中輸入build --help,可以獲取到幫助資訊即為安裝成功。

需要在專案資料夾下新建資原始檔夾,將程式釋出所用的背景圖片和圖示等資源統一放進資原始檔夾進行管理。(打包windows exe需要ico檔案畫素為256*256)

一、單Json檔案方式

  1. 直接編輯專案資料夾下的package.json檔案,新增
    "author": "",//作者
     "description": ""//描述
    
  2. 繼續新增electron builder編譯所需要的屬性
    "build": {
        "appId": "com.leon.HelloWorld02",//包名
        "copyright":"LEON",//版權
        "productName":"HelloWorld02",//專案名
        "dmg":{
          "background":"res/background.png",//背景圖片路徑
          "window":{
    	//視窗左上角起始座標
    
    "x":100, "y":100, //視窗大小 "width":500, "height":300 } }, "win": { "icon": "res/icon.ico"//圖示路徑 } }
    貌似json檔案使用註釋會導致一部分編譯報錯,所以只在文章中寫明註釋,放到檔案中最好將註釋刪掉。
  3. 完成後在專案資料夾中執行cmd命令:build --win --x64(因為我編譯的是windows64位版本,electron builder可同時編譯MAC和Linux版本,需要在package.json檔案中寫明相應的引數)
  4. 執行命令後即開始打包,無報錯結束後及打包完成。(其中有提示告訴我可以升級electron builder到最新版本)
  5. 打包完成後,可以看到專案資料夾中自動生成了兩個目錄"dist"和"node_modules","node_modules"資料夾是空的,因為我是全域性安裝的electron,"dist"資料夾中包含一個名為"win-unpacked"的資料夾和一個與package.json檔案中name屬性相同名稱的exe檔案,這個檔案即是最後打包生成的專案安裝檔案,"win-unpacked"資料夾開啟後可看到一堆零散檔案,但其中也包含exe的可執行檔案,這是未打包的專案目錄。
    二、多json檔案方式
從http://electron.rocks/electron-builder-explained/站點中獲取到另一種多json檔案的打包方式,雖然不知道與單檔案打包有啥區別,但也是另一種檔案結構,還是嘗試一下。 先看看其目錄結構 圖中"ea-todo"為專案資料夾,"app"為專案內容資料夾,其中包含index.html、main.js、package.json等程式執行需要的檔案,"build"為專案資原始檔夾,"dist"與單json檔案方式的"dist"資料夾功能相同,用於存放打包後生成的安裝檔案,package.json檔案為開發和打包用的build引數。
  1. 先按其提供的目錄結構構建程式。
  2. main.js無需改變。
  3. 修改app/package.json檔案內容,網站中的解釋是app/package.json檔案是關於程式執行需要的內容,

    那就按照網站中的說法改
    {
        "name": "HelloWorld03",
        "description": "HelloWorld03",
        "version": "0.1.2",
        "author": "LEON",
        "main": "main.js"
    }
  4. 接下來修改專案資料夾中的package.json,網站中描述其內容為開發用的引數

    繼續按網站描述內容修改
    {
        "devDependencies": {
        "electron-builder": "~13.7.0",//可以通過build --version檢視electron builder的版本號
        "electron-prebuilt": "^1.4.13"//這玩意兒不知道是啥版本號,照之前的json文件中複製過來的
            
        },
        "build": {
            "appId": "com.leon.Hello,World03",
            "win": {
                "icon": "build/snow.ico"
            }
        },
    
        //下面一段應該是npm執行的程式碼
        "scripts": {
        "postinstall": "install-app-deps",
        "start": "electron ./app --enable-logging",//啟用日誌
        "dev": "NODE_ENV='development' npm run start",
        "dist": "build -w --x64"//編譯打包的版本
        }
    
    }


  5. 修改好後在專案資料夾中cmd執行
    cnpm run start
  6. 無錯即打包完成

  7. 檢視dist中內容與單json檔案方式一樣

  8. 雙擊setup即可安裝並執行HelloWorld程式啦!