使用electron-builder对Electron应用进行打包

前面说过使用electron-packager对应用进行打包，今天看一下另外一个常用的打包工具electron-builder。

一、安装 electron-packager：

使用命令 npm install --save-dev electron-packager将electron-packager包安装到在项目下面，安装完成之后，项目根目录下面的package.json文件里，会多出一条electron-packager的版本号配置信息 。或者直接全局安装

npm install electron-builder -g
electron-builder --version

二、添加打包配置信息

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

最终package.json如下

{
  "name": "demo",
  "version": "1.0.0",
  "description": "myfisrt",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "packager": "electron-packager ./ demo --all --out ./OutApp --app-version=1.0.0 --overwrite --icon=./icon.ico",
    "dist": "electron-builder --win --ia32"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^5.0.5",
    "electron-packager": "^14.0.0",
    "electron-builder": "^20.44.4"
  },
 
  "build": {
    "productName":"helloword",
    "appId": "com.demo",
    "copyright":"demo",
    "directories": {
      "output": "dist"
    },
    "win": {
      "icon": "./ico.ico"
    },
    "mac": {
      "icon": "./ico.ico"
    },
    "linux": {
      "icon": "./ico.ico"
    }
  }
}

使用electron-builder --help查看模块打包参数

electron-builder --help
Examples:
  electron-builder -mwl                     build for macOS, Windows and Linux
  electron-builder --linux deb tar.xz       build deb and tar.xz for Linux
  electron-builder --win --ia32             build for Windows ia32
  electron-builder                          set package.json property `foo` to
  -c.extraMetadata.foo=bar                  `bar`
  electron-builder                          configure unicode options for NSIS

三、使用命令打包：npm run dist

最终结果如下：

作者：admin

TTF的家园-www.ttfde.top 个人博客以便写写东西，欢迎喜欢互联网的朋友一起交流!

TTF的家园 站点 QQ交谈