如何成为一个独立开发者：electron快速入门篇

通过最少的配置（最低的学习成本）把任意 web 项目转换成 electron 应用。保教包会，最详细的入门教学。

前言

作为一个前端开发者，最快乐的事情就是工具自由，市面上没有的软件，自己写一个不就好了嘛。因为自己有时间管理习惯，基于 react 开发了一个时间分析系统。不过每次用都要启动项目，有点麻烦。就打算做成一个客户端软件方便使用。

因为官网的例子太简单了（纯 html），推荐的例子（electron-react-boilerplate）又太复杂了，我在学习 electron 的时候希望的就是以最短的时间先能把项目跑起来并打包成 exe 和 dmg 使用。后面需要什么功能添加查 api 慢慢来。

所以本文的目标是通过最少的配置（最低的学习成本）把任意 web 项目转换成 electron 应用。如果你想体验一键转换可以试试《如何 2 分钟把你的前端项目（web）变成一个客户端软件（electron）》

会什么有这篇文章

因为我在入门 electron 的时候查了大量资料其中包括官网、掘金、csdn 博客，遇到一个问题解决一个。作为一个 7 年前端开发工程师也是先看文档，一步步踩坑过来的。

我遇到的问题

初次使用 Electron 下载慢
Electron-builder 打包慢
打包后白屏

这里面最消磨耐心的是下载问题，每每遇到 timeout 的心情都是五味杂陈，即时我有梯子依然很慢。~~你敢信我安装 electron 包装了几个小时，试过提前下载包放到文件里这种奇怪办法。~~ 网络问题永远是学习新技术的第一道坎啊。目前最好的解决方案是配置.npmrc 来解决，正文会提及。

然后是打包后白屏问题，因为刚开始不熟悉 electron，不知道怎么去排查问题，打包后就有点黑盒了。之后了解到 web 项目都被压缩到了 asar 文件里，解压出来就很好排查问题了。

如果你还遇到过让你印象深刻问题欢迎评论交流。

运行时

这一步我们需要让 web 项目以 electron 的形式跑起来。

step1 装包

你也许配置过 npm 镜像源，但是装包依然会 timeout。在装包的时候你可能遇到过# ERR! Failed at the electron@x.x.x postinstall script.，这里其实在 npm 装包完之后运行的 electron 的 npm 钩子在下载其他包了，由于 electron 在下载包的时候没有指定镜像源所以就超时了。所以需要在根目录创建.npmrc文件来帮助 electron 指定镜像源从而保证顺利安装。下面是配置内容：

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
CHROMEDRIVER_CDNURL=https://npm.taobao.org/mirrors/chromedriver
ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
registry=https://registry.npm.taobao.org/

在项目安装 electron。

1	$ npm i electron -D

step2 配置

在根目录新建main.js入口文件并在package.js文件配置入口。我们来看下官网的例子，把预加载去掉，窗口加载方式改成 url 就能使用了。配置如下：

1
2
3

{
  "main": "main.js"
}

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

function createWindow() {
  // 创建窗口
  const win = new BrowserWindow({
    // 设置窗口宽度，不设置也有默认值
    width: 800,
    // 设置窗口高度，不设置也有默认值
    height: 600,
    // 不需要预加载
    // webPreferences: {
    //   preload: path.join(__dirname, 'preload.js')
    // }
  });
  // 官网默认是加载的文件，适用于打包，这里我们dev开发不需要
  // win.loadFile('index.html');
  // 客户端窗口加载url http://localhost:8000
  win.loadURL('http://localhost:8000');
}

app.whenReady().then(() => {
  // 创建窗口做的事情
  createWindow();
  // 激活应用的时候会触发，mac关闭窗口应用会挂起应用，点击应用图标会触发这个钩子。
  app.on('activate', () => {
    // 如果没有窗口就重新创建
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

// 所有窗口关闭触发
app.on('window-all-closed', () => {
  // 如果不是mac平台就退出，这里是遵守mac平台规则：关闭窗口应用还需要挂在后台
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

step3 运行

先运行自己的 web 项目：npm start

等服务起来了再，用 electron 运行项目：npx electron .

打包

step1 装包

安装 electron-builder 为 electron 打包。

1	pnpm i electron-builder -D

step2 配置

配置 main.js

打包后 electron 是通过访问静态文件来运行项目，所以需要调整 electron 窗口的加载方式。
需要保证 web 项目打包是通过相对路径打包的。可以通过双击打开 web 项目打包好的 index.html 是否正常显示来判断你的 web 项目是否通过相对路径来打包的，一般来说 web 项目都是绝对路径来打包的。

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

function createWindow() {
  const win = new BrowserWindow();
  // 这里是重点
  // 开发环境通过设置ENV来加载URL运行
  // 打包的时候就走else逻辑，通过加载本地文件来运行
  if (process.env.ENV === 'dev') {
    win.loadURL('http://localhost:8000');
  } 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();
  }
});

配置 package.json

配置你 electron 打包的输出目录，如果你 web 项目打包输出目录是根目录下的dist目录必须配置这个路径，反之则不需要配置。因为 electron-builder 打包的默认输出路径也是dist，它会把根目录下除dist目录的文件都压缩进行打包。

{
  "build": {
    "directories": { "output": "release/build" }
  }
}

step3 打包

因为打包会下载一些包所以同样会遇到网络问题。同样通过配置.npmrc 可以解决。

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/
CHROMEDRIVER_CDNURL=https://npm.taobao.org/mirrors/chromedriver
ELECTRON_BUILDER_BINARIES_MIRROR=https://npm.taobao.org/mirrors/electron-builder-binaries/
registry=https://registry.npm.taobao.org/
# 打包增加的配置
disturl=https://npm.taobao.org/mirrors/node
electron_mirror=https://npm.taobao.org/mirrors/electron/

运行打包命令，两个参数加上会打出 windows、mac 使用的安装包

1 2	$ npm run build # 打包你的web项目 $ npx electron-builder --win --mac # electron打包

打包完排查问题的方法

控制台排查

通过呼出控制台排查原因

win 下的快捷键是：ctrl+shift+i

mac 下的快捷键是：alt+command+i

打包代码排查

打包后 web 项目的代码会被压缩到 app.asar 里。

这个文件可以在/win-unpacked/resources/app.asar或者/mac/my-app.app/Contents/Resources/app.asar中找到。

通过安装 asar 包可以解压这个文件。

1 2	$ npm i asar -g $ asar extract asar文件的路径解压输出文件的路径