时间戳

首页 > 解决方案 > 我无法运行 electron-wix-msi

wix - 我无法运行 electron-wix-msi

问题描述

我在使用 webpack 将电子项目打包为 MSI 安装程序时遇到了问题。我遇到了electron-wix-msi包。它是伟大的 WIX 工具包的包装器。优点是，它更像 Windows。

但是，文档不清楚，不足以让它立即运行。最后我明白了，想在这里分享步骤。

标签： wixwindows-installerelectron

解决方案

我使用 TypeScript 进行开发，并安装了所有部件，包括 MSI。

这仅适用于 Windows 用户。该过程描述了 Windows 安装程序 (MSI) 的创建。

  1. 按照文档中的说明安装 Wix Toolkit
  2. 将candle.exe和light.exe的路径添加到路径变量中，即“C:\Program Files (x86)\WiX Toolset v3.11\bin”。检查是否在提示符处输入“candle”，candle.exe 是否会执行。
  3. 在文件夹build中创建安装文件为make-msi.ts（只是一个建议，任何路径都可以）：
import * as msi from 'electron-wix-msi';
import * as path from 'path';

// Step 1: Instantiate the MSICreator
const msiCreator = new msi.MSICreator({
    appDirectory: path.resolve('release/win-unpacked'), // result from electron-builder
    description: 'Some text',
    exe: 'MyExe',
    name: 'MyExe',
    manufacturer: 'Joerg Krause',
    version: '0.5.0',
    language: 1033,
    arch: 'x86',
    outputDirectory: path.resolve('release/msi/')
});

async function createMsi() {
    // Step 2: Create a .wxs template file
    await msiCreator.create();

    // Step 3: Compile the template to a .msi file
    await msiCreator.compile();
}
console.log('Invoke MSI Builder');
createMsi();

release/win-unpacked是electron-builder的输出。

  1. 在同一文件夹build中添加具有适当设置的tsconfig.json：
{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "sourceMap": true,
    "lib": [
      "es2018",
      "es5",
      "dom"
    ],
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "removeComments": false,
    "outDir": "js",
    "typeRoots": [
      "../node_modules/@types",
    ]
  }
}
  1. 检查文件夹build中的两个文件
  2. 将这样的命令添加npm run到您的package.json：
cd build && tsc && cd .. && node build/js/make-msi.js

我的整个脚本块如下所示：

  "scripts": {
    "dev": "tsc win.ts --outDir ./dist && cross-env NODE_ENV=dev && npm run prev",
    "build": "rimraf ./dist && webpack",
    "start": "rimraf ./dist && webpack && electron .",
    "prev": "electron .",
    "test": "jest",
    "msi": "cd build && tsc && cd .. && node build/js/make-msi.js",
    "pack": "npm run build && rimraf ./release && build --dir && npm run msi",
    "dist": "build"
  }

这会将 TypeScript 编译成 ES 并使用npm run msi. 一段时间后，您就有了 MSI。

此外，我使用electron-builder而不是electron-packager取得了更大的成功。

对于那些想要获得更多的人，我的设置是这样的：

  • 我用 HTML 5 API（没有 React/Angular 左右）编写我的应用程序。我真的可以为中小型应用程序推荐这个。
  • 我将 TypeScript 3 用于所有编码内容
  • 我将 SASS 用于所有 CSS 内容
  • 使用webpack进行编译、优化和打包
  • 我使用电子生成器捆绑
  • 我使用上面描述的过程来制作一个 Windows 包。

推荐阅读