Question

我在使用webpack获得电子项目时遇到问题，无法将其打包为MSI安装程序。我遇到了 electron-wix-msi 软件包。它是出色的WIX工具包的包装。好处是，它更像Windows。

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

Answer 1

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

这仅适用于Windows用户。该过程描述了Windows Installer（MSI）的创建。

按照文档所述安装Wix工具包
将路径添加到 candle.exe 和 light.exe ，即路径的“ C：\ Program Files（x86）\ WiX Toolset v3.11 \ bin”变量。检查是否在烛光提示执行时输入“ candle”。
在 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 的输出。

在适当的文件夹 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",
    ]
  }
}

检查文件夹 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-builder 代替 electron-packager 取得了更大的成功。

对于那些想要获得更多收益的人，我的设置如下：

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

Answer 2

很棒的教程。您的tsconfig.json缺少一行来完成“ tsc”工作，否则您将收到类似error TS2307: Cannot find module 'path'的错误：

"types": ["node"],

我无法让电子-wi-msi运行

2 个答案: