전자 빌더 패키징에 대한 자세한 소개

이 글은 전자 빌더 패키징에 대한 자세한 소개를 담고 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

전자 클라이언트 프로그램을 개발할 때 패키징은 피할 수 없는 문제입니다. 직장에서의 경험과 electron-builder에 대한 현재 이해를 바탕으로 몇 가지 통찰력을 공유하겠습니다. electron-builder的了解来分享一些心得。

基本概念

官网的定义

A complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto update” support out of the box.

关于electron和electron-builder的基础部分这篇文章就跳过了，有兴趣的话可以看这篇文章

如何使用

builder的使用和配置都是很简单的
builder配置有两种方式

package.json中直接配置使用（比较常用，我们下面着重来讲这个）

指定electron-builder.yml文件

demo地址会在文章末尾给出（demo项目中electron使用得是V2.0.7版本,目前更高得是2.0.8版本）。

下面是一个简单的package.js中带注释的配置

1. 基础配置

"build": {  // 这里是electron-builder的配置
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.xxx.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    // windows相关的配置
    "win": {  
      "icon": "xxx/icon.ico"//图标路径 
    }  
  }

在配置文件中加入以上的文件之后就可以打包出来简单的文件夹，文件夹肯定不是我们想要的东西。下一步我们来继续讲别的配置。

1. 打包目标配置

要打包成安装程序的话我们有两种方式，

1. 使用NSIS工具对我们的文件夹再进行一次打包，打包成exe

2. 通过electron-builder的nsis直接打包成exe，配置如下

"win": {  // 更改build下选项
    "icon": "build/icons/aims.ico",
    "target": [
      {
        "target": "nsis" // 我们要的目标安装包
      }
    ]
  },

1. 其他平台配置

  "dmg": { // macOSdmg
    "contents": [
      ...
    ]
    },
    "mac": {  // mac
      "icon": "build/icons/icon.icns"
    },
    "linux": { // linux
      "icon": "build/icons"
    }

1. nsis配置

这个要详细的讲一下，这个nsis的配置指的是安装过程的配置，其实还是很重要的，如果不配置nsis那么应用程序就会自动的安装在C盘。没有用户选择的余地，这样肯定是不行的

关于nsis的配置是在build中nsis这个选项中进行配置，下面是部分nsis配置

"nsis": {
  "oneClick": false, // 是否一键安装
  "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
  "allowToChangeInstallationDirectory": true, // 允许修改安装目录
  "installerIcon": "./build/icons/aaa.ico",// 安装图标
  "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
  "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
  "createDesktopShortcut": true, // 创建桌面图标
  "createStartMenuShortcut": true,// 创建开始菜单图标
  "shortcutName": "xxxx", // 图标名称
  "include": "build/script/installer.nsh", // 包含的自定义nsis脚本 这个对于构建需求严格得安装过程相当有用。
  "script" : "build/script/installer.nsh" // NSIS脚本的路径，用于自定义安装程序。 默认为build / installer.nsi  
},

关于include 和 script 到底选择哪一个 ？

在对个性化安装过程需求并不复杂，只是需要修改一下安装位置，卸载提示等等的简单操作建议使用include配置,如果你需要炫酷的安装过程，建议使用script进行完全自定义。

NSIS对于处理安装包这种东西，功能非常的强大。但是学习起来并不比一门高级语言要容易。其中的奥秘还要各位大佬自行探索

这里上一些学习资源

• NSIS初级篇

• NSIS 打包脚本基础

• 示例脚本

• NSIS论坛

1. 关于操作系统的配置

主要是windows中64和32位的配置

CLI参数

electron-builder --ia32 // 32位
electron-builder        // 64位(默认)

nsis中配置

"win": {
  "icon": "build/icons/aims.ico",
  "target": [
    {
      "target": "nsis",
      "arch": [ // 这个意思是打出来32 bit + 64 bit的包，但是要注意：这样打包出来的安装包体积比较大，所以建议直接打32的安装包。
        "x64", 
        "ia32"
      ]
    }
  ]
}

1. 更新配置

下面这个是给更新用的配置，主要是为了生成lastest.yaml

기본 개념

공식 웹사이트의 정의

즉시 "자동 업데이트" 지원을 통해 배포 가능한 macOS, Windows 및 Linux용 Electron 앱을 패키징하고 구축하기 위한 완벽한 솔루션입니다.

electron 및 Electron-builder 정보 이 글에서는 기본 부분을 건너뛰고 있습니다.

사용 방법

Builder 사용법 및 구성은 매우 간단합니다.
Builder

패키지를 구성하는 방법에는 두 가지가 있습니다. json에서 직접 사용합니다(더 일반적으로 사용되며 아래에서 이에 대해 중점적으로 설명합니다)

electron-builder.yml 파일을 지정하세요

데모 주소는 기사 마지막 부분에 제공됩니다(데모 프로젝트의 전자는 버전 V2를 사용합니다) .0.7(현재 업데이트됨 버전 2.0.8).

다음은 package.js의 간단한 주석이 달린 구성입니다

1. 기본 구성

"publish": [
  {
    "provider": "generic", // 服务器提供商 也可以是GitHub等等
    "url": "http://xxxxx/" // 服务器地址
  }
],

구성 파일에 추가하세요. 파일은 간단한 폴더로 패키징될 수 있습니다. 이 폴더는 확실히 우리가 원하는 것이 아닙니다. 다음으로 다른 구성에 대해 계속 이야기하겠습니다.

1. 패키징 대상 구성

을 설치 프로그램으로 패키징하려는 경우 두 가지 방법이 있습니다.

1. NSIS 도구를 사용하여 폴더를 다시 패키지하고 exe로 패키지합니다

2. electron-builder의 nsis를 통해 exe로 직접 패키지합니다. 구성은 다음과 같습니다🎜

"build": {
    "productName":"xxxx",//项目名 这也是生成的exe文件的前缀名
    "appId": "com.leon.xxxxx",//包名  
    "copyright":"xxxx",//版权  信息
    "directories": { // 输出文件夹
      "output": "build"
    }, 
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
      "allowToChangeInstallationDirectory": true, // 允许修改安装目录
      "installerIcon": "./build/icons/aaa.ico",// 安装图标
      "uninstallerIcon": "./build/icons/bbb.ico",//卸载图标
      "installerHeaderIcon": "./build/icons/aaa.ico", // 安装时头部图标
      "createDesktopShortcut": true, // 创建桌面图标
      "createStartMenuShortcut": true,// 创建开始菜单图标
      "shortcutName": "xxxx", // 图标名称
      "include": "build/script/installer.nsh", // 包含的自定义nsis脚本
    },
    "publish": [
      {
        "provider": "generic", // 服务器提供商 也可以是GitHub等等
        "url": "http://xxxxx/" // 服务器地址
      }
    ],
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "ia32"
          ]
        }
      ]
    },
    "linux": {
      "icon": "build/icons"
    }
  }

1. 🎜기타 플랫폼 구성🎜

  electron-builder build                    构建命名                      [default]
  electron-builder install-app-deps         下载app依赖
  electron-builder node-gyp-rebuild         重建自己的本机代码
  electron-builder create-self-signed-cert  为Windows应用程序创建自签名代码签名证书
  electron-builder start                    使用electronic-webpack在开发模式下运行应用程序(须臾要electron-webpack模块支持)

1. 🎜🎜nsis 구성🎜🎜

🎜 이에 대해 좀 더 자세히 이야기해보자. 이 nsis 구성은 설치 과정의 구성을 말한다. 사실 아직까지는 매우 중요합니다. nsis가 구성되지 않은 경우 애플리케이션이 C 드라이브에 자동으로 설치됩니다. 사용자가 선택할 여지가 없습니다. 이것은 절대 불가능합니다🎜🎜nsis 구성은 빌드의 nsis 옵션에서 구성됩니다. 다음은 nsis 구성의 일부입니다🎜

  --mac, -m, -o, --macos   Build for macOS,                              [array]
  --linux, -l              Build for Linux                               [array]
  --win, -w, --windows     Build for Windows                             [array]
  --x64                    Build for x64 (64位安装包)                     [boolean]
  --ia32                   Build for ia32(32位安装包)                     [boolean]
  --armv7l                 Build for armv7l                              [boolean]
  --arm64                  Build for arm64                               [boolean]
  --dir                    Build unpacked dir. Useful to test.           [boolean]
  --prepackaged, --pd      预打包应用程序的路径（以可分发的格式打包）
  --projectDir, --project  项目目录的路径。 默认为当前工作目录。
  --config, -c             配置文件路径。 默认为`electron-builder.yml`（或`js`，或`js5`)

🎜include 정보 그리고 script 어느 것을 선택할까요? 🎜🎜복잡한 설치 과정이 필요하지 않은 간단한 작업을 위해 설치 위치 수정, 제거 프롬프트 등이 필요한 경우에는 include 구성을 사용하는 것이 좋습니다. , 완전한 사용자 정의를 위해 script를 사용하는 것이 좋습니다. 🎜🎜NSIS는 설치 패키지 처리에 매우 강력합니다. 그러나 고급 언어보다 배우기가 쉽지 않습니다. 비밀은 스스로 탐구해야 합니다🎜🎜여기 학습 리소스가 있습니다🎜

• 🎜NSIS 기본 사항🎜
• 🎜NSIS 패키징 스크립트 기본 사항 🎜 li>
• 🎜예제 스크립트🎜
• 🎜NSIS 포럼🎜

1. 🎜운영 체제 정보 구성 🎜

🎜 주로 Windows의 64비트 및 32비트 구성입니다. 🎜🎜CLI 매개변수 🎜

  --publish, -p  发布到GitHub Releases [choices: "onTag", "onTagOrDraft", "always", "never", undefined]

🎜nsis의 구성 🎜

  --draft       请改为在GitHub发布选项中设置releaseType                 [boolean]
  --prerelease  请改为在GitHub发布选项中设置releaseType                 [boolean]
  --platform    目标平台 (请更改为选项 --mac, --win or --linux)
           [choices: "mac", "win", "linux", "darwin", "win32", "all", undefined]
  --arch        目标arch (请更改为选项 --x64 or --ia32)
                   [choices: "ia32", "x64", "armv7l", "arm64", "all", undefined]

1. 🎜 업데이트 구성🎜

🎜다음은 주로 lastest.yaml 구성 파일🎜

  --help     Show help                                                 [boolean]
  --version  Show version number                                       [boolean]

🎜🎜완전 구성🎜🎜🎜기본적으로 사용 가능한 구성 완료🎜을 생성하기 위한 업데이트용 구성입니다.

  electron-builder -mwl                        为macOS，Windows和Linux构建（同时构建）
  electron-builder --linux deb tar.xz          为Linux构建deb和tar.xz
  electron-builder -c.extraMetadata.foo=bar    将package.js属性`foo`设置为`bar`
  electron-builder --config.nsis.unicode=false 为NSIS配置unicode选项

🎜🎜명령줄 매개변수(CLI) 🎜🎜🎜명령(명령): 🎜

target:  String - 目标名称，例如snap.
arch “x64” | “ia32” | “armv7l” | “arm64”> | “x64” | “ia32” | “armv7l” | “arm64”  -arch支持列表

🎜Building(빌드 매개변수): 🎜rrreee🎜Publishing(게시): 🎜rrreee🎜🎜rrreee🎜Other(기타):🎜rrreee🎜Examples(examples):🎜rrreee🎜TargetConfiguration(빌드 대상 구성):🎜rrreee🎜🎜Summary🎜🎜🎜electron-builder는 간단합니다. 아직 강력한 라이브러리. 아무튼 확신합니다🎜🎜🎜

위 내용은 전자 빌더 패키징에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!