以下是一个简单的
Electron React 项目实例：
1. 创建一个新的
项目文件夹并进入该文件夹：
```
mkdir
electron-
react-app
cd
electron-
react-app
```
2. 初始化 npm
项目：
```
npm init -y
```
3. 安装必要的依赖项：
```
npm install --save
electron react react-dom
npm install --save-dev
electron-builder babel-cli babel-preset-env babel-preset-
react webpack webpack-cli webpack-dev-server html-webpack-plugin
```
4. 创建一个 webpack 配置文件 webpack.config.js：
```
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['env', '
react']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
};
```
5. 创建一个 .babelrc 配置文件：
```
{
"presets": ["env", "
react"]
}
```
6. 创建一个入口文件 src/index.js：
```
import
React from '
react';
import
ReactDOM from '
react-dom';
ReactDOM.render(<h1>Hello,
Electron and
React!</h1>, document.getElementById('root'));
```
7. 创建一个 HTML 文件 src/index.html：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Electron React App</title>
</head>
<body>
<div id="root"></div>
<script src="index_bundle.js"></script>
</body>
</html>
```
8. 创建一个 main.js 文件作为
Electron 主进程文件：
```
const { app, BrowserWindow } = require('
electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({ width: 800, height: 600 });
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'dist', 'index.html'),
protocol: 'file:',
slashes: true
}));
mainWindow.on('closed', function () {
mainWindow = null
});
}
app.on('ready', createWindow);
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') {
app.quit()
}
});
app.on('activate', function () {
if (mainWindow === null) {
createWindow()
}
});
```
9. 在 package.json 中添加以下脚本：
```
"scripts": {
"start": "webpack-dev-server --mode development",
"build": "webpack --mode production &&
electron-builder",
"
electron": "
electron ."
}
```
10. 启动
项目：
```
npm start
```
这将启动 Webpack Dev Server 并在浏览器中打开应用程序。在开发期间，每当更改
React 代码时，Webpack Dev Server 会自动重新编译代码并重新加载应用程序。
11.
打包应用程序：
```
npm run build
```
这将使用 Webpack 和
electron-builder
打包应用程序。
打包后的应用程序将在 dist 目录中生成。
12. 运行应用程序：
```
npm run
electron
```
这将启动
Electron 并加载
打包后的应用程序。
本文介绍了如何在Windows 10环境下，利用Node.js v14.17.0和electron-packager工具将基于create-react-app创建的React项目打包成Electron应用。主要步骤包括安装electron依赖、全局安装electron-packager、编写main.js和更新package.json配置。通过npm run electron-start启动应用，并使用electron-packager打包，最终生成可执行文件。
最低0.47元/天 解锁文章
扫一扫
588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
