electron实战 - 项目搭建

工欲善其事,必先利其器

从0入门electron + react  之 项目初始化搭建。

正所谓，你要去当一个运动员之前，你必须有一个好的底子，而我们本章就着重于项目初始化搭建。

安装依赖与环境

1. 我们需要安装判断electron的开发环境插件

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

2. 安装渲染进程的react开发环境

npx create-react-app 项目名

3. 安装electron环境

npm install electron --save-dev

配置electron主进程

等以上安装完成后。

我们则需要在当前的主目录下新建文件

main.js

做为electron的主进程。

并且我们还需要给这个elctron的主进程添加 一点东西

// 引入 electron 主进程文件
const { app, BrowserWindow } = require('electron')
// 引入electron 的开发环境判断
const isDev = require('electron-is-dev')

// 声明主进程变量值
let mainWindow

// app.on 判断环境是否加载结束。
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 1024,
        height: 680,
        webPreferences: {
            nodeIntegration: true,  // 开启渲染进程可以使用node。
            contextIsolation: false, // 在渲染进程中没法使用node.js的话 则需要将它设置为false。目前最新版本有这个问题
            enableRemoteModule: true, // 容易报错记得设置
        },
    })

    // 判断当前为dev环境的时候 让其走本地的localhost3000这个链接地址
    const usrLoadtion = isDev ? 'http://localhost:3000' : '假的地址'
    mainWindow.loadURL(urlLocation)
})

如上代码所示，我们在其中引入了electron的开发环境判断插件，引入了electron的开发环境。

同时我们创建了一个主窗口。并且给这个窗口设定它打开的地址为 本地的 localhost:3000。

好了。如果没理解的小伙伴可以留言或者从上往下再看一遍。

还没完哦~

配置electron到我们的开发命令中

下来我们需要在package.json中配置electron的开发引入。

// 1. 在package.json 中配置electron的主文件地址。也就是说需要我们把刚才创建的electron主进程文件添加到我们的package.json之中。

"main":"main.js"

// 2. 我们还需要在package.json 的script中添加electron的启动命令
"dev": "electrn ."

启动我们的第一个electron应用

好了，至此我们的基础项目初始化才基本搭建完毕。

这时候我们则可以使用命令

npm start

来启动react项目，让它生成localhost:3000 这个网址。

然后这个命令窗口不要关闭，我们还需要另起一个新的命令窗口并运行

npm run dev

来启动我们本地开发的electron容器。

看到这里，如果各位从上到下跟我的没什么区别的话，恭喜你，启动成功。

你已经启动了你的第一个electron桌面应用程序。

优化我们的electron启动（1）

不过这时候你可能有点不习惯，每次启动都需要两个命令，这个有点反人类啊。

别急，第二种方法来了！

// 1. 先修改package.json 中的electron启动命令 dev 为 ele

"ele":"electron ."

// 2. 再新增一个dev命令，然后融合react启动命令与electron启动命令
"dev": "npm start & npm run ele"

然后保存后再次在命令行启动 npm run dev.

你会发现，electron 也启动成功了，并且react也成功启动。

当然，这样的话还是会有问题的，你会发现，命令行里乱七八糟，你也不知道哪个命令是哪个命令的一脸懵逼。

所以这时候我们还需要第三种方法。

使用concurrently 启动我们的electron

第一步我们需要给项目安装concurrently

npm install concurrently --save-dev

其次，我们需要修改package.json中的命令

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

第三步，当然是运行我们的命令 npm run dev 。

看看是不是启动起来了呢。

而且在这里值得一提的是concurrently还是一个跨平台支持的哦~

看到这里是不是对着你们第一个electron项目已经心里有底气了？

别急！还没完！

我们需要对它做优化。

第一，你们目前的项目是不是会出现electron程序后，结果是白屏，过一会才会出现内容？

第二，你们现在启动react是不是会自动打开游览器跳到localhost:3000呢？

别急，我们来继续优化它。

解决electron启动后，项目还没有被启动问题。

1.  我们需要安装一个插件，wait-on

npm install wait-on --save-dev2. 我们需要修改package配置

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

这时候保存大家再次运行npm run dev 就会发现白屏的症状消失了。

防止启动项目时候 react 或者 vue 项目自动打开网页

1. 我们需要安装插件 cross-env 

npm install cross-env --save-dev

2. 需要在package中进行配置

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

当这两部全部完成后，各位同学再去运行代码就会发现，不仅游览器不打开了，长时间白屏的问题也消失了。

好了，我们今天的electron-react的基本开发就到这里。

各位如果有什么问题，可以随时留言给我。