安装

关于 Electron 的 安装和运行可以简单参考 Electron 初体验 ，主要就是安装 electron，然后配置入口文件，包括建立窗口和窗口尺寸之类的。

这里直接从打包开始写。

使用 npm 安装 electron-builder：

npm install --save-dev electron-builder

简单打包

在 package.json 的 scripts 中加入 pack 和 dist 两行命令，如下：

{
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  }
}

在命令行输入：

npm run dist

electron-builder 就会在项目目录下的 dist 目录中生成一个 exe 的安装程序和一个 win-unpacked 目录，在 win-unpacked 目录中有可以直接运行的 exe 程序。

以上是使用 Windows 在没有配置的情况下生成的 exe 可运行程序，Linux 和 Mac 应该也能生成对应的可运行程序。

输入：

npm run pack

也能根据操作系统生成对应的可运行程序，但不会生成安装包。

因为上面基本没有配置打包信息，所以软件会使用 package.json 中的 name 作为软件名称。和入口文件同一个目录的文件和目录也会被打包到软件中， 不过静态文件在软件目录中是找不到的，静态文件都被封装到了软件中，运行的时候才会释放读取。

注意！在运行时需要依赖的模块，比如 jQuery 这一类的在安装的时候需要把模块信息添加到 package.json 中的 dependencies 中，也就是安装的时候需要加 –save 参数，否则模块不会被打包到软件中，运行的时候会提示找不到模块。

如果需要在渲染进程中使用 Node 的功能和模块，在创建 BrowserWindow 的时候需要把 webPreferences 中的 nodeIntegration 设置为 true 、contextIsolation 设置为 false ，如下：

mainWindow = new BrowserWindow({
  width: 600,
  height: 600,
  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false
  }
});

否则无法在渲染进程中使用 Node 的功能，也如法使用 require 之类的引入模块。

配置基本的软件信息

配置信息可以写在项目的配置文件，也就是 package.json 中，打包的配置信息需要写在 build 字段中。

下面配置简单的软件信息：

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "compression": "maximum",
    "win": {
      "icon": "src/img/icon.ico"
    }
  }
}

下面是配置信息说明：

  • appId ： 软件的一个标识符。
  • productName ： 软件名称。
  • copyright ： 版权信息。
  • compression ： 打包的压缩级别，压缩级别从低到高是 store 、normal 、maximum ，maximum 需要的时间会长一些。
  • win ： Windows 相关的打包配置
    • icon ： ico 格式的图标。

上面是一小部分配置信息的说明。

制作安装包

在不配置 *build* 信息的情况下输入 npm run dist 也能生成一个安装包，但是这个安装包运行后会自动安装到 C:/Users/当前用户/AppData/Local/Programs 目录，也无法手动设置安装位置。

如果要显示安装选项还需要配置安装包信息，下面是一个简单的配置：

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "compression": "maximum",
    "win": {
      "icon": "src/img/icon.ico",
      "target": "nsis",
      "legalTrademarks": "Changbin1997"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowToChangeInstallationDirectory": true,
      "createDesktopShortcut": true,
      "createStartMenuShortcut": false
    }
  }
}

因为我使用的是 Windows，所以只配置了 Windows 的安装包信息。

下面是上面用到的一些配置说明：

  • win ： Windows 相关的打包配置
    • target ： 封装类型，nsis exe 安装包，nsis-web Web 安装程序，portable 无需安装的便携式应用，msi msi 格式的安装包，7z、zip、tar.xz、tar.gz、tar.bz2 都是不同格式的压缩包。appx Win10 应用商店专用的软件包。
    • legalTrademarks ： 公司或商标名称。
  • nsis ： 配置 nsis 安装包的信息
    • oneClick ： 一键安装，设置为 true 时 运行安装程序就会自动安装，无法手动设置安装位置之类的。
    • perMachine ： 为这台计算机上的所有用户安装，也就是安装到 Program Files 目录，默认为 false ，也就是为当前用户安装。
    • allowToChangeInstallationDirectory ： 是否允许更改安装位置。
    • createDesktopShortcut ： 是否创建桌面快捷方式。
    • *createStartMenuShortcut* ： 是否创建开始菜单快捷方式。

使用上面的配置生成的安装包界面如下：

electron-builder安装包选择位置

语言默认会使用系统当前使用的语言，上面的 </> 图标就是配置的 .ico 图标。

electron-builder安装包安装完成

上面就是安装包的基本配置，更多配置说明可以访问 https://www.electron.build/generated/nsisoptions 。

如果需要生成更复杂的安装包就需要配置 NSIS 脚本，关于 NSIS 脚本后面可能会单独写一篇。

除了 electron-builder 外也可以使用其它工具来制作安装包。

处理静态文件

静态文件默认是直接打包到软件中的，运行的时候才会释放加载，而且打包到软件中的静态文件是只读的，不能修改。如果只需要放到软件目录，不需要打包到软件中也可以单独配置。

下面配置把 src/log.txt 直接打包到软件目录：

{
  "build": {
    "appId": "electrontest",
    "productName": "Electron-test",
    "copyright": "仅用于测试",
    "extraFiles": [
      {
        "from": "src/log.txt",
        "to": "log.txt"
      }
    ]
  }
}

其中 extraFiles 中的内容就是文件配置，from 要配置的目标文件，to 是打包后的文件位置。配置后 from 中的文件就不会被打包到软件中。

如果需要获取 Electron exe 程序的所在目录可以使用 process.cwd() 。

除了 extraFiles 外 electron-builder 还提供了一个 extraResources 选项，extraResources 中配置的文件会打包到 Electron 软件目录下的 resources 目录中。

extraResources 的配置和 extraFiles 是差不多的，如下：

{
  "build": {
    "extraResources": [
      {
        "from": "src/log.txt",
        "to": "log.txt"
      }
    ]
  }
}

src/log.txt 会打包到软件目录下的 resources 目录中。以上就是 electron-builder 的简单使用记录。