[electron] 从0开始环境搭建 macos

环境搭建总览

# 1. 安装nvm
## 官网 : https://github.com/nvm-sh/nvm
## csdn加速 : https://gitcode.net/mirrors/nvm-sh/nvm
## git 下载
git clone https://github.com/nvm-sh/nvm.git
或
git clone https://gitcode.net/mirrors/nvm-sh/nvm.git

## 安装
bash install.sh

## 如果无法clone 	
## 修改 LINE57 
NVM_SOURCE_URL="https://github.com/${NVM_GITHUB_REPO}.git"
## 修改为 
NVM_SOURCE_URL="https://gitcode.net/mirrors/${NVM_GITHUB_REPO}.git"

## 安装完成修改镜像地址
export NVM_NODEJS_ORG_MIRROR="https://npm.taobao.org/mirrors/node"
export NVM_IOJS_ORG_MIRROR="https://npm.taobao.org/mirrors/iojs

## 如果nvm不在环境变量
vi ~/.profile
source ~/.bashrc

## 查看nvm所有命令
nvm -help 

## 查看nodejs版本
nvm list

## 安装nodejs
nvm install stable

## 查看node/npm版本
node -version
npm -verinon

# 2. 安装nrm
## nrm 官网 https://www.npmjs.com/package/nrm
npm install -g nrm --registry=https://registry.npmmirror.com
nrm --version

## 查看nrm命令行
nrm -help

## 使用
nrm use cnpm

# 4. electron 环境搭建
## electron官网 https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
mkdir my-electron-app && cd my-electron-app
npm init

npm install --save-dev electron
## 按照要求添加main.js 代码如下

## 运行查看效果
npm start 


# 5. 安装yarn
## yarn官网
## https://www.npmjs.com/package/yarn
npm install -g yarn


# 6. 安装electron builder
## electron builder 官网
## https://www.electron.build/#quick-setup-guide
yarn add electron-builder --dev

# 7. 设置builder的package.json
## 加入下方build内容

# 8. 输出所有内容
./node_modules/.bin/electron-builder
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

main.js 内容

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.loadURL('https://www.bilibili.com/')

    win.on('closed', () => { app.quit() })
}

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

运行效果

electron-builder打包前修改package.json

    "build": {
        "mac": {
            "target": [
                {
                    "target": "dmg",
                    "arch": [
                        "x64",
                        "arm64"
                    ]
                },
                {
                    "target": "zip",
                    "arch": [
                        "x64",
                        "arm64"
                    ]
                }
            ]
        },
        "win": {
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64",
                        "ia32"
                    ]
                },
                {
                    "target": "zip",
                    "arch": [
                        "x64",
                        "ia32"
                    ]
                }
            ]
        }
    }
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