[TOC] ## 安裝 electron `npm i -D electron@latest` ## 克隆示例項目的倉庫 `$ git clone https://github.com/electron/electron-quick-start` ## 進入這個倉庫 `$ cd electron-quick-start` ## 安裝依賴并運行 `$ npm install && npm start` ## phpstrom/webstrom 識別 electron ` 語言 & 框架 > javascript > Libraries> 添加>附加目錄> 選擇 **/node_modules\electron` ## 打包 ### 方案一 electron-builder - 推薦 `npm install electron-builder -D` package.json 添加 ``` "scripts": { "dist": "electron-builder --win --x64" }, "build": { "productName":"xxxx",//項目名 這也是生成的exe文件的前綴名 "appId": "com.leon.xxxxx",//包名 "copyright":"xxxx",//版權 信息 "directories": { // 輸出文件夾 "output": "build" }, "nsis": { "oneClick": false, // 是否一鍵安裝 "allowElevation": true, // 允許請求提升。 如果為false，則用戶必須使用提升的權限重新啟動安裝程序。 "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄 "installerIcon": "./build/icons/aaa.ico",// 安裝圖標 "uninstallerIcon": "./build/icons/bbb.ico",//卸載圖標 "installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖標 "createDesktopShortcut": true, // 創建桌面圖標 "createStartMenuShortcut": true,// 創建開始菜單圖標 "shortcutName": "xxxx", // 圖標名稱 "include": "build/script/installer.nsh", // 包含的自定義nsis腳本 }, "publish": [ { "provider": "generic", // 服務器提供商 也可以是GitHub等等 "url": "http://xxxxx/" // 服務器地址 } ], "files": [ "dist/electron/**/*" ], "dmg": { "contents": [ { "x": 410, "y": 150, "type": "link", "path": "/Applications" }, { "x": 130, "y": 150, "type": "file" } ] }, "mac": { "icon": "build/icons/icon.icns" }, "win": { "icon": "build/icons/aims.ico", "target": [ { "target": "nsis", "arch": [ "ia32" ] } ] }, "linux": { "icon": "build/icons" } } ``` ### 方案二: electron-packager ``` npm install -g electron-packager sudo npm install asar -g electron-packager . --asar ``` > asar 用于加密原碼