Electron 应用打包和分发的最佳实践 - 面试题

将 Electron 应用打包并分发给用户是开发流程的重要环节。本文将介绍 Electron 应用的打包、签名、发布等最佳实践。

打包工具选择

1. electron-builder (推荐)

electron-builder 是目前最流行的 Electron 打包工具,支持多平台打包和自动更新。

安装

bash
npm install --save-dev electron-builder

配置示例

json
// package.json
{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyApp",
    "directories": {
      "output": "dist"
    },
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64", "ia32"]
        }
      ],
      "icon": "build/icon.ico"
    },
    "mac": {
      "target": [
        {
          "target": "dmg",
          "arch": ["x64", "arm64"]
        }
      ],
      "icon": "build/icon.icns",
      "category": "public.app-category.productivity"
    },
    "linux": {
      "target": [
        {
          "target": "AppImage",
          "arch": ["x64"]
        },
        {
          "target": "deb",
          "arch": ["x64"]
        }
      ],
      "icon": "build/icon.png",
      "category": "Utility"
    }
  },
  "scripts": {
    "build": "electron-builder",
    "build:win": "electron-builder --win",
    "build:mac": "electron-builder --mac",
    "build:linux": "electron-builder --linux"
  }
}

2. electron-packager

electron-packager 是另一个打包工具,功能相对简单。

bash
npm install --save-dev electron-packager

javascript
// package.json
{
  "scripts": {
    "package": "electron-packager . MyApp --platform=all --arch=x64 --out=dist/"
  }
}

Windows 平台打包

NSIS 安装程序配置

json
{
  "build": {
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": ["x64"]
        }
      ],
      "artifactName": "${productName}-${version}-${arch}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "MyApp",
      "installerIcon": "build/icon.ico",
      "uninstallerIcon": "build/icon.ico",
      "installerHeader": "build/header.bmp",
      "installerSidebar": "build/sidebar.bmp",
      "deleteAppDataOnUninstall": false
    }
  }
}

代码签名

Windows 应用签名需要购买代码签名证书。

json
{
  "build": {
    "win": {
      "certificateFile": "path/to/certificate.pfx",
      "certificatePassword": "your-password"
    }
  }
}

macOS 平台打包

DMG 配置

json
{
  "build": {
    "mac": {
      "target": "dmg",
      "icon": "build/icon.icns",
      "category": "public.app-category.productivity",
      "hardenedRuntime": true,
      "gatekeeperAssess": false,
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist"
    },
    "dmg": {
      "contents": [
        {
          "x": 130,
          "y": 220
        },
        {
          "x": 410,
          "y": 220,
          "type": "link",
          "path": "/Applications"
        }
      ],
      "window": {
        "width": 540,
        "height": 380
      }
    }
  }
}

代码签名和公证

macOS 应用需要签名和公证才能在较新版本上正常运行。

bash
# 签名
codesign --deep --force --verify --verbose --sign "Developer ID Application: Your Name" dist/MyApp.app

# 公证
xcrun notarytool submit dist/MyApp.dmg --apple-id "your@email.com" --password "app-specific-password" --team-id "TEAMID" --wait

json
{
  "build": {
    "mac": {
      "identity": "Developer ID Application: Your Name",
      "hardenedRuntime": true,
      "entitlements": "build/entitlements.mac.plist",
      "entitlementsInherit": "build/entitlements.mac.plist"
    }
  }
}

Linux 平台打包

AppImage 配置

json
{
  "build": {
    "linux": {
      "target": "AppImage",
      "icon": "build/icon.png",
      "category": "Utility",
      "maintainer": "Your Name",
      "vendor": "Your Company",
      "synopsis": "My Application"
    }
  }
}

DEB 包配置

json
{
  "build": {
    "linux": {
      "target": "deb",
      "icon": "build/icon.png",
      "category": "Utility",
      "depends": ["gconf2", "gconf-service", "libnotify4", "libappindicator1", "libxtst6", "libnss3"]
    }
  }
}

自动更新

electron-updater 配置

bash
npm install electron-updater

javascript
// main.js
const { autoUpdater } = require('electron-updater')

app.whenReady().then(() => {
  autoUpdater.checkForUpdatesAndNotify()
})

autoUpdater.on('update-available', (info) => {
  console.log('Update available:', info)
})

autoUpdater.on('update-downloaded', (info) => {
  autoUpdater.quitAndInstall()
})

json
// package.json
{
  "build": {
    "publish": {
      "provider": "github",
      "owner": "your-username",
      "repo": "your-repo"
    }
  }
}

优化应用体积

1. 排除不必要的文件

json
{
  "build": {
    "files": [
      "build/**/*",
      "node_modules/**/*",
      "package.json"
    ],
    "asarUnpack": [
      "node_modules/some-module/**/*"
    ]
  }
}

2. 使用生产依赖

bash
npm install --production

3. 压缩资源

json
{
  "build": {
    "compression": "maximum",
    "fileAssociations": [
      {
        "ext": "myfile",
        "name": "My File",
        "role": "Editor"
      }
    ]
  }
}

CI/CD 集成

GitHub Actions 示例

yaml
name: Build and Release

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [macos-latest, windows-latest, ubuntu-latest]
    
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      
      - name: Install dependencies
        run: npm ci
      
      - name: Build
        run: npm run build
      
      - name: Release
        uses: softprops/action-gh-release@v1
        with:
          files: dist/*
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

安全最佳实践

1. 禁用开发者工具(生产环境)

javascript
// main.js
if (process.env.NODE_ENV === 'production') {
  mainWindow.webContents.closeDevTools()
}

2. 使用 CSP(Content Security Policy)

html
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

3. 验证更新包

javascript
autoUpdater.setFeedURL({
  url: 'https://your-server.com/updates',
  headers: {
    'Authorization': 'Bearer your-token'
  }
})

常见问题

Q: 如何减小应用体积?A: 排除不必要的文件、使用生产依赖、启用压缩、考虑使用 electron-forge 或 electron-builder 的优化选项。

Q: macOS 公证失败怎么办?A: 确保使用有效的开发者证书、检查 entitlements 配置、使用正确的 app-specific-password。

Q: 如何实现增量更新?A: electron-updater 默认支持增量更新,只需配置正确的发布服务器和版本号。

Q: Windows 签名证书在哪里购买?A: 可以从 DigiCert、Sectigo、GlobalSign 等受信任的证书颁发机构购买。