如何成为一个独立开发者：electron开发环境篇

你在使用 electron 开发过程中是不是也遇到了一些问题呢？我们来聊聊实际开发中遇到的一些问题和怎么解决这些问题。

前言

相信你看了《如何成为一个独立开发者：electron 快速入门篇》后已经能够打包出 windows（exe 文件）和 mac（dmg 文件）的安装文件给自己使用了。有了产物才是学习下去的动力，这篇我们来聊聊实际开发中遇到的一些问题和怎么解决这些问题。

怎么一条命令启动 electron

上篇聊到我们我们要在 dev 环境启动 electron 需要先运行我们的 web 项目，等到 web 项目启动好了再开一个命令行环境运行 electron 项目。but 这样未免也太繁琐了些，我们能不能一条命令把上面两件事情都做了呢？答案是肯定的。接下来将使用 concurrently 和 wait-on 来解决我们的问题。

首先是安装包

1	pnpm i concurrently wait-on -D

然后是配置命令，ele:dev命令是启动 electron 项目。ele:devAll命令有点复杂，让我们一个一个看：

concurrently 的作用是同时运行多个命令，用法是concurrently "xxx命令" "xxx命令”,详情可以看官方文档
wait-on 的作用是等待服务可用了再执行后面的命令，用法是wait-on "服务" && "xxx命令”，详情可以看官方文档

了解玩这两个命令的作用我们再来看ele:devAll是不是就容易很多呢？这条命令意思是先启动 web 服务，等待 web 服务启动好了再启动 electron 服务，这样给我们的直接感受就是一条命令启动好了 electron 服务。

1 2	"ele:devAll": "concurrently 'npm start' 'wait-on http://localhost:8000 && npm run ele:dev'", "ele:dev": "electron .",

运行 ele:devAll 一键启动程序

怎么在 electron 中调试代码

在开发环境中调试代码有两种方法：一种是在main.js文件中进行配置，另一种是使用快捷键的方式打开调试界面。

在 main.js 中进行配置

在我们创建窗口的时候加上mainWindow.webContents.openDevTools();就可以在 electron 打开窗口的时候也开启调试界面。

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

function createWindow() {
  const win = new BrowserWindow();
  if (process.env.ENV === 'dev') {
    win.loadURL('http://localhost:8000');
    // 在这里添加打开调试界面，只会在开发的时候打开，方便开发使用
    mainWindow.webContents.openDevTools();
  } else {
    mainWindow.loadFile('dist/index.html');
  }
}

app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

使用快捷键

在 windows 环境下的快捷键是：ctrl+shift+i
在 mac 环境下的快捷键是：alt+command+i