Electron入门项目及打包_打包electron项目

作者：空白诗007 | 2024-07-26 21:33:28

踩

打包electron项目

Electron入门项目及打包

环境：

electron: v30.1.1 (2024-06-13)
nodejs: v20.12.2
1
2

文章目录

Electron入门项目及打包

1. 初始化 npm 项目

mkdir my-electron-app && cd my-electron-app
npm init
1
2

2. 安装 electron

npm install -g cnpm --registry=https://registry.npmmirror.com
cnpm install electron --save-dev
1
2

3. 编写electron程序

index.js

const { app, BrowserWindow } = require('electron/main')

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
    createWindow()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Hello from Electron renderer!</title>
</head>

<body>
    <h1>Hello from Electron renderer!</h1>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

package.json

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^30.1.1"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 运行

npm run start
1

5. 打包

5.1 electron-builder打包

安装electron-builder

cnpm install electron-builder --save-dev
修改package.json

{
  "name": "electrontest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^30.1.1",
    "electron-builder": "^24.13.3"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

打包

npm run build
1

运行

cd dist/win-unpacked
electrontest.exe
1
2

5.2 手动打包

安装asar

npm install -g asar
1

asar -V
v3.2.0
1
2

打包源码到app.asar

新建pack文件夹，将index.js index.html package.json拷贝到pack文件

mkdir pack
asar ./ app.asar
1
2

将app.asar放到electron目录的resources文件夹中
运行

electron
1

5.3 不打包直接运行

v30.1.1 运行文件优先级：

 app.asar > app文件夹 > default_app.asar
1

By default Electron will search in the following order app.asar -> app -> default_app.asar。

electron\shell\common\node_bindings.cc

const std::vector<std::string> search_paths = {"app.asar", "app","default_app.asar"};
1

因此，直接将index.js index.html package.json拷贝electron目录的resources文件夹中即可直接运行。

目录结构如下

$ tree
.
+--- chrome_100_percent.pak
+--- chrome_200_percent.pak
+--- d3dcompiler_47.dll
+--- electron.exe
+--- ffmpeg.dll
+--- icudtl.dat
+--- libEGL.dll
+--- libGLESv2.dll
+--- LICENSE
+--- LICENSES.chromium.html
+--- locales
+--- resources
|   +--- app
|   |   +--- index.html
|   |   +--- index.js
|   |   +--- package.json
+--- resources.pak
+--- snapshot_blob.bin
+--- v8_context_snapshot.bin
+--- version
+--- vk_swiftshader.dll
+--- vk_swiftshader_icd.json
+--- vulkan-1.dll
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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/887322