React Electron封裝並打包成桌面應用

原文鏈接：https://blog.csdn.net/qq_25881261/article/details/81559794

Electron是什麼

​Electron 是一個由 GitHub 開發的開源庫，通過將 Chromium) 和Node.js 組合並使用 HTML，CSS 和 JavaScript 進行構建 Mac，Windows，和 Linux 跨平臺桌面應用程序。

原理：

上面已將說了，Electron 通過將 Chromium 和 Node.js 組合到單個 runtime 中來實現的.

nodejs:

如果你不知道 node.js，那還等什麼快戳這裏，看一看世界上最溫柔可愛的語言。它藉助於 Google 的 V8 引擎，Node.js 是一個能夠在服務器端運行 JavaScript 的開放源代碼、跨平臺 JavaScript 運行環境，更多解釋請百度百科。

Chromium:

Chromium 或許你沒聽說過，但是你一定聽說過 chrome 吧！Chromium 是 Google 的開源瀏覽器，是 chrome 背後的那個不太穩定更新快的兄弟版。

組合:

Electron 創建的應用使用網頁作爲其 GUI ,因此你可以將其當成由 JavaScript 控制的迷你精簡版Chromium 瀏覽器。也可以將 Electron 當成 node.js 變體，只不過它更專注於桌面應用而非 Web 服務器。在 Electron 中, 把 package.json 中設定的 main 腳本的所在進程稱爲 主進程。這個進程中運行的腳本也可通過創建網頁這種方式來展現其 GUI。因爲 Electron 是通過 Chromium 來顯示頁面,所以 Chromium 自帶的多進程架構也一同被利用。這樣每個頁面都運行着一個獨立的進程,它們被統稱爲 渲染進程。通常來說，瀏覽器中的網頁會被限制在沙盒環境中運行並且不允許訪問系統原生資源。但是由於 Eelectron 用戶可在頁面中調用 Node.js API，所以可以和底層操作系統直接交互。

優缺點？

總之，優點肯定大於缺點。

優點:

方便快捷的開發桌面應用，跨平臺，對前端開發者友好，活躍的社區，豐富的api......

缺點:

性能肯定比不上原生的桌面應用，發佈的包貌似有一點點大。

OK,接下來開始.........................................................

1. 快速創建react項目

首先安裝好GIT和nodejs,安裝好nodejs同時也安裝好了npm

這是使用Facebook開發的reate-react-app 來快速創建一個 react 項目（，命名爲react-electron）。

# 安裝 create-react-app 命令,如果已將安裝請忽略
npm install -g create-react-app
# 創建 react項目
create-react-app react-electron
# 啓動項目( create-react-app 真的超級方便啊)
cd react-electron && npm start

npm start之後瀏覽器會自動打開網址 http://localhost:3000/ ，出現react項目的頁面了

2. 安裝Electron

#在react-electron項目目錄下
npm install -save electron

相關配置

react-electron 根目錄(不是 src 目錄)下面新建 main.js 文件,這個文件和 electron-quick-start 中的官方默認 main.js 幾乎一模一樣，只修改了加載應用這入口這一個地方：

// 引入electron並創建一個Browserwindow
const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')
 
// 保持window對象的全局引用,避免JavaScript對象被垃圾回收時,窗口被自動關閉.
let mainWindow
 
function createWindow () {
//創建瀏覽器窗口,寬高自定義具體大小你開心就好
mainWindow = new BrowserWindow({width: 800, height: 600})
 
  /* 
   * 加載應用-----  electron-quick-start中默認的加載入口
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }))
  */
  // 加載應用----適用於 react 項目
  mainWindow.loadURL('http://localhost:3000/');
  
  // 打開開發者工具，默認不打開
  // mainWindow.webContents.openDevTools()
 
  // 關閉window時觸發下列事件.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
 
// 當 Electron 完成初始化並準備創建瀏覽器窗口時調用此方法
app.on('ready', createWindow)
 
// 所有窗口關閉時退出應用.
app.on('window-all-closed', function () {
  // macOS中除非用戶按下 `Cmd + Q` 顯式退出,否則應用與菜單欄始終處於活動狀態.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', function () {
   // macOS中點擊Dock圖標時沒有已打開的其餘應用窗口時,則通常在應用中重建一個窗口
  if (mainWindow === null) {
    createWindow()
  }
})
 
// 你可以在這個腳本中續寫或者使用require引入獨立的js文件.   
 

配置 package.json

{
  "name": "knownsec-fed",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 這裏 配置啓動文件
  "homepage":".", // 這裏
  "dependencies": {
    "electron": "^1.7.10",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "electron-start": "electron ." // 這裏 配置electron的start，區別於web端的start
  }
}   

啓動Electron

#都在reatc-electron根目錄下執行
# 由於我們在main.js文件裏使用了url訪問到react項目，所以在這裏需要先啓動react項目
npm start
# 啓動electron
npm run electron-start
 

支持熱調試，當你修改代碼後，桌面應用也將會重新更新。

3. 打包react項目

首先修改main.js, 因爲現在你要將 react 項目打包在 build 文件夾下面，所以加載應用處改成如下！當然也可在某個配置文件裏面配置是否屬於開發，此處用if判斷一下從未進行選擇執行哪段加載應用代碼。但是這裏爲了簡便，暫且使用直接修改的方式：

// 加載應用----react 打包
mainWindow.loadURL(url.format({
  pathname: path.join(__dirname, './build/index.html'),
  protocol: 'file:',
  slashes: true
}))
// 加載應用----適用於 react 開發時項目
// mainWindow.loadURL('http://localhost:3000/');

默認情況下，homepage 是 http://localhost:3000，build 後，所有資源文件路徑都是 /static，而 Electron 調用的入口是 file :協議，/static 就會定位到根目錄去，所以找不到靜態文件。在 package.json 文件中添加 homepage 字段並設置爲"."後，靜態文件的路徑就變成了相對路徑，就能正確地找到了添加如下配置：
 

"homepage":"."

然後就開始打包 react：

npm run-script build

4. 打包electron

常用打包插件

• electron-builder
• electron-packager

安裝electron-packager

# knownsec-fed目錄下安裝electron-packager包
npm install electron-packager --save-dev
# 安裝electron-packager命令
npm install electron-packager -g

electron-packager命令介紹

electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>

• location of project: 項目的本地地址，此處我這邊是 ~/knownsec-fed
• location of project: 項目名稱，此處是 knownsec-fed
• platform: 打包成的平臺
• architecture: 使用 x86 還是 x64 還是兩個架構都用
• electron version: electron 的版本

於是，根據我這邊的情況在 package.json 文件的在 scripts 中加上如下代碼：

"package": "electron-packager /home/react-electron react-electron --all --out ~/ --electron-version 2.0.6"

打包完成後會在～/目錄下生成對應平臺的包，在上述命令的--out後面可見

開始打包

npm run-script package

提醒

由於打包的時候會把瀏覽器內核完整打包進去，所以就算你的項目開發就幾百k的資源，但最終的打包文件估計也會比較大。

5. 項目源文件加密

可以看到，在每個包下的resources文件夾裏的app文件夾 就是我們寫的程序，這樣我們的代碼就是暴露在用戶電腦上的，這非常的不安全，還好electron 自帶了加密功能。

首先安裝asar

#安裝asar實用程序
npm install -g asar

接下來在生成的應用的resources文件夾下執行下面命令：

asar pack ./app app.asar

執行完畢後在resources文件夾下可以看見生成的app.asar文件，此時可以把resources目錄下的app文件夾刪除。

至此完成源代碼文件的加密。

6. 結束語

  electron確實是一個跨平臺開發應用的利器，通過web開發就能實現wirte once, run every where的理念。

 最後提一下遇到的坑以及一些總結：

1. 在electron裏面可以調用nodejs幾乎所有的功能，當然前提是需要require nodejs的包；

2. 在react的js頁面或者公司項目用到的Ant Design的一些js頁面需要用到electron時候，通過官方的

const electron = require('electron')

語句並不能成功引入，此時需要通過以下語句引入；

const electron = window.require('electron')

3. 還有，最最最重要的一點！！！！開發時候一般都是在main中通過react項目的URL去熱調試應用，BUT！！此時請在electron生成的窗口中進行調試！！如果只在瀏覽器的頁面查看效果，會提示electron的模塊無法導入，無論你用啥方法！

4. 最後，使用nodejs的fs包和electron的dialog、app類能夠首先調用不同平臺的文件選擇器和一些特殊文件夾的的功能，比如說桌面、用戶默認數據文件夾的修改。這裏不多作描述了。～～