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

Question

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

但是，文档不清楚，不足以使其立即运行。终于我明白了，想在这里分享步骤。

Answer 1

我使用 TypeScript 进行开发，并获得了所有部分的工作安装，包括 MSI。

This is for Windows users only. The process describes the creation of an Windows-Installer (MSI).

按照文档

中所述安装 Wix Toolkit

将路径添加到 蜡烛.exe 和 light.exe ，即“C:\Program Files (x86)\WiX Toolset v3.11\bin”到路径变量。检查是否在提示时输入“candle”，candle.exe 会执行。

在文件夹 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 is the output from electron-builder.

在同一文件夹构建中添加具有适当设置的 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",
    ]
  }
}

检查文件夹 build

中的两个文件

添加 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 构建器而不是 Electron package 器取得了更大的成功。

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

我用 HTML 5 API 编写我的应用程序(没有 React/Angular 左右)。我真的可以为中小型应用程序推荐这个。

我将 TypeScript 3 用于所有编码内容

我将 SASS 用于所有 CSS 内容

使用webpack编译优化打包

我使用 Electron 生成器捆绑

我使用上述过程制作了一个 Windows 包。