Electron windows下安裝與打包成 exe 可執行程序

時間 2019-11-16

標籤 electron windows 安裝打包 exe 可執行程序欄目 Windows 简体版

原文原文鏈接

一、安裝

Electron做爲一種用javascript寫桌面程序的開發方式，如今已經被大衆接受。下面就介紹如何在windows（>win7）下快速搭建Electron開發環境。javascript

1. nodejs 的安裝

http://nodejs.cn/download/
複製代碼

從下載最新版本的windows安裝程序進行安裝，我下載的是v6.9.1，安裝時一路默認便可，這個安裝會把nodejs和npm配置到系統PATH中，這樣在命令行的任何位置均可以直接用node執行nodejs，用npm執行npm命令。檢查nodejs是否安裝成功能夠這樣查看：css

另外，由於可能的GFW問題（否則會下載很慢很慢，也可能下載失敗），因此建議把npm的倉庫切換到國內taobao倉庫，執行下面的命令：html

npm install -g cnpm --registry=https://registry.npm.taobao.org
複製代碼

運行效果以下：前端

2. Electron的安裝

由於前面已經啓用了node/npm，因此能夠採用npm的方法安裝Electron。爲了測試的方便，我是在命令行窗口中採用下面的命令:html5

npm install -g electron
複製代碼

效果以下：java

其中，查看electron是否安裝成功可經過命令 electron -v 查看。網上有的說命令是 npm install -g electron 以下：node

3. 編程環境安裝

強烈推薦微軟退出的VS Code，直接下載安裝便可，它支持nodejs等的代碼提示，非常方便。git

4. 打包輸出工具

爲了方便最終成果輸出，建議安裝electron-packager工具，安裝也很簡單，建議如下面的命令全局安裝：程序員

npm install -g electron-packager
複製代碼

效果以下：github

5. 若是須要採用git進行版本控制，建議安裝git工具

直接在git 下載最新版本的安裝便可。

https://git-scm.com/downloads
複製代碼

至此實際上開發環境已經搭建好了。

二、初學Electron

快速開始 Electron經過爲運行時提供豐富的本機（操做系統）API，可使用純JavaScript建立桌面應用程序。您能夠將其看做是Node.js運行時的一種變體，它專一於桌面應用程序而不是Web服務器。這並不意味着Electron是javascript綁定到圖形用戶界面（GUI）庫。相反，Electron使用網頁做爲其GUI，所以您也能夠將其視爲由JavaScript控制的最小的Chromium瀏覽器。主要過程在電子，在運行過程當中package.json的main腳本被稱爲主處理。在主進程中運行的腳本能夠經過建立網頁來顯示GUI。渲染器過程因爲Electron使用Chromium來顯示網頁，所以也使用了Chromium的多進程架構。Electron中的每一個網頁都在其本身的進程中運行，這稱爲渲染器進程。在正常的瀏覽器中，網頁一般在沙箱環境中運行，而且不容許訪問本機資源。然而，電子用戶有能力在網頁中使用node.js API，容許較低級別的操做系統交互。主進程和渲染器進程之間的差別主進程經過建立BrowserWindow實例來建立網頁。每一個BrowserWindow實例在其本身的渲染器進程中運行網頁。當BrowserWindow實例被銷燬時，相應的渲染器進程也被終止。主進程管理全部網頁及其相應的渲染器進程。每一個渲染器進程是隔離的，只關心在其中運行的網頁。在網頁中，不容許調用本地GUI相關的API，由於管理網頁中的本地GUI資源是很是危險的，而且容易泄漏資源。若是要在Web頁面中執行GUI操做，則Web頁面的渲染器進程必須與主進程通訊，以請求主進程執行這些操做。在Electron中，咱們有幾種方法在主進程和渲染器進程之間進行通訊。Like ipcRenderer和ipcMain用於發送消息的模塊，以及用於RPC樣式通訊的遠程模塊。還有一個關於如何在網頁之間共享數據的常見問題條目。

3、寫你的第一電子應用程序

一般，Electron應用程序的結構以下：

your-app/

    ├── package.json

    ├── main.js

    └── index.html
複製代碼

其格式與package.jsonNode模塊的格式徹底相同，main字段指定的腳本是應用程序的啓動腳本，它將運行主進程。您的示例package.json可能以下所示：

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}
複製代碼

注意：若是main字段不存在package.json，Electron將嘗試加載index.js。本main.js應建立窗口和處理系統事件，一個典型的例子是：

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 win function 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. 複製代碼

最後index.html是您要顯示的網頁：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>
複製代碼

4、運行您的應用程序

一旦你建立了初始main.js，index.html和package.json文件，你可能想嘗試在本地運行你的應用程序來測試它，並確保它的工做正常。 electron electron 是 npm 包含Electron的預編譯版本的模塊。若是您已經在全局安裝npm，那麼您只須要在應用程序的源目錄中運行如下命令：

electron .   //到當前目錄下

$ .\node_modules\.bin\electron . 
複製代碼

5、手動下載的電子二進制

做爲分發版運行完成編寫應用程序後，您能夠按照應用程序分發指南建立分發，而後再執行打包的應用程序。試試這個例子使用存儲electron/electron-quick-start庫克隆並運行本教程中的代碼。注意：運行此操做須要在系統上使用Git和Node.js（其中包括npm）。

//下載Nodejs 模塊
# Clone the repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install dependencies
$ npm install
# Run the app
$ npm start
複製代碼

6、打包

在 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 可執行文件！

假設：

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

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

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

四、以上三點看不懂的，趕忙去百度。。。

你若是具有了以上的假設，請繼續往下看：

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

你的項目目錄/

├── package.json
├── main.js
└── index.html
複製代碼

二、在 package.json 中添加以下內容

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

三、在 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 win function 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. 複製代碼

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

五、打開 DOS，cd 到你的項目目錄（或直接在你的項目目錄下空白的地方 shift+鼠標右鍵，而後點擊在此處打開命令窗口，這裏看不懂的，唉，百度吧少年）

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

npm install electron-packager -g
複製代碼

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

electron-packager . app --win --out presenterTool --arch=x64
 --version 1.4.14 --overwrite --ignore=node_modules
複製代碼

這個命令什麼意思？漢字是可自行修改：

electron-packager . 可執行文件的文件名 --win --out 打包成的文件夾名 --arch=x64位仍是32位 --version版本號 --overwrite --ignore=node_modules
複製代碼

八、打包成功後，會生成一個新的文件夾，點進去，找到 exe 文件，雙擊就能夠看到網頁變成了一個桌面應用啦！

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

成功打包，惋惜，整個文件夾有130Mb那麼大，其實不方便分發。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。