从零搭建一个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

相关推荐
奶昔不会射手7 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy11 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy17 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵17 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531721 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
在逃牛马21 分钟前
【Uni-App+SSM+MP 宠物实战】Day4:Uni-App 项目初始化
前端
J_Asia23 分钟前
如何exclude不必要的so文件?
前端
一鹿有你们~24 分钟前
面试题-前端如何解决跨域
前端·javascript·跨域
文心快码BaiduComate28 分钟前
文心快码升级至3.5S版本,强化多智能体自协同能力
前端·后端·程序员