wondows10用Electron打包threejs的项目记录

news2024/9/22 7:39:52

背景

电脑是用的mac，安装了parallels desktop ,想用electron 想同时打包出苹果版本和windows版本。因为是在虚拟机里安装，它常被我重装，所以记录一下打包的整个过程。另外就是node生态太活跃，几个依赖没记录具体版本，很容易各种报错。

需要环境

window10

node: 18.18.2

yarn: 1.22.21

nrm: 1.2.6

electron: 23.3.13

准备配置环境

1、安装nvm（方便切换node版本）

到 Releases · coreybutler/nvm-windows · GitHub

下载 nvm-setup 并安装

2、选择node版本(当前作者使用的是18.18.2，虽然当前最新版本已经上20了)

在cmd中安装node版本

> nvm install 18.18.2

3、切换镜像（没有设置镜像前，有时会举步维艰）

> npm config set registry https://registry.npmmirror.com/

4、安装nrm(以前只知道淘宝源，现在发现有nrm可以管理源，在有些源更新不及时，切换一下或许就成功了)

> npm install -g nrm

5、查看选择源

nrm ls

选择 tencent （因为作者在当时使用taobao云时，有个依赖一直超时，选择tencent后，可以了）

nrm use tencent

6、安装yarn （为什么安装yarn，有些依赖关系你没搞懂前，你用npm试试，绝对会让你怀疑人生）

> npm install -g yarn

7、初始化项目(注意填写 author 和 description ，在后面的打包中是必须项)

> yarn init

8、开始安装electron 23

> yarn add electron@23.3.13

或者你不知道23版本哪个最新

> yarn add electron@23

运行时查看

1、安装官方的例子，假设我们的入口文件是 index.html

我们新建一个 main.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()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

2、修改 package.json （加入一个 start 脚本）

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "author": "hott1985",
  "description": "Hello World!",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "license": "MIT",
  "devDependencies": {
    "electron": "23.1.3"
  }
}

3、运行查看

> yarn run start

打包exe

因为我们的环境是window10所以打包出来可能是exe的

1、安装打包依赖 (官方方法是 yarn add --dev @electron-forge/cli 上面有 --dev 但是因为我们用的不是最新的，所以不要加 --dev 由 yarn 自动去分析依赖关系)

> yarn add @electron-forge/cli

2、使用现成的转化脚本将项目导入至 Electron Forge

> npx electron-forge import

3、这个时候的package.json大概是长这样的

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "author": "hott1985",
  "description": "Hello World!",
  "scripts": {
    "start": "electron-forge start",
    "test": "echo \"Error: no test specified\" && exit 1",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "license": "MIT",
  "dependencies": {
    "@electron-forge/cli": "^7.3.0",
    "@electron-forge/plugin-fuses": "^7.3.0",
    "@electron/fuses": "^1.7.0",
    "electron-squirrel-startup": "^1.0.0"
  },
  "devDependencies": {
    "@electron-forge/maker-deb": "^7.3.0",
    "@electron-forge/maker-rpm": "^7.3.0",
    "@electron-forge/maker-squirrel": "^7.3.0",
    "@electron-forge/maker-zip": "^7.3.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.3.0",
    "electron": "23.3.13"
  }
}