electron-builder 自动修改应用名称和默认安装位置

先说下做了什么事吧，就是在打包的脚本里先通过 cross-env 设置几个不同的环境变量，然后在执行 electron-builder 之前根据模板字符串重新生成打包相关的配置文件。目的是为了打包不同的接口和环境的时候可以自动生成相应的快捷方式名称和默认安装位置，不然的话每次打包还要修改配置文件，当然你说安装位置可以自己去选择，但是我们更期望的是足够简单，直接点下一步就行了。

1. 通过 cross-env 设置不同的环境

当然先要安装这个模块了，执行 npm install --save-dev cross-env 即可。它的作用是可以添加一些自定义的环境变量，但是这个变量只是在打包的时候使用，如果你在渲染的模块里调用就没有这个变量了。例如我在 package.json 里定义了 API 这个变量：

{
  "name": "xxxx",
  ...
  "scripts": {
    "build": "cross-env API=production node .electron-vue/build.js && electron-builder",
    "build:test": "cross-env API=test node .electron-vue/build.js && electron-builder"
  },
  "dependencies": {...},
  "devDependencies": {
    "cross-env": "^5.1.6",
    ...
  }
}

2. 根据模板字符串生成配置文件

2.1 定义 electron-buidler 配置的模板字符串

electron-builder 的配置除了定义在 package.json 里还可以单独拎出来作为一个文件，名字是electron-builder.json。我是定义在一个 js 模块里的template-builder，代码如下：

module.exports = {
    template: "{\n" +
        "\"productName\": \"$productName\",\n" +
        "\"appId\": \"$appId\",\n" +
        "\"directories\": {\n" +
        "\"output\": \"build\"\n" +
        "},\n" +
        "\"files\": [\n" +
        "\"dist/electron/**/*\"\n" +
        "],\n" +
        "\"dmg\": {\n" +
        "},\n" +
        "\"win\": {\n" +
        "\"icon\": \"build/icons/win.ico\",\n" +
        "\"target\": \"nsis\"\n" +
        "},\n" +
        "\"nsis\": {\n" +
        "},\n" +
        "\"artifactName\": \"${productName}_Setup_${version}.${ext}\",\n" +
        "\"linux\": {\n" +
        "}\n" +
        "}\n"
}

这里定义了两个要替换的字符串 $productName 和$appId，通过替换这两个字符串会生成一个新的字符串，直接把这个新的字符串写到项目根目录的 electron-builder.json 里

2.2 定义默认安装位置的模板字符串

如果需要修改默认安装位置的话需要在 nsis 里添加配置

{
  "productName": "xxxx",
  ...
  "nsis": {
    "oneClick": false,
    ...
    "include": "installer.nsh"
  }
}

这个文件也用一个字符串模板去自动生成，这里目录我是定义在根目录了，所以生成的文件应该放在项目的根目录，名字叫做installer.nsh，字符串模板也定义在了一个 js 模块里template-install，代码如下：

module.exports = {
    template: "!macro preInit\n" +
        "\tSetRegView 64\n" +
        "\tWriteRegExpandStr HKLM \"${INSTALL_REGISTRY_KEY}\"InstallLocation \"$LOCALAPPDATA\\programs\\$dirName\"\n" +
        "\tWriteRegExpandStr HKCU \"${INSTALL_REGISTRY_KEY}\"InstallLocation \"$LOCALAPPDATA\\programs\\$dirName\"\n" +
        "\tSetRegView 32\n" +
        "\tWriteRegExpandStr HKLM \"${INSTALL_REGISTRY_KEY}\"InstallLocation \"$LOCALAPPDATA\\programs\\$dirName\"\n" +
        "\tWriteRegExpandStr HKCU \"${INSTALL_REGISTRY_KEY}\"InstallLocation \"$LOCALAPPDATA\\programs\\$dirName\"\n" +
        "!macroend"
}

在去生成新文件的时候，动态替换预设的 $dirName 字符串这样就会自动拼接成一个新的字符串，$LOCALAPPDATA是 nsis 里预设的一些目录，可以根据自己需要修改。

2.3 定义一个生成配置文件的模块

代码如下：

const fs = require('fs');
const path = require('path');
const installTemplate = require('./template-install');
const builderTemplate = require('./template-builder');

function generateInstallNsh() {let name = require('../package').name;
    let productName = '客户端快捷方式名称';
    let appId = name + '-client';
    if (process.env.API === 'test') {
        name += '-test';
        productName += '-test';
        appId += '-test';
    }

    console.log('generating install config file...\n');
    let installerFile = path.resolve('../installer.nsh'); // 这里是 Windows 的直接这么写了
    if (fs.existsSync(installerFile)) {fs.unlinkSync(installerFile);
    }

    let installStr = installTemplate.template;
    let targetInstallTemplate = installStr.replace(/\$dirName/g, name);
    fs.writeFileSync(installerFile, targetInstallTemplate);

    console.log('generating builder config file...\n');
    let builderFile = path.resolve('../installer.nsh');
    if (fs.existsSync(builderFile)) {fs.unlinkSync(builderFile);
    }

    let builderStr = builderTemplate.template;
    let targetBuilderTemplate = builderStr.replace(/\$productName/, productName);
    targetBuilderTemplate = builderStr.replace(/\$appId/, appId);
    fs.writeFileSync(builderFile, targetBuilderTemplate);

    console.log('generate has finished \n');
}

module.exports.generateInstallNsh = generateInstallNsh;

在 electorn-builder 之前执行就可以了。我用的 vue 模板，是在 .electron-vue/build.js 模块下执行的。

2.4 添加.gitignore 文件

把根目录的 installer.nsh 和electron-builder.json两个文件添加到.gitignore 文件里，因为它俩现在是动态生成的了，会出现变化。