记一次无聊且有趣的Electron+React的环境搭建

这两天闲着无聊自己尝试看看教程，做点东西什么的。想到之前看到过JS也可以做桌面应用，于是乎，稍加思索，拿Electron下手试试水。

正文

		以下基于你已经懂得了前端的一些必备开发基础，如node环境，编辑器等已经一应俱全。

先上Electron官网文档，在官方文档里我们可以先搭建一个最简单的Electron应用。
在这里你可以做一个最简单的Electron应用，了解到Electron的目录结构
your-app/
├── package.json
├── main.js
└── index.html
基本只要照着官方文档，一个最简单的Demo就可以运行成功。

下面我们看看如何利用React开发Electron应用。

1. 先使用react脚手架搭一个最简单的react应用。这里我们选择 create-react-app。
   这里我用的yarn包管理工具，也可以使用npm。看个人喜好。全局安装方便以后再创建应用。
   如果想使用yarn作为包管理工具可以去yarn官网下载使用，个人感觉比npm好用一点。当然，仁者见仁，智者见智。

yarn global add create-react-app

2. 安装成功后我们就可以创建一个react应用。

 create-react-app deskdemo	

看到下面这个说明一个简单的react应用已经创建好了

进入我们刚才利用脚手架创建好的应用文件夹，运行 yarn start。浏览器会自动打开跳转http://localhost:3000/，说明一个最简单的react应用已经完成。

3. 向react注入Electron的灵魂。

yarn add electron

这里可能需要点时间，建议使用科学上网。

4. 修改文件配置。
   在根目录下添加一个新的main.js的文件。

这里的文件用了其他大佬已经改好的。和官方demo最大的区别是newWindow.loadURL这一句，
我们这里改成了 newWindow.loadURL(‘http://localhost:3000/’)
https://blog.csdn.net/zoepriselife316/article/details/88031218 这个是为什么是localhost:3000的原因。

const { app, BrowserWindow } = require('electron')

let newWindow
function createWindow() {
    // 创建浏览器窗口。
    newWindow = new BrowserWindow({ width: 800, height: 600 })

    // 然后加载应用的 index.html。  url 及本地文件形式
    newWindow.loadURL('http://localhost:3000/')/// 划重点
   
    // 打开开发者工具
    newWindow.webContents.openDevTools()
  
    // 当 window 被关闭，这个事件会被触发。
    newWindow.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        newWindow = null
    })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (newWindow === null) {
        createWindow()
    }
})

5. 修改package.json
   图中圈出来的部分是要新增的。
   “main”:“main.js”, //主线程
   “estart”:“electron .” // 这是我们运行代码时的命令。
   
   到这里我们已经可以运行一次代码了。
   这里我们需要两个命令窗口，首先在第一个里运营 yarn start，浏览器localhost:3000/已经跳转，并出现了react页面。新打开一个命令窗口，运行 yarn estart
   只单独运行yarn estart是不行的。我刚开始的时候也是不知道，网上找教程我觉得我跟教程的步骤也不差啊，偶然发现这俩同时运行才行，不求甚解的我也不管三七二十一就这么干了，也方便我们热调试，有知道原因的大佬可以教教我，这是为什么。

yarn estart

如果一切正常的话，会跳出如下如下窗口

出现控制台的原因是我们在main.js里newWindow.webContents.openDevTools()。可以关闭。
因为我们用脚手架搭建的应用有热调试功能，所以我们此时修改代码，浏览器和electron里都会改变，而不用重新运行命令。

至此一个最简单的React+Electron环境就搞好了。，然后我们就可以用React及相关组件库愉快的开发一个桌面应用了。
最后，既然是桌面应用，最重要的当然是打包了，不然也没用啊。最后打包。
首先

yarn global add electron-packager

在package.json里配置打包命令
“epackager”:“electron-packager . deskdemo --win --out deskdemo --arch=x64 --app-version 0.1.0 --overwrite --ignore=node_modules”
参数释义：electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --app-version版本号 --overwrite --ignore=node_modules


命令执行完成后，在我们项目的目录下会出现一个新的文件夹，点进去发现一个.exe文件，双击即可执行

第一次发文结束！感谢大家！如果有问题希望大家指出。搭建过程也是看了网上一些大佬的教程，这里用自己易懂的方式记录一下，希望可以帮到更多人！