xuxiaowei-com-cn/electron-tools

基于 Electron 25、Vite 4、Vue 3、element-plus 2、TypeScript 5 的工具箱

electron-tools

Electron 工具箱

基于 Electron 25、Vite 4、Vue 3、element-plus 2、TypeScript 5 的工具箱

为简化开发工作、提高生产率、解决常见问题而生

打包 & 产物

• Windows 平台
  • Node 16.x/18.x、electron 25.0.1 为例（2023-06-03）
    • 支持 ia32：打包大小 62.5 MB M，命令：npm run electron:build:win:ia32
    • 支持 x64：打包大小 66.9 M，命令：npm run electron:build:win:x64
    • 同时支持 ia32、x64：打包大小 129 M，命令：npm run electron:build
    • 注：命令行参数优先级高于配置文件

命令	Windows x86 架构	Windows x64 架构	支持 ia32 产物	支持 x64 产物	同时支持 ia32、x64 产物
electron:build:win:ia32	✅	✅	✅	❌	❌
electron:build:win:x64	❌	✅	❌	✅	❌
electron:build	❌	✅	✅	✅	✅

• Linux 平台
  • Node 16.x、electron 25.0.1 为例（2023-06-03）
    • 支持 .deb 产物：打包大小 64.8 M，命令：npm run electron:build:linux:deb
    • 支持 .rpm 产物：打包大小 64.7 M，命令：npm run electron:build:linux:rpm
    • 支持 .AppImage 产物：打包大小 92.8 M，命令：npm run electron:build
    • 支持 .tar.gz 产物：打包大小 88 M，命令：npm run electron:build
    • 支持 .tar.xz 产物：打包大小 64.6 M，命令：npm run electron:build
    • 注：命令行参数优先级高于配置文件

命令	支持 .deb 产物	支持 .rpm 产物	同时支持 .AppImage、.tar.gz、.tar.xz 产物
electron:build:linux:deb	✅	❌	❌
electron:build:linux:rpm	❌	✅	❌
electron:build	❌	❌	✅

发布 & 更新

• scheme.json

• GitHub electron-builder.json5 配置如下

  • GH_TOKEN：环境变量，访问 New personal access token (classic) 创建 Token，范围 repo
  • GitHub 地址配置（二选一）
    • package.json（不推荐，需要在 GitHub 页面设置为 release 发布，才能有自动更新）

      {
        "repository": {
          "type": "git",
          "url": "git+https://github.com/xuxiaowei-com-cn/electron-tools.git"
        }
      }

    • electron-builder.json5（推荐，优先级更高，可指定为 release 发布，自动支持自动更新，无需在 GitHub 页面设置）
      • publish：发布的配置，支持与 mac、win、linux 平级，也支持在 mac、win、linux 中单独配置
        • provider：发布到 GitHub 时的值为 github
        • owner：GitHub 用户名或组织名称
        • repo：仓库名称
        • channel：渠道，默认：latest
        • releaseType：发布类型，默认：draft。draft：草稿，prerelease：预发布，release：发布

      {
        "publish": [
          {
            "provider": "github",
            "owner": "xuxiaowei-com-cn",
            "repo": "electron-tools",
            "channel": "latest",
            "releaseType": "release"
          }
        ]
      }

• S3 electron-builder.json5 配置如下

  • publish：发布的配置，支持与 mac、win、linux 平级，也支持在 mac、win、linux 中单独配置
    • provider：发布到 S3 时的值为 s3
    • bucket：S3 的 bucket 名称
    • acl：S3 对象储存权限（可能存在无法修改的情况，推荐自己设置文件夹权限），枚举：private、public-read
    • path：S3 对象储存的文件夹，支持的环境变量：platform（平台）、version（版本号）、channel（渠道）等
    • region：S3 对象储存的区域（亚马逊），非亚马逊对象储存固定为 us-east-1 即可
    • endpoint：S3 对象储存的端点（桶）
    • channel：渠道，默认：latest
  • AWS_ACCESS_KEY_ID：环境变量，S3 对象储存的 Access Key，当存在参数为 --publish always 时，自动根据环境变量和配置上传产物
  • AWS_SECRET_ACCESS_KEY：环境变量，S3 对象储存的 Secret Key，当存在参数为 --publish always 时，自动根据环境变量和配置上传产物
  • 在 Windows 上运行 npm run electron:build:release ，将会打包并上传到 http://192.168.0.29:9000/electron-tools/win32/latest/ 以下文件（以 1.0.0 版本为例）
    • electron-tools_1.0.0-ia32.exe：仅支持在 32 位系统上运行
    • electron-tools_1.0.0-ia32.exe.blockmap
    • electron-tools_1.0.0-x64.exe：仅支持在 64 位系统上运行
    • electron-tools_1.0.0-x64.exe.blockmap
    • electron-tools_1.0.0.exe：同时支持在 32、64 位系统上运行
    • electron-tools_1.0.0.exe.blockmap
    • latest.yml：版本信息
      • 每次发布时，此文件将会被新版覆盖
      • 项目检查更新时，会获取此文件与当前启动项目对比
      • 仅发布 32 产物，运行 npm run electron:build:win:ia32:release
      • 仅发布 64 产物，运行 npm run electron:build:win:x64:release
      • 同时发布 32、64 产物，运行 npm run electron:build:win:release
  • MinIO

    {
      "publish": [
        {
          "provider": "s3",
          "bucket": "electron-tools",
          "acl": "public-read",
          "path": "/${platform}/${channel}/",
          "region": "us-east-1",
          "endpoint": "http://192.168.0.29:9000/",
          "channel": "latest"
        }
      ]
    }

  • OSS（阿里云对象储存）
    • endpoint：阿里云对象储存 OSS 的 endpoint 为上述 MinIO 对象储存的 https://{bucket}.{endpoint}
    • bucket：阿里云对象储存 OSS 的 bucket 为上述 MinIO 对象储存 bucket 内部的 path
    • 其他配置参考 MinIO

    {
      "publish": [
        {
          "provider": "s3",
          "bucket": "/",
          "path": "/${platform}/${channel}/",
          "endpoint": "https://public-electron-tools.oss-cn-qingdao.aliyuncs.com",
          "channel": "latest"
        }
      ]
    }

  • COS（腾讯云对象储存）
    • 与OSS（阿里云对象储存）相同

    {
      "publish": [
        {
          "provider": "s3",
          "bucket": "/",
          "path": "/${platform}/${channel}/",
          "endpoint": "https://public-1255740549.cos.ap-shanghai.myqcloud.com",
          "channel": "latest"
        }
      ]
    }

  • OBS（华为云对象储存）
    • 与OSS（阿里云对象储存）相同

    {
      "publish": [
        {
          "provider": "s3",
          "bucket": "/",
          "path": "/${platform}/${channel}/",
          "endpoint": "https://public-xuxiaowei.obs.cn-east-3.myhuaweicloud.com",
          "channel": "latest"
        }
      ]
    }

Init & Configuration

• Init

npm create vite@latest electron-tools -- --template vue-ts

• Electron 镜像

npm config set electron_mirror=https://npmmirror.com/mirrors/electron/
npm config set electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
npm i -D electron

• eslint

npm i -D eslint
npx eslint --init
# 选择
# To check syntax, find problems, and enforce code style
# JavaScript modules (import/export)
# Vue.js
# use TypeScript
# √ Browser
# Use a popular style guide
# Standard: https://github.com/standard/standard
# JavaScript

• husky

npx husky-init

依赖

npm i electron-log

npm i -D @element-plus/icons-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser @vitejs/plugin-vue electron electron-builder element-plus eslint eslint-config-standard eslint-plugin-import eslint-plugin-n eslint-plugin-promise eslint-plugin-vue husky sass typescript unplugin-auto-import unplugin-vue-components vite vue vue-router vue-tsc

文档

• electron-builder
  • Command Line Interface (CLI)
  • Publish
• about-npm
  • configuring-npm
    • package.json
• electron-builder
  • scheme.json