react + electron 完成后，用electron-bilder 打包安装， nsis 编写安装界面 怎么做，代码 ，并提供注释

好的，下面是如何使用 `electron-builder` 和 `NSIS` 来打包并制作安装程序的流程，以及相应的代码和注释。

1. 安装依赖和工具

首先，您需要在项目中安装 `electron-builder` 和 `NSIS` 工具。您可以使用以下命令来安装它们：

npm install --save-dev electron-builder nsis

2. 配置 `electron-builder`

在项目的 `package.json` 文件中添加以下配置：

"build": {
  "appId": "com.example.myapp",
  "productName": "My App",
  "directories": {
    "buildResources": "build"
  },
  "win": {
    "target": "nsis",
    "icon": "build/icon.ico"
  },
  "nsis": {
    "oneClick": false,
    "perMachine": true,
    "allowElevation": true,
    "allowToChangeInstallationDirectory": true,
    "installerIcon": "build/icon.ico",
    "uninstallerIcon": "build/icon.ico",
    "installerHeaderIcon": "build/icon.ico",
    "createDesktopShortcut": true,
    "createStartMenuShortcut": true,
    "shortcutName": "My App",
    "include": "nsis/script.nsh"
  }
}

以上配置指定了以下内容：

- `appId`：应用程序的 ID。
- `productName`：应用程序的名称。
- `directories.buildResources`：存放打包后的文件的目录。
- `win.target`：指定打包成 NSIS 安装程序。
- `win.icon`：指定应用程序的图标。
- `nsis`：NSIS 配置，其中 `include` 指定了一个自定义的 `script.nsh` 脚本，用于创建安装界面。

3. 编写 `script.nsh`

在项目的 `build` 目录中，创建一个名为 `script.nsh` 的文件。这个文件将被用于创建安装界面。

下面是一个简单的 `script.nsh` 文件：

!include "MUI2.nsh"

!define MUI_PAGE_CUSTOMFUNCTION_PRE SelectInstallDir

Function SelectInstallDir
  nsDialogs::SelectFileDialog "/D=$INSTDIR" "Select installation directory..." "(*.*)|*.*"
  Pop $0
  StrCmp $0 "" done
  StrCmp $INSTDIR $0 0 update
  done:
    Return
  update:
    StrCpy $INSTDIR $0
    SetOutPath $INSTDIR
    Return
FunctionEnd

!insertmacro MUI_PAGE_WELCOME
!insertmacro MUI_PAGE_DIRECTORY
!insertmacro MUI_PAGE_INSTFILES
!insertmacro MUI_PAGE_FINISH

!insertmacro MUI_UNPAGE_WELCOME
!insertmacro MUI_UNPAGE_CONFIRM
!insertmacro MUI_UNPAGE_INSTFILES
!insertmacro MUI_UNPAGE_FINISH

!insertmacro MUI_LANGUAGE "English"

以上代码创建了一个自定义的安装目录选择对话框，并且使用了 `MUI` 宏来创建安装向导的页面。

4. 打包和制作安装程序

在命令行中运行以下命令，打包并制作安装程序：

electron-builder build --win

完成后，您将在 `build` 目录中找到一个名为 `My App Setup.exe` 的安装程序。

如果您想要在打包时忽略某些文件或目录，可以在 `package.json` 文件中的 `build` 属性下添加一个 `files` 属性，例如：

"build": {
  "files": [
    "!**/node_modules"
  ]
}

以上配置将忽略 `node_modules` 目录。您还可以使用通配符来匹配其他文件或目录。

希望这些代码和注释可以帮助您打包和制作安装程序。如有疑问，请随时与我联系。