我无法运行 electron-wix-msi

Question

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

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

Answer 1

我使用 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的输出。

4. 在同一文件夹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",
    ]
  }
}

5. 检查文件夹build中的两个文件
6. 将这样的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 包。