react + electron 完成后,用electron-bilder 打包安装, nsis 编写安装界面 怎么做,代码 ,并提供注释
时间: 2024-03-25 20:39:34 浏览: 166
使用Electron构建React+Webpack桌面应用的方法
好的,下面是如何使用 `electron-builder` 和 `NSIS` 来打包并制作安装程序的流程,以及相应的代码和注释。
1. 安装依赖和工具
首先,您需要在项目中安装 `electron-builder` 和 `NSIS` 工具。您可以使用以下命令来安装它们:
```
npm install --save-dev electron-builder nsis
```
2. 配置 `electron-builder`
在项目的 `package.json` 文件中添加以下配置:
```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` 文件:
```nsis
!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` 属性,例如:
```json
"build": {
"files": [
"!**/node_modules"
]
}
```
以上配置将忽略 `node_modules` 目录。您还可以使用通配符来匹配其他文件或目录。
希望这些代码和注释可以帮助您打包和制作安装程序。如有疑问,请随时与我联系。
阅读全文