快速开启react+electron应用，搭建启动问题

注意：

• React 本地启动在 3000端口
• Electron 在创建 BrowserWindow 的时候，可以读取本地的文件或者是 url
• 开发环境 读取localhost: 3000
• 生产环境 需要加载本地成型以后的本地文件，打包的时候再考虑

一 react 脚手架 create-react-app 快速搭建 react

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

二 electron 的开发环境搭建

npm install electron --save-dev

三 环境配置

• 新建main.js 文件（在package.json 同等目录下）
• 打开package.json文件需要添加main.js作为入口文件
  
• 在package.json中添加执行脚本
  
• electron-is-dev 用于判断 electron 的开发环境
  npm install electron-is-dev --save-dev

注：大概就是创建了一个 1024 * 680 的窗口，在开发环境下，将 http://localhost:3000
下的内容加载到electron窗口中。

三 开启 react+electron

在 package.json 文件中可以看到，要启动 react 和 electron 得执行以下两个脚本命令

npm start //可以看到在浏览器新打开一个监听 3000 端口的一个 tab
npm run ele // 弹出 electron 窗口

缺点：

1. 需要跑两个命令
2. 关掉 electron 窗口后，端口仍被占有的情况
3. 需要 3000 端口跑起来了再刷新一下 electron 才会有内容
4. 浏览器会打开一个 3000 端口的 tab 页, electron 会弹出加载了3000端口内容的窗口，理想状态下只需要保留 electron 中的窗口就好了

优化一：安装Concurrently
解决问题：解决以上 1和2 的问题，一次可以运行多个命令
安装：npm install concurrently --save-dev
配置：在 package.json 中的 scripts 添加一个 dev

"dev": "concurrently \" electron .\" \" npm start\""

优化二：安装 wait-on 插件
解决问题：解决 问题3 等3000端口执行完毕 再打开electron，为了不看到electron 白屏问题
安装：npm install wait-on
配置dev：

`"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"npm start\""`

优化三：安装cross-env
解决问题：解决跨平台设置环境变量的问题。但是这次我们使用它是为了利用它的 BROWSER=none 来解决上面提到的第四个问题，不打开浏览器中的 tab 页。
安装：npm install cross-env --save-dev
配置dev:

"dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""

四 运行项目

npm run dev 直接打开electron 窗口 没有白屏 不需要打开浏览器tab 页面。