zxy的前端日志

# electron学习(二) 环境配置

使用 create-react-app 快速搭建

create-react-app mymarkdown
1

安装 electron

npm install electron --save-dev
1

为了区分开发环境和上线环境

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

在根目录创建main.js

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,
        }
    });
    const urlLocation = isDev ? 'http://localhost:3000': 'dummyurl';
    mainWindow.loadURL(urlLocation);
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

修改一下 package.json

{
  ...
  "main": "main.js",
  "scripts": {
    ...
    "dev": "electron ."
  },
}
1
2
3
4
5
6
7
8
9

先启动react项目

npm start
1

启动好后，再启动electron项目

npm run dev
1

electron

但是像上面这样启动会有几个问题：

  1. 需要使用两个item来分别启动react服务和electron服务
  2. electron服务依赖于react服务
  3. 启动react服务后会自动打开浏览器

为了解决这些问题，优化我们的使用

安装几个小包

concurrently同时执行两条命令

npm install concurrently --save-dev
1

wait-on可以让一个命令等待服务启动后再执行

npm install wait-on --save-dev
1

cross-env解决环境变量问题

npm install cross-env --save-dev
1

安装完这些小包后，修改一下启动命令行

{
  ...
  "scripts": {
    ...
    "dev": "concurrently \"wait-on http://localhost:3000 && electron .\" \"cross-env BROWSER=none npm start\""
  },
}
1
2
3
4
5
6
7
8

这样我们就可以只启动一次了

← 神经网络 →