ReactJS 打包为 EXE 文件（原理及详细介绍）
ReactJS 是一个非常流行的 JavaScript 库, 用于构建用户界面。然而，ReactJS 本身只是一个 Web 开发工具，但它依然可以借助其他框架（如 Electron 或 NW.js ）实现桌面应用的开发。在本文中，我们将了解如何将 ReactJS 应用打包成一个可执行的 EXE 文件，以便于在 Windows 系统下使用。
一、选择适当的桌面程序框架
1. Electron: 最受欢迎的跨平台桌面应用开发框架，使用 HTML、CSS 和 JavaScript 构建。很多知名应用如 Visual Studio Code, Slack 等都是基于 Electron 构建的。
2. NW.js: 也是一个在 web 技术产生的跨平台桌面应用开发框架。原名为 node-webkit。
本文将使用 Electron 作为例子，演示如何将 ReactJS 应用打包成 EXE 文件。
二、步骤详解
1. 创建一个新的 React 项目：
通过以下命令，将在系统中创建一个名为 my-react-app 的新 React 项目。
```
npx create-react-app my-react-app
cd my-react-app
```
2. 安装 Electron：
使用 npm 安装 Electron 依赖。
```
npm install --save electron
```
3. 在项目中创建一个 Electron 入口文件
在项目根目录下，创建一个名为 "electron.js" 的文件。并在其中添加以下代码：
```javascript
const electron = require('electron');
const { app, BrowserWindow } = electron;
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadURL('http://localhost:3000/');
}
app.whenReady().then(createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
```
此文件定义了 Electron 应用的入口，并加载了 React 应用的地址。
4. 更新项目 package.json 文件
将 "electron.js" 添加为项目的入口。打开 "package.json" 文件，并在 "scripts" 部分添加以下代码：
```json
"electron-start": "electron ."
```
5. 打包项目
安装 electron-packager 依赖。
```
npm install --save-dev electron-packager
```
接下来，在 "package.json" 文件的 "scripts" 部分添加以下代码：
```json
"package": "electron-packager . my-react-app --platform=win32 --arch=x64"
```
其中，“my-react-app”是生成的应用名称，你可以根据需要修改。
最后，输入以下命令开始打包项目：
```
npm run package
```
打包完成后，会在项目根目录下生成一个 "my-react-app-win32-x64" 文件夹，其中包含一个名为 "my-react-app.exe" 的可执行文件。双击运行即可打开你的 React 桌面应用。
三、总结
通过以上步骤，我们成功地将 ReactJS 项目打包成了一个可执行的 EXE 文件。使用 Electron，我们可以利用 Web 技术创建跨平台的桌面应用，并将其打包为 EXE 文件在Windows系统上运行。
