打包配置 #

一、打包工具概述 #

1.1 主流打包工具 #

工具	特点	推荐度
electron-builder	功能强大、配置简单	推荐
electron-forge	官方工具、模块化	推荐
electron-packager	简单易用	一般

1.2 打包流程 #

text

源代码
    │
    ▼
┌─────────────────┐
│   依赖安装       │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   代码构建       │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   资源打包       │
└────────┬────────┘
         │
         ▼
┌─────────────────┐
│   生成安装包     │
└────────┬────────┘
         │
         ▼
    安装包/可执行文件

二、electron-builder #

2.1 安装 #

bash

npm install electron-builder --save-dev

2.2 package.json 配置 #

json

{
    "name": "my-electron-app",
    "version": "1.0.0",
    "description": "我的 Electron 应用",
    "main": "electron/main.js",
    "author": "Your Name",
    "license": "MIT",
    "scripts": {
        "start": "electron .",
        "build": "electron-builder",
        "build:win": "electron-builder --win",
        "build:mac": "electron-builder --mac",
        "build:linux": "electron-builder --linux"
    },
    "build": {
        "appId": "com.example.myapp",
        "productName": "My App",
        "directories": {
            "output": "dist",
            "buildResources": "build"
        },
        "files": [
            "electron/**/*",
            "src/**/*",
            "package.json"
        ],
        "mac": {
            "icon": "build/icon.icns",
            "category": "public.app-category.productivity",
            "target": ["dmg", "zip"]
        },
        "win": {
            "icon": "build/icon.ico",
            "target": ["nsis", "portable"]
        },
        "linux": {
            "icon": "build/icon.png",
            "target": ["AppImage", "deb"]
        }
    },
    "devDependencies": {
        "electron": "^28.0.0",
        "electron-builder": "^24.9.1"
    }
}

2.3 独立配置文件 #

yaml

# electron-builder.yml
appId: com.example.myapp
productName: My App
copyright: Copyright © 2024

directories:
    output: dist
    buildResources: build

files:
    - electron/**/*
    - src/**/*
    - package.json
    - "!**/*.map"
    - "!**/node_modules/*/{CHANGELOG.md,README.md}"

extraResources:
    - resources/**/*

mac:
    icon: build/icon.icns
    category: public.app-category.productivity
    hardenedRuntime: true
    gatekeeperAssess: false
    entitlements: build/entitlements.mac.plist
    entitlementsInherit: build/entitlements.mac.plist
    target:
        - target: dmg
          arch:
              - x64
              - arm64
        - target: zip
          arch:
              - x64
              - arm64

dmg:
    contents:
        - x: 130
          y: 220
        - x: 410
          y: 220
          type: link
          path: /Applications

win:
    icon: build/icon.ico
    target:
        - target: nsis
          arch:
              - x64
              - ia32
        - target: portable
          arch:
              - x64

nsis:
    oneClick: false
    allowToChangeInstallationDirectory: true
    createDesktopShortcut: true
    createStartMenuShortcut: true
    installerIcon: build/icon.ico
    uninstallerIcon: build/icon.ico

linux:
    icon: build/icon.png
    category: Utility
    maintainer: your@email.com
    target:
        - target: AppImage
          arch:
              - x64
        - target: deb
          arch:
              - x64

appImage:
    systemIntegration: ask

deb:
    priority: optional

2.4 打包命令 #

bash

# 打包所有平台
npm run build

# 打包指定平台
npm run build:win
npm run build:mac
npm run build:linux

# 打包指定架构
electron-builder --win --x64
electron-builder --mac --arm64

# 打包指定格式
electron-builder --win nsis
electron-builder --mac dmg

# 不构建直接打包
electron-builder --dir

2.5 图标准备 #

text

build/
├── icon.icns     # macOS 图标 (512x512)
├── icon.ico      # Windows 图标 (256x256)
├── icon.png      # Linux 图标 (512x512)
└── background.png # Windows 安装背景 (可选)

三、electron-forge #

3.1 安装 #

bash

npm install -g @electron-forge/cli
npx electron-forge import

3.2 配置文件 #

javascript

// forge.config.js
module.exports = {
    packagerConfig: {
        name: 'My App',
        executableName: 'my-app',
        appBundleId: 'com.example.myapp',
        icon: 'build/icon',
        asar: true,
        ignore: [
            /^\/\.git/,
            /^\/node_modules/,
            /^\/src/
        ]
    },
    makers: [
        {
            name: '@electron-forge/maker-squirrel',
            config: {
                name: 'my-app',
                iconUrl: 'https://example.com/icon.ico',
                setupIcon: 'build/icon.ico'
            }
        },
        {
            name: '@electron-forge/maker-zip',
            platforms: ['darwin']
        },
        {
            name: '@electron-forge/maker-deb',
            config: {}
        },
        {
            name: '@electron-forge/maker-rpm',
            config: {}
        }
    ],
    publishers: [
        {
            name: '@electron-forge/publisher-github',
            config: {
                repository: {
                    owner: 'your-username',
                    name: 'your-repo'
                },
                prerelease: false
            }
        }
    ]
};

3.3 打包命令 #

bash

# 开发
npm start

# 打包（不生成安装包）
npm run package

# 生成安装包
npm run make

# 发布
npm run publish

四、打包优化 #

4.1 减小体积 #

json

{
    "build": {
        "files": [
            "electron/**/*",
            "src/**/*",
            "!**/*.map",
            "!**/*.ts",
            "!**/node_modules/*/{test,__tests__,tests,examples,example,docs}",
            "!**/node_modules/.bin"
        ],
        "asarUnpack": [
            "resources/**/*"
        ]
    }
}

4.2 ASAR 打包 #

javascript

// ASAR 是一种归档格式，可以加快加载速度
// 默认启用，可以排除某些文件

{
    "build": {
        "asar": true,
        "asarUnpack": [
            "native-module.node",
            "resources/**/*"
        ]
    }
}

4.3 依赖优化 #

json

{
    "dependencies": {
        "只包含生产依赖": "..."
    },
    "devDependencies": {
        "开发依赖放这里": "..."
    }
}

五、环境配置 #

5.1 环境变量 #

javascript

// 构建时设置环境变量
{
    "scripts": {
        "build": "cross-env NODE_ENV=production electron-builder"
    }
}

5.2 多环境配置 #

javascript

// electron-builder.js
const config = {
    production: {
        appId: 'com.example.myapp',
        productName: 'My App'
    },
    development: {
        appId: 'com.example.myapp.dev',
        productName: 'My App Dev'
    }
};

module.exports = config[process.env.NODE_ENV || 'production'];

六、签名配置 #

6.1 macOS 签名 #

yaml

mac:
    hardenedRuntime: true
    gatekeeperAssess: false
    entitlements: build/entitlements.mac.plist
    entitlementsInherit: build/entitlements.mac.plist
    provisioningProfile: build/embedded.provisionprofile

xml

<!-- build/entitlements.mac.plist -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>com.apple.security.cs.allow-jit</key>
    <true/>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
</dict>
</plist>

6.2 Windows 签名 #

yaml

win:
    certificateFile: build/certificate.pfx
    certificatePassword: ${env.WIN_CERT_PASSWORD}
    sign: scripts/sign.js

七、CI/CD 集成 #

7.1 GitHub Actions #

yaml

# .github/workflows/build.yml
name: Build

on:
    push:
        tags:
            - 'v*'

jobs:
    build:
        runs-on: ${{ matrix.os }}
        strategy:
            matrix:
                os: [macos-latest, windows-latest, ubuntu-latest]
        
        steps:
            - uses: actions/checkout@v4
            
            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: '20'
            
            - name: Install dependencies
              run: npm ci
            
            - name: Build
              run: npm run build
            
            - name: Upload artifacts
              uses: actions/upload-artifact@v4
              with:
                  name: ${{ matrix.os }}
                  path: dist/

7.2 自动发布 #

yaml

- name: Release
    uses: softprops/action-gh-release@v1
    with:
        files: dist/**
    env:
        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

八、总结 #

8.1 核心要点 #

要点	说明
electron-builder	推荐的打包工具
图标准备	准备各平台图标
体积优化	排除不必要文件
签名	macOS/Windows 签名
CI/CD	自动化构建发布

8.2 下一步 #

现在你已经掌握了打包配置，接下来让我们学习自动更新，深入了解 Electron 应用的自动更新机制！