美化nwjs生成的桌面程序安装包

Posted 2021-09-27 蔚蓝

上期讲到用nw.js打包vuecli3创建的项目为桌面程序：传送门：使用nw.js将vue项目打包为可在xp系统运行的桌面程序。打包完成之后却发现打包出来的是一个文件夹，里面有可执行程序exe和一堆环境或资源文件，这么一个文件夹丢给客户安装显然太不优雅。
这期就讲下如何将这一堆东西美化成一个.exe安装包。本文先粗浅研究美化程序在vuecli3项目上的实现，主要参考不爱吃西红柿的文章：用 vue2 和 webpack 快速建构 NW.js 项目(3)，并将其修改为在vuecli3项目上的实现。

美化nwjs安装包

上个文章已经完成了vuecli3项目打包成.exe，现在接着处理美化程序。

先安装相关依赖

npm install iconv-lite innosetup-compiler --save-dev

创建config/setup.iss文件

复制即可，后面理解了可以自行修改；另外如果安装包出现乱码，可将setup.iss文件修改后缀为txt然后以ansi格式保存后再改回setup.iss

; Script generated by the Inno Setup Script Wizard.
; SEE THE DOCUMENTATION FOR DETAILS ON CREATING INNO SETUP SCRIPT FILES!
; This CWD is the directory where the `setup.iss`, pay attention to join the relative directory!
; 该执行目录为 `setup.iss` 所在的目录，请注意拼接相对目录

#define MyAppName "_name_"
#define MyAppAliasName "_appName_"
#define MyAppVersion "_version_"
#define MyAppPublisher "_appPublisher_"
#define MyAppURL "_appURL_"
#define MyAppExeName "_name_.exe"
#define OutputPath "_outputPath_"
#define OutputFileName "_outputFileName_"
#define SourceMain "_filesPath_\\_name_.exe"
#define SourceFolder "_filesPath_\\*"
#define LicenseFilePath "_resourcesPath_\\license.txt"
#define SetupIconFilePath "_resourcesPath_\\logo.ico"
#define MyAppId "_appId_"

[Setup]
; NOTE: The value of AppId uniquely identifies this application.
; Do not use the same AppId value in installers for other applications.
; (To generate a new GUID, click Tools | Generate GUID inside the IDE.)
AppId={#MyAppId}
AppName={#MyAppName}
AppVersion={#MyAppVersion}
AppVerName={#MyAppAliasName}
AppPublisher={#MyAppPublisher}
AppPublisherURL={#MyAppURL}
AppSupportURL={#MyAppURL}
AppUpdatesURL={#MyAppURL}
DefaultDirName={pf}\\{#MyAppName}
LicenseFile={#LicenseFilePath}
OutputDir={#OutputPath}
OutputBaseFilename={#OutputFileName}
SetupIconFile={#SetupIconFilePath}
Compression=lzma
SolidCompression=yes
PrivilegesRequired=admin
Uninstallable=yes
UninstallDisplayName={#MyAppAliasName}
DefaultGroupName={#MyAppAliasName}

[Tasks]
Name: "desktopicon"; Description: "{cm:CreateDesktopIcon}"; GroupDescription: "{cm:AdditionalIcons}"; Flags: checkedonce

[Files]
Source: {#SourceMain}; DestDir: "{app}"; Flags: ignoreversion
Source: {#SourceFolder}; DestDir: "{app}"; Flags: ignoreversion recursesubdirs createallsubdirs

[Messages]
SetupAppTitle={#MyAppAliasName} setup wizard
SetupWindowTitle={#MyAppAliasName} setup wizard

[Icons]
Name: "{commondesktop}\\{#MyAppAliasName}"; Filename: "{app}\\{#MyAppExeName}"; Tasks: desktopicon
Name: "{group}\\{#MyAppAliasName}"; Filename: "{app}\\{#MyAppExeName}"
Name: "{group}\\uninstall {#MyAppAliasName}"; Filename: "{uninstallexe}"

[Run]
Filename: "{app}\\{#MyAppExeName}"; Description: "{cm:LaunchProgram,{#StringChange(MyAppName, \'&\', \'&&\')}}"; Flags: nowait postinstall skipifsilent

新增build/setup.js

var innosetupCompiler = require(\'innosetup-compiler\')
var path = require(\'path\')
var fs = require(\'fs\')
var iconv = require(\'iconv-lite\')
function resolve() {
  return path.resolve.apply(path, [__dirname, \'..\'].concat(...arguments))
}
var rootPath = path.resolve(__dirname, \'../\')

// `./package.json`
var tmpJson = require(path.resolve(rootPath, \'./package.json\'))
var curReleasesPath = resolve(\'./releases\');
// 约定性配置
var setupOptions = {
  issPath: resolve(\'./config/setup.iss\'),
  // only one version path
  files: curReleasesPath,
  resourcesPath: resolve(\'./build/setup_resources\'),
  appPublisher: \'nw-vue-demo, Inc.\',
  appURL: \'your url\',
  appId: \'{{your id}}\',
  // data: { name, version, platform }
};

fs.readdir(setupOptions.files, function (err, files) {
  if (err) throw err
  files.forEach(function (fileName) {
    if (!~fileName.indexOf(\'win\')) return

    const curPath = path.resolve(setupOptions.files, fileName)
    fs.stat(curPath, function (err, stats) {
      if (err || stats.isFile()) return
      if (stats.isDirectory()) {
        makeExeSetup(Object.assign({}, setupOptions, { files: curPath, platform: fileName }))
      }
    })
  })
})

function makeExeSetup(opt) {
  const { issPath, files, resourcesPath, appPublisher, appURL, appId, platform } = opt
  const { name, version } = tmpJson
  const tmpIssPath = path.resolve(path.parse(issPath).dir, \'_tmp.iss\')

  return new Promise(function (resolve, reject) {
    // rewrite name, version to iss
    fs.readFile(issPath, null, function (err, text) {
      if (err) return reject(err)
      // 这里是iss文件里的变量配置的地方
      let str = iconv.decode(text, \'gbk\')
        .replace(/_name_/g, name) // 名字
        .replace(/_appName_/g, name) // app名字，这里用name代替
        .replace(/_version_/g, version) // 版本
        .replace(/_outputPath_/g, \'app\') // 美化程序输出的路径，这里写死config/app，则美化程序打包后将在config/app/下生成
        .replace(/_outputFileName_/g, name + version) // 输出的文件名
        .replace(/_filesPath_/g, files) // 要打包的文件路径
        .replace(/_resourcesPath_/g, resourcesPath) // 资源路径，主要是图标、安装协议等，复制build下的setup_resources目录即可
        .replace(/_appPublisher_/g, appPublisher) // 软件出版商，自己写
        .replace(/_appURL_/g, appURL) // app线上路径
        .replace(/_appId_/g, appId) // appid


      fs.writeFile(tmpIssPath, iconv.encode(str, \'gbk\'), null, function (err) {
        if (err) return reject(err)

        // inno setup start
        innosetupCompiler(tmpIssPath, { gui: false, verbose: true }, function (err) {
          fs.unlinkSync(tmpIssPath)
          if (err) return reject(err)
          resolve(opt)
        })
      })
    })
  })
}

主要的调整修改就是在setup.js文件

修改完成，先打包nw文件，再打包美化文件

yarn build:nw
yarn setup

项目地址：

Github