程序員打包electron

『壹』 如何搭建Electron開發環境

electron自動更新的時候，在electron的官方文檔auto-updater 中，提到了在幾個平台mac，linux，windows下electron 的自動更新方法，其中windsow平台上面，文章中建議先用grunt-electron-installer 模塊來創建windows安裝包，grunt這個工具是由Squirrel集成的。進而了解下Squirrel這個工具，
一個可以用來給electron應用的安裝更新卸載添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel創建electron的.exe安裝包。

創建nuget包

我們的方法是使用nuget工具創建Nuget包，再使用Squirrel工具創建.exe。

下載squirrel.exe和nuget.exe，也可以選擇直接安裝Squirrel.Windows （需要有vitual
studio環境）。
2.新建文件夾如my-build，把下載好的squirrel.exe，nuget.exe和setup.exe

放進去，在文件夾放入我們未打包的electron應用，如下圖：

4.在my-build根目錄中，打開命令行執行nuget spec

如下圖：

生成 spec包初始文件

5.編輯器打開 Package.nuspec，按照自己項目的需要編輯這個文件，如下圖：

這里需要注意：根據Squirrel文檔說明，target folder 屬性需要設置為lib/net45，否則並沒有用；<iconUrl>標簽用來制定未來的exe的icon。

5.用下面的命令創建一個nuget包，

nuget pack Package.nuspec

如下圖：

之後在目錄中會出現這個包

命名規則就是<my_app_name>.<version>.nupkg

創建安裝程序

把應用程序打包成nuget包之後，就可以用squirrel創建一個安裝程序了。在根目錄打開命令行，執行以下命令：

squirrel --releasify <my_app_name>.<version>.nupkg

這個時候命令行中沒有任何提示。但是別慌，編譯一段時間後程序會創建一個release文件夾，裡面有三個文件，nuget包，RELEASES 文件和安裝文件Setup.exe。如下圖：

如果沒有出現這三個文件，可以查看目錄中的SquirrelSetup.log，根據裡面的報錯，來進行調試。

注意上面這條squirrel 命令，可以用來設置setup.exe在安裝過程中用傳統icon還是用自定義的圖片文件。使用Squirrel --help可以查看更多幫助

發布應用和安裝應用

把上一步生成的setup.exe發送給想要安裝這個應用的用戶，就可以了。

最終應用會被安裝在C:\Users\Administrator\AppData\Local\[appname] 文件夾中，注意Squirrel 的日誌文件也存在目錄中，調試安裝問題的時候非常有用。

雙擊我們的setup.exe進行安裝app的測試，如果中途有任何出錯，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 裡面可以看到安裝日誌。如下圖：

安裝之後打開C:\Users\Administrator\AppData\Local 目錄，可以看到app安裝在這里，如下圖：

自動創建快捷方式

進入我們安裝之後的文件夾，命令行進入C:\Users\Administrator\AppData\Local\[your appname]，執行 Update.exe --help ，可以看到

不知道從上圖你有沒有得到什麼提示，反正我發現了，在命令行手動創建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我們想讓應用在安裝過程中靜默地創建好快捷方式，那就需要在app的安裝之後相反設法執行這句代碼。

因為我們的.exe會在安裝之後自動打開程序，所以我在程序的入口main.js，添加sqruieel事件的監聽就好了。

『貳』 grunt打包的electron桌面應用，怎麼實現自動更新

1、系統：windows7 64位操作系統
2、使用electron-boilerplate-vue腳手架，其中electron為v1.2.1，vue為v1.0.25
3、使用electron-packager和grunt-electron-installer打包成安裝文件，以及 Squirrel.Windows
4、請先安裝vs2015,並配置系統變數，保證Squirrel.Windows的安裝環境

『叄』 如何將electron框架開發的軟體包打包成單一exe文件

一步一步的跟著做：單擊File，選擇NEW，然後點擊旁邊的樹形的Archive選項卡，然後再Archive選項卡中選擇AppletJAR，取個名字，然後直接點擊Finish，這個時候運行一下程序，讓其編譯一下，會在源碼中得到一個.JAR文件，有了這個文件以後，就可以停止程序，接著在單擊File，選擇NEW，還是點擊Archive選項卡，這次選擇ExecutableJAR，然後取名字，再點擊JARFile輸入框後面的按鈕，找到剛才生成的.JAR文件，添加進去，一路NEXT，最後Finish以後，再次運行程序，這個時候就會在源碼文件夾中多出啦兩個.exe文件，一個是通過控制台運行的，一個是直接運行的，同樣，exe文件要想運行，還是需要JDK，不過這里建議不要使用sun公司下載的JDK，直接使用Jbuilder裡面的JDK～

『肆』 怎麼將網頁打包成桌面應用（web前端頁面

在 HTML5的崛起、javaScript要一統天下之際，有一個名為【跨平台】的技術越來越火。為什麼會這么火？因為軟體開發者只需一次編寫程序，即可在 Windows、Linux、Mac、IOS、Android 等平台運行，大大降低了程序員的工作量，也使公司的產品可以快讀迭代。曾經跨平台技術的不被看好，如今隨著手機、電腦硬體的發展而快速發展。這一切，幾乎由HTML5技術推動，當然，JavaScript 這個語言，是最大的功臣。

基於 HTML5 的跨平台技術比較出名的有 PhoneGap、Cordova，常常用於開發 webapp；還有 Egret、Cocos-creator、Unity 等，常用於開發游戲；還有基於 Node.js 的 nw.js，用於開發桌面應用，以及 Electron，一款比 nw.js 還強大的用網頁技術來開發桌面應用的神器。

其實，以上都是廢話，現在進入主題：怎麼用 Electron 將網頁打包成 exe 可執行文件！

假設：

1、你已經安裝並配置好了 node.js （全局安裝）

2、你已經用 npm 安裝了 electron （全局安裝）

3、你已經寫好了前端網頁（html、css、javascript 這些，或者基於這些的前端框架寫好的網頁）

4、以上三點看不懂的，趕緊去網路。。。

你如果具備了以上的假設，請繼續往下看：

1、找到你的前端網頁項目文件夾，新建 package.json、main.js、index.html 三個文件（註：其中的 index.html 是你的網頁首頁）

你的項目目錄/
├── package.json
├── main.js
└── index.html

2、在 package.json 中添加如下內容

{
"name" : "app-name",
"version" : "0.1.0",
"main" : "main.js"}

3、在 main.js 中添加下面的內容，這個 main.js 文件就是上面 package.json 中的 "main"鍵 的值，所以可根據需要修改

const {app, BrowserWindow} = require('electron')const path = require('path')const url = require('url')// Keep a global reference of the window object, if you don't, the window will// be closed automatically when the JavaScript object is garbage collected.let winfunction createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})

// and load the index.html of the app.
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))

// Open the DevTools.
// win.webContents.openDevTools()

// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})}// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', createWindow)// Quit when all windows are closed.app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}})app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}})// In this file you can include the rest of your app's specific main process// code. You can also put them in separate files and require them here.

4、如果你的網頁首頁的文件名不是 「index.html」，那麼請在 main.js 中將其中的 'index.html' 修改為你的網頁首頁名

5、打開 DOS，cd 到你的項目目錄（或直接在你的項目目錄下空白的地方 shift+滑鼠右鍵，然後點擊在此處打開命令窗口，這里看不懂的，唉，網路吧少年）

6、在上一步的 DOS 下，輸入npm install electron-packager -g全局安裝我們的打包神器

npminstallelectron-packager-g

7、安裝好打包神器後，還是在上一步的 DOS 下，輸入electron-packager . app --win --out presenterTool --arch=x64 --version 1.4.14 --overwrite --ignore=node_moles 即可開始打包

electron-packager . app --win --out presenterTool --arch=x64
--version 1.4.14 --overwrite --ignore=node_moles

這個命令什麼意思？藍色部分可自行修改：

electron-packager .可執行文件的文件名--win --out打包成的文件夾名--arch=x64位還是32位--version版本號--overwrite --ignore=node_moles

以上是最簡單的打包方式，至於怎麼修改窗口大小、菜單欄怎麼加、怎麼調用系統API這些，就給你慢慢去研究Electron了。

如果你打包總是不成功，覺得很煩，同時對擴展功能沒什麼要求的話，

裡面有我已將內容為 hello,world 的 index.html 網頁通過 Electron 框架打包為 windows 環境下的桌面應用。

現只需將你的網頁前端項目復制到 /resources/app/project 目錄下，雙擊 exe 文件即可以桌面應用的方式運行你的網頁。

『伍』 electron在win上可運行後，如何打包到linux上運行

你添加的是虛擬硬碟嗎
那你肯定添加的是scsi口的
把硬碟介面換成ide的
即可解決
我直接給你圖
看明白了嗎
最後一定用ide的
因為你的linux版本低
不支持
scsi磁碟

『陸』 如何將electron框架開發的軟體包打包成單一exe文件

前言：研究electron自動更新的時候，在electron的官方文檔auto-updater 中，提到了在幾個平台mac，linux，windows下electron 的自動更新方法，其中windsow平台上面，文章中建議先用grunt-electron-installer 模塊來創建windows安裝包，grunt這個工具是由Squirrel集成的。進而了解下Squirrel這個工具，
一個可以用來給electron應用的安裝更新卸載添加快捷方式的工具。本文主要提及如何在windows平台下，用Squirrel創建electron的.exe安裝包。

創建nuget包

我們的方法是使用nuget工具創建Nuget包，再使用Squirrel工具創建.exe。

1.下載squirrel.exe和nuget.exe，也可以選擇直接安裝Squirrel.Windows （需要有vitual
studio環境）。

2.新建文件夾如my-build，把下載好的squirrel.exe，nuget.exe和setup.exe

放進去，在文件夾放入我們未打包的electron應用，如下圖：

4.在my-build根目錄中，打開命令行執行nuget spec

如下圖：

生成 spec包初始文件

5.編輯器打開 Package.nuspec，按照自己項目的需要編輯這個文件，如下圖：

這里需要注意：根據Squirrel文檔說明，target folder 屬性需要設置為lib/net45，否則並沒有用；<iconUrl>標簽用來制定未來的exe的icon。

5.用下面的命令創建一個nuget包，

nuget pack Package.nuspec

如下圖：

之後在目錄中會出現這個包

命名規則就是<my_app_name>.<version>.nupkg

創建安裝程序

把應用程序打包成nuget包之後，就可以用squirrel創建一個安裝程序了。在根目錄打開命令行，執行以下命令：

squirrel --releasify <my_app_name>.<version>.nupkg

這個時候命令行中沒有任何提示。但是別慌，編譯一段時間後程序會創建一個release文件夾，裡面有三個文件，nuget包，RELEASES 文件和安裝文件Setup.exe。如下圖：

如果沒有出現這三個文件，可以查看目錄中的SquirrelSetup.log，根據裡面的報錯，來進行調試。

注意上面這條squirrel 命令，可以用來設置setup.exe在安裝過程中用傳統icon還是用自定義的圖片文件。使用Squirrel --help可以查看更多幫助

發布應用和安裝應用

把上一步生成的setup.exe發送給想要安裝這個應用的用戶，就可以了。

最終應用會被安裝在C:\Users\Administrator\AppData\Local\[appname] 文件夾中，注意Squirrel 的日誌文件也存在目錄中，調試安裝問題的時候非常有用。

雙擊我們的setup.exe進行安裝app的測試，如果中途有任何出錯，在

C:\Users\Administrator\AppData\Local\SquirrelTemp 裡面可以看到安裝日誌。如下圖：

安裝之後打開C:\Users\Administrator\AppData\Local 目錄，可以看到app安裝在這里，如下圖：

自動創建快捷方式

進入我們安裝之後的文件夾，命令行進入C:\Users\Administrator\AppData\Local\[your appname]，執行 Update.exe --help ，可以看到

不知道從上圖你有沒有得到什麼提示，反正我發現了，在命令行手動創建快捷方式的命令是Update.exe --createshortcut electron\electron.exe -i [your ico toute]\app.ico

所以，如果我們想讓應用在安裝過程中靜默地創建好快捷方式，那就需要在app的安裝之後相反設法執行這句代碼。

因為我們的.exe會在安裝之後自動打開程序，所以我在程序的入口main.js，添加sqruieel事件的監聽就好了。如下圖：

我順便把程序卸載時，刪除快捷方式的監聽事件也寫了進去。還有程序的更新和刪除事件監聽，但是這兩個事件，我還沒有進行測試。

更新應用

其實我一直很想做增量更新，在這里我的更新方法有兩個，第一是在程序的入口添加js，發送請求到伺服器，拉取更改文件進行本地替換，但是如果是node_mole依賴包的更改，這個方法並不可行。第二個方法比較安全而且快捷通過發布一個版本號不同的exe，如下：1.在這個創建安裝程序的步驟2中，我們把程序代碼都復制到了這個文件夾裡面，如下圖：

如果後續我們的程序要進行更新，首先我們需要把更改的文件直接復制替換到這個文件夾。

2.打開Package.nuspec，編輯version標簽

3.參考本文種中創建安裝程序部分的步驟2-4，重新生成setup.exe，發布應用。

通過執行setip.exe安裝，程序會自動刪除之前的應用，但是我並不清楚，sqruieel 是進行了增量替換，還是將之前的整個應用進行刪除，再重新安裝。

創建自定義安裝包

在上一步，我們已經把自己的exe發布出來了，但是如果沒有自定義名字跟icon，好像還不夠酷，所以我們需要創建自定義的安裝文件。

1.下載安裝 Resource
Hacker

2.打開這個項目目錄，在electron.exe上面右鍵

出現菜單，點擊 Open using Rescource Hacker。

3.Resource Hacker應用運行之後中，在以下界面中選擇Icon，然後在工具欄裡面選擇Action，Replace
Icon，如下圖：

然後選擇自己想要替換的.ico文件就好

4.這其實並不夠，我們還需要更換exe裡面的版本信息，打開Version
Info，把FileDescription和ProctName改成我們自己的項目名稱，最好把SquirrelAwareVersion也更改一下，畢竟是版本號。

5.做完這些之後，我們需要按照之前的步驟，在命令行中輸入

nuget pack Package.nuspec

重新生成nuget包，然後再使用

squirrel --releasify <my_app_name>.<version>.nupkg 命令創建安裝文件。

6.打開之後生成的releases文件夾，參考本文種中創建安裝程序部分的步驟2-4，對setup.exe進行自定義。

最後，一個可以自動更新又安裝便捷，還有我們自己的酷酷的圖標跟名字的應用就生成拉！

『柒』 electron打包桌面應用程序打包成安裝包安裝包，怎麼打包

第一步，配置 package.json 第二步，編譯 build --win --ia32 builder 支持編譯成多種格式等等功能

『捌』 有沒有把網頁轉換成可執行文件的網頁

在
HTML5的崛起、JavaScript要一統天下之際，有一個名為【跨平台】的技術越來越火。為什麼會這么火？因為軟體開發者只需一次編寫程序，即可在
Windows、Linux、Mac、IOS、Android
等平台運行，大大降低了程序員的工作量，也使公司的產品可以快讀迭代。曾經跨平台技術的不被看好，如今隨著手機、電腦硬體的發展而快速發展。這一切，幾乎由HTML5技術推動，當然，JavaScript
這個語言，是最大的功臣。

以上是最簡單的打包方式，至於怎麼修改窗口大小、菜單欄怎麼加、怎麼調用系統API這些，就給你慢慢去研究Electron了。

『玖』 electron在win上可運行後，如何打包到linux上運行

1、如果只是需要運行起來，不需要打包，那麼可以在linux建文件夾，npm安裝對應包，然後將win下的代碼拷貝到對應位置即可運行。

2、如果需要打包，則比較復雜。大致為：

a) 建app文件夾，將代碼(含index.js文件）拷貝到其中。

b) npm安裝asar，用asar的pack命令，將app文件夾打包成一個文件app.asar

asar pack app app.asar

c) 在網頁鏈接 下載對應版本的linux預編譯二進制包，解壓，用上面生成的app.asar替換resources文件夾下同名文件。

d) 修改chrome-sanbox文件許可權及屬主:

sudochownroot:rootchrome-sandbox
sudochmod4755chrome-sandbox

e) ./electron即可運行