配置scripts和build字段,在 react 启动后打开 electron 桌面应用、通过cross-env添加环境变量、以及在打包时如何进行配置(只进行 win 下打包) {"name":"my-app","version":"0.1.0","private":true,"main":"public/electron.js","homepage":".","scripts": {"start":"cross-env NODE_ENV=development concu...
使用Create React App工具链搭建应用程序。在终端中输入以下命令: npx create-react-app my_electron_react_application 应用程序应包含以下文件。以下内容不包含项目中的一些其他文件,例如 CSS、服务工作线程和测试文件。 . |-- package.json |-- package-lock.lock ...
为了能够打包React应用程序,你需要添加Webpack配置。在Electron应用程序的根目录下,创建一个名为webpack.config.js的文件,输入以下代码: 代码语言:javascript 复制 constpath=require('path');module.exports={entry:'./src/index.js',output:{filename:'bundle.js',path:path.join(__dirname,'dist'),},module:...
1 创建一个react项目 1 安装create-react-app 命令 npm install create-react-app 2 创建项目 create-react-app react-electron // 你的项目名称 // 默认是js 如果想用ts后面增加参数 create-react-app react-electron --template typescript 3 进入到你的项目里 启动项目 npmstart 2 引入electron 1 下载 ele...
npx create-react-app react-electron-app Add Electron 接下来除了添加 electron 本体,有几个包也可算是必备的,一并添加: yarn add electron electron-builder --dev yarn add electron-is-dev 注意,electron 和 electron-builder 需要放在"devDependencies"中,否则以后无法打包。
首先,我们需要在一个常规的React项目中,安装electron,为了使我们功能代码部分和electron窗口部分更清晰,我们可以在项目的根目录新建一个desktop文件夹,专门用来存放electron部分代码和资源。目录结构大概如图所示: 我们cd desktop到desktop文件夹下,执行npm init -y初始化包管理器,然后安装electron相关包: electron:electron...
前两篇文章我们介绍了react+electron构建桌面应用和如何加载本地的静态资源。然后现在有个需求,是要使应用里的弹窗独立于主窗口,今天来实现这个需求。 在之前我们知道electron通过main.js这个文件里new一个BrowserWindow来新建一个窗口,同样的,这个应用的弹窗,也可以通过new一个BrowserWindow来新建: ...
我们可以使用React和Arco Design来构建这个组件,通过动态渲染菜单项来实现导航功能。 弹窗和提示框:在桌面操作系统中,弹窗和提示框是常见的交互方式。我们可以使用Electron的dialog API和React的组件化开发能力来构建这些组件,并使用Arco Design来设计样式和交互效果。 三、实现过程 在明确了系统架构后,我们就可以开始实现...
react electron electron-builder 使用过 electron 的人都知道,打出来的包是很大的,因为electron 内置了 Node & Chromium, 所以啥都还没干,打出来的应用安装包就有几十兆了。 无法在 electron 上做文章,那么只好在 webpack 打包程序代码的过程中捣鼓了。以前打包应用的时候,程序里会有node_modules文件夹。这次任务...
global.electron = require('electron') 在react组件中 直接调用即可,如: const minWindow = () => { window.electron.ipcRenderer.send("min"); } 常见问题 ⚠ 一定要注意: 建立通信以后,只能在 electron的界面 中触发通信事件,在渲染层对应的Web浏览器中操作无效。 看到很多文章提到需要在 public/inde...