electron 开发环境配置_electron-is-dev-CSDN博客

本文链接：https://blog.csdn.net/weixin_44678368/article/details/124812448

本文介绍了如何配置一个结合Electron和React.js的开发环境。首先，在项目根目录创建main.js作为Electron入口文件。接着，安装electron-is-dev来判断运行环境。在package.json中设置"main"为main.js。为了方便开发，还安装了concurrently来同时执行多条命令，wait-on确保资源加载完成后再执行下一步，以及cross-env来跨平台设置环境变量，避免自动打开浏览器。

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

新建react项目

npx create-react-app my-app 
cd my-app 
npm start

项目跟目录新建main.js作为electron
安装依赖 electron-is-dev 判断是生产环境还是测试环境

npm install electron-is-dev --save-dev

main.js内容如下

const {app,BrowserWindow} = require('electron')
const isDev = require('electron-is-dev')
let mainWindow;

app.on('ready',()=>{
   mainWindow = new BrowserWindow({
       width:1024,
       height:680,
       webPreferences:{
           nodeIntegration:true,
           contextIsolation: false
       }
   })
    const urlLocation = isDev?'http://localhost:3000':'ss'
    mainWindow.loadURL(urlLocation)
})

在package.json 加一个内容 “main”: “main.js”
安装依赖 concurrently 一条代码执行多条命令

npm install concurrently --save-dev

安装依赖 wait-on 等待一个资源加载完成后，再执行下条命令

npm install wait-on --save-dev

安装依赖 cross-env （跨平台环境变量）运行npm start 可以不自动浏览器打开

npm install cross-env --save-dev

最后package.json内容如下

{
  "name": "cloud-doc",
  "version": "0.1.0",
  "main": "main.js",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently \"cross-env BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\""
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.2.0",
    "cross-env": "^7.0.3",
    "electron": "^18.2.3",
    "electron-is-dev": "^2.0.0",
    "wait-on": "^6.0.1"
  }
}