Electron：和webpack融合

一、使用官方脚手架创建项目

1.1 步骤

npx create-react-app electron-webpack

cd electron-webpack

npm run start

1.2 关于npx

二、electron和webpack结合

2.1 了解electron-builder

https://www.electron.build/

2.2 webpack中安装步骤

npm install electron -D

npm install electron-builder -D

npm install electron-is-dev -D

在项目根目录下创建main.js

touch main.js

const {
    
     app, BrowserWindow } = require('electron')
const isDev = require('electron-is-dev')

// 我们这里new了两个 BrowserWindow，这是不行的，需要进一步封装
class AppWindow extends BrowserWindow {
    
    
  constructor(config) {
    
    
    const baseConfig = {
    
    
      width: 800,
      height: 600,
      webPreferences: {
    
    
        nodeIntegration: true
      }
    }
    // const finalConfig = Object.assign(baseConfig, config)
    const finalConfig = {
    
    ...baseConfig, ...config}
    super(finalConfig)
    this.webContents.openDevTools()
  }
}

app.on('ready', () => {
    
    
  const urlLocation = isDev ? 'http://localhost:3000/' : 'are you ok'
  const mainWindow = new AppWindow({
    
    })
  mainWindow.loadURL(urlLocation)
})

package.json中需要添加main字段，就是我们上面创建的main.js文件


根据上面的代码，我们先把http://localhost:3000/运行起来，然后把Electron运行起来，main.js主进程窗口加载http://localhost:3000/

npm run start

然后运行 Electron

npm run dev

好了，我们已经把Electron和webpack结合起来了，初步结合起来了。
但是仅仅这样是不够的，因为：

1. 要打开两个terminal，一个先运行npm run start，另一个再运行 npm run dev
2. 先把浏览器起起来，再把Electron起起来，中间还要等好一会儿
   这是我们不能忍受的

那我们突发奇想，是不是可以把 npm run start 和 npm run dev 写成一行，就可以了？试试看吧！

执行：

npm run dev

你会发现如下问题：

1. 浏览器是启动起来了，Electron里面却是白板；
2. 只有Cmd+R快捷刷新，才能把Electron里的内容刷出来；
3. 这个命令不好用，windows中用不了，不是跨平台；
4. Teminal中的输出混为一谈，你看不出来到底是哪个命令在执行；
5. 关闭Electron窗口，执行npm run start 你会发现，进程没被杀死，端口仍然被占用；

三、解决方法

怎么解决上面的问题呢？

3.1 concurrently

使用一个第三方库，concurrently，翻译过来就是：同时发生的意思，可以让你不用同时开两个Terminal，分别执行两个命令，只需一个Terminal执行一个命令即可，同时，还能解决上面第五个问题，关闭后直接杀死进程，让你下次启动的时候不用担心垃圾进程占用端口。
https://www.npmjs.com/package/concurrently

npm install concurrently -D

使用的时候，需要转义一下

"dev": "npm run start & npm run ele"
//修改为：
"dev": "concurrently \"npm run start\" \"npm run ele\""
// 意思就是使用concurrently同时运行这两条命令

"scripts": {
    
    
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js",
    "ele": "electron .",
    "dev": "concurrently \"npm run start\" \"npm run ele\""
}

这个concurrently第三方库只能解决Teminal中输出混乱的问题，并解决不了一开始就出现Electron白屏的问题，这是因为两个命令同时执行，没有异步阻塞功能，Electron出来的时候，服务端口还没启动呢，所以，执行 npm run dev之后，立马出来个Electron的大白屏，直到服务端口启动好之后，手动刷新Electron，才能看到界面。

3.2 wait-on

解决异步问题
wait-on第三方库
https://www.npmjs.com/package/wait-on

反正就是，等待某个资源，当这个资源ready的时候，我们再进行下一条指令。

npm install wait-on -D

"dev": "concurrently \"npm run start\"  \"npm run ele\""

// 换成如下

"dev": "concurrently \"npm run start\" \"wait-on http://localhost:3000 && npm run ele\""

npm run dev

先启动服务端口，启动完成之后，再启动Electron，这样就避免了先启动Electron，等待服务时候的白屏现象。完美！

3.3 环境变量

还有一个问题，我们不需要浏览器，只要Electron就行了。
我们使用的脚手架create-react-app，这个脚手架提供了一个环境变量，BROWSER，说到环境变量，我们需要安装一个库 cross-env，跨平台设置环境变量

npm install cross-env -D

修改如下：

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