咸鱼

咸鱼是以盐腌渍后，晒干的鱼

0%

Electron初步尝试

发表于 更新于 分类于

按照官网的 【Quick Start】 教程做一遍

一、创建工程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$ mkdir electron-app
$ cd electron-app/
$ yarn init 或者 npm init
$ ls
package.json
$ cat package.json
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT"
}

# 安装electron开发依赖
$ yarn --registry=https://registry.npm.taobao.org add --dev electron
或者
$ npm --registry=https://registry.npm.taobao.org install --save-dev electron
$ ls
node_modules/  package.json  yarn.lock
$ cat package.json
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT",
  "devDependencies": {
    "electron": "^16.0.6"
  }
}

二、增加命令

package.json 增加一条 start 命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT",
  "devDependencies": {
    "electron": "^16.0.6"
  },
  "scripts": {
    "start": "electron ."
  }
}

三、Demo代码

index.html 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
    <!-- 您也可以此进程中运行其他文件 -->
    <!-- <script src="./renderer.js"></script> -->
</body>
</html>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 控制应用生命周期和创建原生浏览器窗口的模组
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')

  // 打开开发工具
  // mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他
    // 打开的窗口，那么程序会重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在
// 任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在这个文件中，你可以包含应用程序剩余的所有部分的代码，
// 也可以拆分成几个文件，然后用 require 导入。

preload.js

1
2
3
4
5
6
7
8
9
10
11
12
13
// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })

四、启动

1
$ yarn start 或者 npm start

占用内存大概67MB

五、打包分发

官网介绍可以使用以下工具来分发您的应用程序：

electron-forge 官网介绍这是最快捷的打包方式。
electron-builder(推荐) 官网介绍这是一个完备的Electron应用打包和分发解决方案，它致力于软件开发的集成体验，另外还带有在线更新的功能。
electron-packager 直接打包为单文件，不支持跨平台打包，打包后体积较大。

5.1、electron-forge快捷打包

forge可以自动检测你的系统，然后打包成对应的可执行文件，但是可配置项目比较少。

5.1.1、 安装forge依赖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
$ yarn --registry=https://registry.npm.taobao.org add --dev @electron-forge/cli
或者
$ npm --registry=https://registry.npm.taobao.org install --save-dev @electron-forge/cli
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

> lzma-native@8.0.1 install D:\electron-app\node_modules\lzma-native
> node-gyp-build

npm WARN electron-app@1.0.0 No repository field.

+ @electron-forge/cli@6.0.0-beta.61
added 472 packages from 359 contributors in 51.968s

$ npx electron-forge import
- Checking your system
‼ You are running Node.js version 12.9.1, but Electron Forge requires Node.js >= 12.13.0.
√ Checking your system
It looks like you are missing some dependencies you need to get Electron running.
Make sure you have git installed and Node.js version >= 12.13.0

# 安装nodejs版本[v12.16.0](https://nodejs.org/download/release/v12.16.0/)，重新来一次
# 这个命令是初始化electron-forge，会自动修改 package.json 的内容: 添加几个打包的指令
$ npx electron-forge import
- Checking your system
√ Checking your system
- Initializing Git Repository
√ Initializing Git Repository
- Writing modified package.json file
√ Writing modified package.json file
- Installing dependencies
√ Installing dependencies
- Writing modified package.json file
√ Writing modified package.json file
- Fixing .gitignore
√ Fixing .gitignore


We have ATTEMPTED to convert your app to be in a format that electron-forge understands.

Thanks for using "electron-forge"!!!

$ cat package.json
{
  "name": "electron-app",
  "version": "1.0.0",
  "main": "index.js",
  "authors": "demo",
  "description": "this is demo",
  "license": "MIT",
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.61",
    "@electron-forge/maker-deb": "^6.0.0-beta.61",
    "@electron-forge/maker-rpm": "^6.0.0-beta.61",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.61",
    "@electron-forge/maker-zip": "^6.0.0-beta.61",
    "electron": "^16.0.6"
  },
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

5.1.2、 forge make 编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
$ npm run package
> electron-app@1.0.0 package D:\gitlab\electron-app
> electron-forge package

- Checking your system
√ Checking your system
- Preparing to Package Application for arch: x64
√ Preparing to Package Application for arch: x64
- Preparing native dependencies
√ Preparing native dependencies
- Packaging Application
√ Packaging Application

$ npm run make

# 注意: package.json 中不能缺少 authors\description .

> electron-app@1.0.0 make D:\electron-app
> electron-forge make

- Checking your system
√ Checking your system
- Resolving Forge Config
√ Resolving Forge Config
We need to package your application before we can make it
- Preparing to Package Application for arch: x64
√ Preparing to Package Application for arch: x64
- Preparing native dependencies
√ Preparing native dependencies
- Packaging Application
√ Packaging Application
Making for the following targets: squirrel
- Making for target: squirrel - On platform: win32 - For arch: x64
√ Making for target: squirrel - On platform: win32 - For arch: x64

编译后的文件在 out 目录下：

  • electron-app-win32-x64 目录是打包(electron-forge package)目录，所有文件187MB，一般用于调试，不是分发。
  • make/squirrel.windows/x64 目录是编译(electron-forge make) 目录，只有一个文件79.5MB，这就是可以分发的包。

运行占用内存72MB

5.1.3、 forge 跨平台打包

【参考 electronforge makers 配置】

好像forge目前只能打包当前机器的平台，我在Win10平台通过修改配置，每次依然只输出Win平台，forge 并不会打包 linux 和 macos 平台的包，或者说我还没尝试成功？

如果实在不支持跨平台打包，可以在Linux、MacOS平台进行打包。

5.2、 electron-builder打包

本以为electron-builder 对跨平台构建支持的很好，但打开官网多平台构建看到的第一段话却是：

Don’t expect that you can build app for all platforms on one platform.
不要期望你可以在一个平台上创建适用于所有平台的应用。

本来 electron-builder 提供了一个在线跨平台构建的服务，但后来停掉了。

现在【官网】推荐使用Docker镜像来做跨平台构建。

1
2
3
4
5
6
7
8
9
docker run --rm -ti \
 --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS_TAG|TRAVIS|TRAVIS_REPO_|TRAVIS_BUILD_|TRAVIS_BRANCH|TRAVIS_PULL_REQUEST_|APPVEYOR_|CSC_|GH_|GITHUB_|BT_|AWS_|STRIP|BUILD_') \
 --env ELECTRON_CACHE="/root/.cache/electron" \
 --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
 -v ${PWD}:/project \
 -v ${PWD##*/}-node-modules:/project/node_modules \
 -v ~/.cache/electron:/root/.cache/electron \
 -v ~/.cache/electron-builder:/root/.cache/electron-builder \
 electronuserland/builder:wine

但还是不要想着跨平台构建了，说不定很多坑位呢？而且Windows上用Docker也是不少坑位的吧!
还是老老实实在相应的平台做构建吧！

5.2.1、 安装electron-builder依赖

官网参考

node 版本要求 >=14.0.0

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
$ ls
index.html  index.js  node_modules/  package.json  preload.js  yarn.lock

$ cat package.json
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT",
  "devDependencies": {
    "electron": "^16.0.6"
  },
  "scripts": {
    "start": "electron ."
  }
}

$ yarn --registry=https://registry.npm.taobao.org add --dev electron-builder
或者
$ npm --registry=https://registry.npm.taobao.org install --save-dev electron-builder

$ cat package.json
{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT",
  "devDependencies": {
    "electron": "^16.0.6",
    "electron-builder": "^22.14.5"
  },
  "scripts": {
    "start": "electron ."
  }
}

$ vim package.json

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "this is demo",
  "main": "index.js",
  "author": "demo",
  "license": "MIT",
  "devDependencies": {
    "electron": "^16.0.6",
    "electron-builder": "^22.14.5"
  },
  "build": {
      "productName": "demo",
      "appId": "com.github.demo",
      "asar": false,    // 是否将前端代码打包
      "copyright": "© demo 2022",
      "directories": {
        "output": "dist"
      },
      "nsis": {
        "oneClick": false,
        "allowElevation": true,
        "allowToChangeInstallationDirectory": true, // 允许用户自定义安装目录
        "installerIcon": "favicon.ico",
        "uninstallerIcon": "favicon.ico",
        "installerHeaderIcon": "favicon.ico",
        "createDesktopShortcut": true,
        "createStartMenuShortcut": true,
        "shortcutName": "demo"
      },
      "win": {
        "icon": "favicon.ico",
        "requestedExecutionLevel": "requireAdministrator",  // 获取管理员权限
        "target": [
          {
            "target": "nsis",
            "arch": [
              "x64"
            ]
          }
        ],
        "extraFiles": { 
          "from": "./from/",
          "to": "to"
        }
      }
    },
    "scripts": {
      "start": "electron .",
      "distOS": "electron-builder --mac",
      "distWin64": "electron-builder --win --x64",
      "distWin32": "electron-builder --win --ia32",
      "postinstall": "electron-builder install-app-deps"
    }
}

favicon.ico 文件尺寸必须是256 * 256

在User根目录的 .npmrc 文件 （如果没有则新建一个），设置以下镜像地址：

1
ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

5.2.2、 electron-builder执行构建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ npm run distWin64
> electron-demo@1.0.0 distWin64
> electron-builder --win --x64

  • electron-builder  version=22.14.5 os=10.0.18362
  • loaded configuration  file=package.json ("build" field)
  • packaging       platform=win32 arch=x64 electron=16.0.6 appOutDir=dist\win-unpacked
  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack files that must be externally available
  • file source doesn't exist  from=C:\Users\Administrator\Desktop\electron-app2\from
  • asar usage is disabled — this is strongly not recommended  solution=enable asar and use asarUnpack to unpack files that must be externally available
  • building        target=nsis file=dist\demo Setup 1.0.0.exe archs=x64 oneClick=false perMachine=false
  ⨯ Get "https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z": dial tcp 20.205.243.166:443: connectex: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。

# 换一下电脑的DNS为 `119.29.29.29` 重新试一下就可以了。

  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z size=1.4 MB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-3.0.4.2/nsis-3.0.4.2.7z duration=18.361s
  • downloading     url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z size=731 kB parts=1
  • downloaded      url=https://github.com/electron-userland/electron-builder-binaries/releases/download/nsis-resources-3.4.1/nsis-resources-3.4.1.7z duration=2.328s
  • building block map  blockMapFile=dist\demo Setup 1.0.0.exe.blockmap

构建好的文件在dist目录下，demo Setup 1.0.0.exe 文件大小为 57.8MB，这是一个nsis安装包，可以自定义安装的目录。