UmiJS 是一个可扩展的企业级前端应用框架，基于它可以构建出高性能、低学习成本的 Web 应用。但 UmiJS 本身并不直接提供将 Web 应用打包成可执行文件（.exe）的功能。要实现这一需求，可以借助其他工具如 Electron 来实现这个目标。
本文主要介绍如何使用 UmiJS、Electron 及 electron-builder 将一个 UmiJS 项目打包为一个 Windows 可执行文件 (.exe) 的原理和简要步骤。
### 原理：
Electron 是一个允许开发人员使用 Web 技术构建跨平台桌面应用的开源项目。它结合 Chromium 和 Node.js，使你可以轻松地使用 HTML、CSS、JavaScript 和你喜欢的框架（如 UmiJS、React、Vue）来开发桌面应用。
electron-builder 是一个用于组装和生成 Electron 应用可执行文件的工具，支持各种平台和系统，如 Windows、macOS 和 Linux。使用 electron-builder，你可以将 Electron 应用程序打包为一个实际的可执行文件，这意味着用户可以直接运行该应用程序，而无需安装其他软件。
### 实现步骤：
1. 首先，确保你已经安装了 Node.js 环境。然后，使用以下命令创建一个 UmiJS 项目：
```bash
yarn create umi # 或者 npx create-umi
```
按照提示选择相应的项目和插件选项，等待项目创建完成。
2. 进入创建好的 UmiJS 项目，安装依赖，然后启动项目检查是否正常运行：
```bash
cd my-umi-app
yarn install (或者 npm install)
yarn start (或者 npm run start)
```
3. 安装 Electron 和 electron-builder:
```bash
yarn add electron electron-builder --dev
```
4. 在项目根目录创建一个新文件 `electron.js` 作为 Electron 的入口文件，添加以下代码：
```javascript
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadURL(`file://${path.join(__dirname, '/dist/index.html')}`);
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
5. 在 `package.json` 文件中添加 Electron 相关的脚本命令和配置：
```json
"scripts": {
"start": "umi dev",
"build": "umi build",
"electron-start": "electron ./electron.js",
"release": "electron-builder"
},
"main": "electron.js",
"build": {
"appId": "com.example.my-umi-app",
"productName": "MyUmiApp",
"directories": {
"output": "build"
},
"files": [
"dist/**/*"
],
"win": {
"target": "nsis"
},
"nsis": {
"oneClick": false,
"perMachine": true,
"allowToChangeInstallationDirectory": true
}
}
```
6. 构建 UmiJS 项目:
```bash
yarn build
```
7. 测试 Electron 应用:
```bash
yarn electron-start
```
8. 使用 electron-builder 打包成 .exe 文件:
```bash
yarn release
```
完成以上步骤后，一个新的构建目录（默认为 `build`）将出现在项目的根目录中，并包含你的exe文件。
总之，通过结合 UmiJS、Electron、和 electron-builder，你可以轻松地将 Web 应用打包成一个 Windows 可执行文件 (.exe)，为你的用户提供方便的桌面应用体验。不过要注意，尽管此处提供了简要步骤，实际项目中可能需要做更多的优化和定制。建议更深入地学习相关技术以获得更好的实践。
