从零搭建一个react + electron项目

最近打算搭建一个react + electron的项目,发现并不是那么傻瓜式 于是记录一下自己的实践步骤

  1. 通过create-react-app 创建react项目

    复制代码
    npx create-react-app my-app 
  2. 安装electron依赖

    复制代码
    npm i electron -D
  3. 暴露react项目的配置文件 (这一步看自己需求,我需要改目录结构)

    在package.json中有一个eject命令,直接执行就可以,执行前要保证没有更变的内容,也可以将.git删掉 或者提前配置好远端仓库

    执行完毕后,会发现目录里多了config、scripts目录,里面就是相关的一些配置文件

    这时候可以看到webpack.config.js 以及一些路径的修改了

    这里我改了path的映射,把react项目根目录的内容全部放到renderer目录中,以app作为顶层去管理主进程(main)和渲染进程(renderer)

    path.js:

  4. 修改package.json命令、入口文件

    这里如果要区分node环境,需要安装cross-env

    复制代码
    npm i cross-env -D

    修改主进程入口main参数(根据自己的实际目录来)

  5. 配置主进程入口文件

    配置相关内容可以复制官网的electron demo中的main.js
    https://github.com/electron/electron-quick-start/blob/main/main.js

    要注意,如果react项目跑起来的端口是localhost: 3000,主进程创建BrowserWindow也要对应loadURL为3000端口

    我这里对应配置的入口文件为index.js,package.json里写的main映射到你写的js入口文件就行了

  6. 运行electron

npm run start:react

npm run start:main

相关推荐
林强1811 小时前
前端文件预览docx、pptx和xlsx
前端
像是套了虚弱散4 小时前
DevEco Studio与Web联合开发:打造鸿蒙混合应用的全景指南
开发语言·前端·华为·harmonyos·鸿蒙
衬衫chenshan4 小时前
【CTF】强网杯2025 Web题目writeup
前端
飞翔的佩奇4 小时前
【完整源码+数据集+部署教程】【天线&水】舰船战舰检测与分类图像分割系统源码&数据集全套:改进yolo11-repvit
前端·python·yolo·计算机视觉·数据集·yolo11·舰船战舰检测与分类图像分割系统
哆啦A梦15885 小时前
点击Top切换数据
前端·javascript·vue.js
程序猿追6 小时前
Vue组件化开发
前端·html
艾德金的溪6 小时前
redis-7.4.6部署安装
前端·数据库·redis·缓存
小光学长6 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH6 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
生莫甲鲁浪戴6 小时前
Android Studio新手开发第二十六天
android·前端·android studio