尊敬的读者，欢迎来到我们的博客，在本文中，我们将探讨 EXE 打包封闭工具的原理和详细介绍。打包封闭工具可以将一个或多个文件、应用程序及其依赖项捆绑在一起，创建一个独立的可执行文件（EXE格式），这使得在目标计算机上无需安装原始应用程序即可运行封闭的应用程
2023-04-27
中文化、本土化、云端化的在线跨平台软件开发工具，支持APP、电脑端、小程序、IOS免签等等
前端应用打包成可执行程序（exe）可以方便地在 Windows 操作系统上运行，同时也可以方便地进行分发和安装。本文将介绍前端应用打包成 exe 的原理和详细步骤。
一、原理
前端应用打包成 exe 的原理是将前端应用的代码和资源文件打包成一个可执行文件，同时将一个轻量级的 Web 服务器嵌入到可执行文件中。当用户运行该可执行文件时，该 Web 服务器会自动启动，并将前端应用的代码和资源文件提供给用户访问。
二、步骤
1. 准备工作
在开始打包前，需要先安装 Node.js 和 npm。如果已经安装了，请跳过此步骤。
2. 创建项目
使用命令行工具创建一个新的项目，并进入项目目录。
```
mkdir my-app
cd my-app
```
3. 初始化项目
在项目目录下使用 npm 初始化项目。
```
npm init
```
这将会创建一个 package.json 文件，其中包含了项目的基本信息和依赖项。
4. 安装依赖
将需要的依赖项安装到项目中。
```
npm install --save express
npm install --save-dev concurrently
npm install --save-dev electron
npm install --save-dev wait-on
```
其中，express 是一个轻量级的 Web 服务器，concurrently 可以同时运行多个命令，electron 是用于创建桌面应用程序的框架，wait-on 可以等待某个 URL 可访问后再执行下一步操作。
5. 创建主进程文件
在项目根目录下创建一个名为 main.js 的文件，作为 Electron 的主进程。
```
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
let win
function createWindow () {
win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
win.on('closed', () => {
win = null
})
}
app.on('ready', createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
```
这段代码创建了一个 Electron 窗口，并加载了 index.html 文件。
6. 创建渲染进程文件
在项目根目录下创建一个名为 index.html 的文件，作为 Electron 的渲染进程。
```
```
这是一个简单的 HTML 文件，用于显示 "Hello World!"。
7. 创建启动脚本
在项目根目录下创建一个名为 start.js 的文件，用于启动 Web 服务器和 Electron。
```
const express = require('express')
const path = require('path')
const waitOn = require('wait-on')
const { spawn } = require('child_process')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'))
})
const server = app.listen(3000, () => {
console.log('Web server started on port 3000')
})
waitOn({
resources: ['http://localhost:3000'],
timeout: 30000
}).then(() => {
console.log('Web server is ready')
const electron = spawn('electron', ['.'])
electron.stdout.on('data', (data) => {
console.log(`Electron stdout: ${data}`)
})
electron.stderr.on('data', (data) => {
console.error(`Electron stderr: ${data}`)
})
electron.on('close', (code) => {
console.log(`Electron exited with code ${code}`)
server.close()
})
}).catch((err) => {
console.error(`Web server failed to start: ${err}`)
server.close()
})
```
这段代码创建了一个 Web 服务器，并启动了 Electron。其中，使用 waitOn 等待 Web 服务器启动完成后再启动 Electron。
8. 打包应用
在项目根目录下创建一个名为 package.json 的文件，用于打包应用。
```
{
"name": "my-app",
"version": "1.0.0",
"description": "My App",
"main": "start.js",
"scripts": {
"start": "concurrently \"npm run start-web\" \"npm run start-electron\"",
"start-web": "node start.js",
"start-electron": "electron .",
"package": "electron-packager . my-app --platform=win32 --arch=x64 --out=dist --overwrite"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"concurrently": "^5.3.0",
"electron": "^11.0.0",
"wait-on": "^5.2.1"
}
}
```
其中，scripts 中定义了启动 Web 服务器和 Electron 的命令，以及打包应用的命令。使用 electron-packager 打包应用，将前端应用和 Electron 打包成一个可执行文件。
9. 打包应用
在命令行中执行打包命令。
```
npm run package
```
打包完成后，在 dist 目录下会生成一个名为 my-app-win32-x64 的文件夹，其中包含了可执行文件和相关资源文件。
