Electron安裝打包指南

  • 2020 年 12 月 14 日
  • 筆記

當前環境Debian Linux-Deepin

安裝Node

直接下載

命令下載

下載

wget //nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz

解壓，解壓後在當前盤多了個文件夾node-v14.15.1-linux-x64.(可自行改名)

sudo tar -zxvf node-v14.15.1-linux-x64.tar.gz

建立軟鏈接

sudo ln -s /盤路徑/node-v14.15.1-linux-x64/bin/node /usr/local/bin/
sudo ln -s /盤路徑/node-v14.15.1-linux-x64/bin/npm /usr/local/bin/

查看版本

node -v
npm -v

卸載Node

1、卸載npm

sudo npm uninstall npm -g

2、卸載node

sudo apt-get remove nodejs npm -y

3、檢查是否還存在

  • 進入/usr/local/lib 刪除所有 node 和 node_modules文件夾
  • 進入/usr/local/include 刪除所有 node 和 node_modules 文件夾
  • 進入 /usr/local/bin 刪除 node 的可執行文件
sudo rm -rf /usr/local/lib/node*
sudo rm -rf /usr/local/include/node*
sudo rm -rf /usr/local/bin/node*
sudo rm -rf /usr/local/node*

設置淘寶鏡像源

npm config set ELECTRON_MIRROR=//npm.taobao.org/mirrors/electron/

查看當前鏡像源

npm config get registry

安裝Electron

採用命令全局安裝electron。

npm install electron -g

建立軟鏈接

sudo ln -s /盤路徑/node-v14.15.1-linux-x64/bin/electron /usr/local/bin/

查看當前electron版本

electron -v

新建項目

創建一個文件夾surround：

mkdir surround && cd surround

建立一個包文件

npm init -y

生成一個該項目的描述文件package.json

{
  "name": "Surround",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

創建腳本文件

建一個main.js文件，並加入如下js內容。

const { app, BrowserWindow } = require('electron')
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

創建網頁

對應於main.js中加載的網頁地址，新建一個html頁面。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
    <h1>Hello World!</h1>
    <p>
        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>.
    </p>
</body>
</html>

更改啟動腳本

更改新建項目階段所創建的package.json文件，內容為如下

{
    "name": "Surround",
    "version": "0.1.0",
    "main": "main.js"
}

啟動程序

進入到surround文件夾內，按照命令啟動程序即可

electron .

或是在package.json中變更為如下腳本

{
    "name": "Surround",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    }
}

則可通過如下命令啟動程序

npm start

如顯示如下錯誤，不要用sudo打頭即可。

Running as root without --no-sandbox is not supported.

安裝打包工具

本次使用electron-packager，來完成打包工作，並採用全局安裝。

npm install electron-packager -g

建立軟鏈接

sudo ln -s /當前node文件夾路徑/node-v14.15.1-linux-x64/bin/electron-packager /usr/local/bin/

安裝依賴項

更改package.json文件，增加依賴項，可通過electron -v查看當前electron版本，將依賴項加入到devDependencies節點內。

{
    "name": "Surround",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron ."
    },
    "devDependencies": {
        "electron": "~11.0.4"
    }    
}

執行安裝依賴模塊命令

npm install

當前文件夾下多了node_modules文件夾，存放當前項目依賴的模塊，並還多了一個package-lock.json文件，該文件用於鎖定當前依賴的模塊來源及版本號。

執行打包

在當前文件夾內，採用全局命令打包形式，依照如下命令打包。

electron-packager . 'Surround' --platform=linux --arch=x64 --out=./out --app-version=0.1.0

腳本格式對照(僅限如上使用到的)

electron-packager 
<location of project> 項目位置 . 代表當前文件夾下
<name of project> 打包項目名稱
<platform> 目標運行平台
<architecture> 底層架構類型
<optional options> 可選配置

或者將命令寫入package.json中，執行npm run-script package

{
    "name": "Surround",
    "version": "0.1.0",
    "main": "main.js",
    "scripts": {
        "start": "electron .",
        "package": "electron-packager . 'Surround' --platform=linux --arch=x64 --out=./out --app-version=0.1.0"
    },
    "devDependencies": {
        "electron": "~11.0.4"
    }    
}

再執行如下命令打包

npm run-script package

最終都會在當前文件夾內多出一個out文件夾，其中放置着打包好了的程序。

內部詳細文件為應用具體文件

如此，完成好了打包的應用程序，直接運行Surround可執行程序是沒得問題的。

2020-12-14,望技術有成後能回來看見自己的腳步

VirMach 便宜 VPS

QNews

QNews