create-react-app创建Electron应用，打包

已于 2022-11-05 23:03:35 修改
阅读量526 收藏
点赞数
分类专栏： 深入浅出的Electron 文章标签： react.js javascript electron
于 2022-11-04 21:50:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xuelian3015/article/details/127364433
版权
本文介绍了如何使用create-react-app创建一个React应用，并将其与Electron结合。首先通过命令创建React应用，然后安装Electron依赖，编写入口文件main.js。在package.json中配置启动命令，并解决打包时找不到public/electron.js的问题。接着，配置electron-builder进行打包，并调整图标。最后，讨论了通过react-app-rewired和customize-cra进行打包优化，减少不必要的文件生成，提高打包速度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

首先是安装react：npx create-react-app electron-react --template typescript，这里我使用了Typescript，如果不习惯Typescript的同学，可以使用这个命令：npx create-react-app electron-react。

这时候我们成功创建了一个react应用，然后切换到electron-cra目录下，然后执行npm start，先运行react应用，这个仅仅是为了体验一下自己创建的react应用。

这是react应用默认的页面。接下来开始安装Electron依赖：

yarn add electron electron-builder cross-env wait-on concurrently --dev
yarn add electron
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【React实战】create-react-app整合electron打造第一个桌面app
Coding and studying
10-28 1301
Electron 是一个跨平台的、基于 Web 前端技术的桌面 GUI 应用程序开发框架。使用 Web 前端技术来开发一个桌面 GUI 程序是一件多么炫酷的事情，你可以使用 HTML、CSS 来绘制界面和控制布局，使用 JavaScript 来控制用户行为和业务逻辑，使用 Node.js 来通信、处理音频视频等，几乎所有的 Web 前端技术和框架（jQuery、Vue、React、Angular 等）都可以应用到桌面 GUI 开发中。
使用create-react-app 创建 Electron 桌面应用
热门推荐
GreekMrzzJ的博客
05-10 3万+
使用create-react-app 创建 Electron 桌面应用 如何创建一个最简单的electron桌面应用？ electron-quick-start git clone https://github.com/electron/electron-quick-start.git cd electron-quick-start npm i // 运行应用 npm start 这个时...
4.electron之create-react-app的桌面应用程序
12-15 1597
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 Electron 将 Chromium 和 Node.js 嵌入到了一个二进制文件中，因此它允许你仅需一个代码仓库，就可以撰写支持 Windows、macOS 和 Linux 的跨平台应用。 ———————————————— 版权声明：本文为优快云博主「前端加油站」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/Gas_
构建跨平台桌面应用：基于 Electron 与 React 的实战指南
最新发布
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
03-10 2003
本文从环境搭建、项目初始化、核心代码编写到构建与部署，全面介绍了如何基于 Electron 与 React 构建一个高性能跨平台桌面应用。通过大量代码示例和详细解析，你不仅掌握了 Electron 的基本概念和生命周期管理，还学会了如何利用 React 构建现代化 UI，以及如何利用 Webpack 与 Babel 实现高效打包和热更新。希望这篇实战指南能为你提供全新的视角和宝贵经验，助你在跨平台桌面应用开发中不断突破，打造出既美观又高效的现代化应用。
使用create-react-app 快速创建一个 Electron 桌面应用
weixin_34301132的博客
08-10 331
使用create-react-app 快速创建一个 Electron 桌面应用 Electron简介 React + Electron 搭建一个桌面应用 在 Electron 中, 把 package.json 中设定的 main 脚本的所在进程称为 主进程。 快速体验 # github上有一个 electron-quick-start ...
使用create-react-app创建Electron应用
u010769267的博客
12-26 1218
参考文章：⚡️ From React to an Electron app ready for production，原文较为久远了，所以本文对部分代码进行了修改 使用React构建Electron应用时，官网推荐使用electron-react-boilerplate 。但是这个项目有些重，于是想使用比较熟悉的create-react-app进行构建，记录一下踩坑过程。 初始化create-react-app项目 个人比较喜欢TypeScript，所以使用create-react-app的TypeSc.
Electron 应用如何利用 create-react-app 从 0 到 1
weixin_34315189的博客
09-03 196
Electron 的官方文档给我一种错综复杂的感觉，而官方给的 starter 又过于简单，所以如何引入 React 并实现完善的打包机制对于萌新来说也是非常困难的
create-react-electron-app:使用create-react-app和electronic创建一个桌面应用程序
05-01
使用create-react-electron-app创建桌面应用 用 git clone https://github.com/KevenChao/create-react-electron-app cd create-react-electron-app npm i && npm start 剧本 剧本 价值 npm开始 同时启动网络和电子 ...
npx create-react-app xxx创建项目报错的解决办法
10-15
但有时在执行npx create-react-app xxx创建项目时，会出现各种报错。 报错信息npmERR! Could not install from "Files\nodejs\node_cache\_npx\1452" as it does not contain a package.json file。提示指出，在...
electron-common-react-tpl:基于create-react-app的electron模板
05-06
create-react-app + electron react 16.12 electron 9.1.0 运行和打包 $ npm i $ npm start $ npm run build-react // web构建 $ npm run build-electron // electron构建 $ npm run pack // 当前系统类型打包 $ ...
创建reactApp并打包
Hero_孙的博客
09-21 469
版本要求 Node >= 8.10 npm >= 5.6 执行 npx create-react-app my-app 命令执行完成会生成一个 my-app目录 cd my-app npm start 执行完成之后,会自动访问 打包 修改package.json 添加"homepage":"." 在package.json同级目录下执行 npm run build 执行完成之后,会生成build目录, 目录内容如下 (npm版本6.14.6,...
cra-template-electron：电子应用程序的简单create-react-app（CRA）模板
02-08
cra-template-electron：电子应用程序的简单create-react-app（CRA）模板
react-app-electron-template:基于create-react-app并配置为电子版的项目模板
05-12
React应用电子模板 该电子项目模板由引导。 打字稿 Typescript已预先启用。 只需将.js文件重命名为.ts并重新启动开发服务器即可。 如果文件包含 ，则必须给文件扩展名.tsx此外，如果您开始使用Typescript，则会看到一个新文件src/react-app-env.d.ts 。 有关该文件的说明，请参见 注意：只有src/下的所有内容都支持Typescript。 electron/下的电子主过程必须在es5中。 电子配置 该项目已配置为与电子一起使用。 electron/index.js是电子入口点。 electron/electronWindows.js提供了一些用于创建电子窗口的实用程序。 electron/webpack.config.js控制着Electron主程序的编译。 main.js是electron/main.js的别名，并且在运行开发服务器时
create-electron-app:用于创建 Electron 的 cli 项目
05-30
@xhbzero/cli 用于创建的cli项目 安装 使用下列的命令安装： npm install @xhbzero/cli -g # 或者 yarn global add @xhbzero/cli 安装完成后，可以在命令行（终端）中使用 cea 命令。 开始 运行以下命令创建一个新应用： cea electron-app 其他 如果你觉得这个项目对你有用或者有趣，欢迎star，如果有建议也欢迎issue 如果你想更好的学习electron，我们有个项目，代码所写即所见，非常方便，保证你看了之后就会爱上它。
create-electron-app:a在几秒钟内生成一个新的Electron App！
03-28
创建电子应用 在一分钟内生成一个新的Electron App！ ·· 什么是create-electron-app？ 是一个简单，最小的CLI应用程序，可以在一分钟内生成一个Electron应用程序！ Create-Electron-App使用样板作为样板。 :sparkles: 特征 :high_voltage: 快速安装：只需运行npx new-electron-app ！ :hammer: Electron-Builder： Electron Builder的实现可用于跨平台构建。 :sparkles: 自定义：易于自定义和内置功能。 :hammer_and_wrench: 入门 步骤1：先决条件 NPM npm install npm@latest -g 新电子应用 npm install new-electron-app -g 步骤2：安装 打开您的首选终端。 在任何地方运行new-electron-app！ npx new-electron-app 或者 npm r
Electron学习之旅9，create-react-app和electron完成应用打包 + 注意事项，项目错误解决方案（down失败），pack到底做了什么，生成安装包，打包优化，自动更新，总结
qq_40196738的博客
12-09 1063
记录：electron-vue大佬博客 一、应用打包 使用electron-builder库，先安装它。 cnpm i electron-builder -D 生产环境build代码 1、尝试使用npm run build打包react项目 2、修改生产环境，环境参数 注意事项一： 注：electron-is-dev 需要变成生产依赖 3、根据electron-builder配置文档去实施 ...
使用create-react-app构建Electron应用：无须webpack配置的优雅解决方案
gitblog_00043的博客
05-16 468
使用create-react-app构建Electron应用：无须webpack配置的优雅解决方案 electron-with-create-react-appSample Electron application using create-react-app项目地址:https://gitcode.com/gh_mirrors/el/electron-with-create-react-app...
改造create-react-app 通过npm命令动态打包文件
weixin_33762321的博客
05-28 1167
第一次写文章如果有什么不足的地方请大佬指出
如何创建一个electron应用
pikaqiu420的博客
09-02 621
npx是npm里面集成的一个东西,npx运行一个可执行文件,运行完后会删除,npm执行完之后会存在本地。1.创建一个文件夹并命名,如:myelectron.(最好在一个没有中文的目录下创建)5.修改package.json文件里的入口文件的路径。方式一:使用Electron Forge。6.启动应用:npm run start。3.创建主页面: index.html。4.创建项目入口文件: main.js。方式二:手动安装依赖配置。
构建基于Create-React-App和TypeScript的Electron应用
资源摘要信息:"Electron-CRA-TypeScript基于Create-React-App和TypeScript的最简单的电子样板项目，由JavaScript框架React和跨平台桌面应用程序开发框架Electron结合TypeScript语言打造。它使得开发者能够利用Create...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

读心悦

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值