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中进行配置
当这两部全部完成后，各位同学再去运行代码就会发现，不仅游览器不打开了，长时间白屏的问题也消失了。
好了，我们今天的electron-react的基本开发就到这里。
各位如果有什么问题，可以随时留言给我。
- 点赞
- 收藏
- 关注作者
评论（0）