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

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文件里，因为它俩现在是动态生成的了，会出现变化。