用 Electron 打包语雀

本文主要记录用 Electron 打包语雀的过程，并不会深入 Electron 这门技术。目前基本上用语雀作为个人笔记，但每次和其他标签页同在一个浏览器里，切换起来不是很方便，我希望可以作为一个桌面端应用，这样就可以：用 Alfred 快速打开、固定在 Dock 上、用 Command + Tab 快速切换。



在 Electron 之前，可以使用 Chrome 的 Create Shortcut 功能封装成一个 App，我之前也这么做过，但可定制化几乎没有，其中有一点我不喜欢：会打开新窗口。



我希望像桌面端应用那样所有的 Navigation 都在同一个窗口，而不会老是弹出新窗口。



是时候祭出 Electron 了！



一般生态良好的技术官网都会有快速入门的文档和示例。



之前没有用过，如何快速入门？最靠谱的就是去官网找 Quick Start 示例，Electron 也给我们提供了这样一个示例项目以便新手快速入门：

# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start

加载 URL

这个示例加载的是本地 HTML 文件，我们是加载 URL，所以需要改一下 main.js 并重启：

mainWindow.loadFile('index.html')
// 改为
mainWindow.loadURL('https://www.yuque.com/dashboard/books')

初始窗口最大化

此时我们发现初始窗口有点小，我想要打开的时候就是充满整个屏幕。如果设置 mainWindow 的 width 和 height 有点 hard code 的感觉，屏幕一换就又不对了，google 一下找到设置方法：mainWindow.maximize()。

设置 Dock 图标

Electron 有专门针对 MacOSX 的设置，其中就有 dock 的相关设置：

if (process.platform === 'darwin') {
  app.dock.setIcon(path.join(__dirname, 'images/appIcon.png'))
}

禁止打开新窗口

其实最让我在意的就是这一点了，也是搜了好一会 google 和 Electron 文档才找到：

当页面请求打开地址为 url 的新窗口时触发。可以通过 window.open 或外部链接 (如 <a target='_blank'>) 触发。

默认情况下, 将为 url 创建新的 BrowserWindow。

调用 event.preventDefault() 事件，可以阻止Electron自动创建新的 BrowserWindow 实例。 调用 event.preventDefault() 事件后，你还可以手动创建新的 [BrowserWindow](https://www.electronjs.org/docs/api/browser-window) 实例，不过接下来你必须用 event.newGuest 方法来引用 [BrowserWindow](https://www.electronjs.org/docs/api/browser-window) 实例，如果你不这样做，则可能会产生异常。 例如：



myBrowserWindow.webContents.on('new-window', (event, url, frameName, disposition, options) => {
  event.preventDefault()
  const win = new BrowserWindow({
    webContents: options.webContents, // use existing webContents if provided
    show: false
  })
  win.once('ready-to-show', () => win.show())
  if (!options.webContents) {
    win.loadURL(url) // existing webContents will be navigated automatically
  }
  event.newGuest = win
})

我们据此改造一下：

mainWindow.webContents.on('new-window', (event, url) => {
  event.preventDefault()
  mainWindow.loadURL(url)
})

这样就可以实现跳转只在当前窗口进行，而不会创建新的窗口。

打包

上面的示例并没有包含打包逻辑，我们需要通过 electron-packger 进行打包操作：

npm install electron-packager --save-dev

然后在 package.json 中的 scripts 属性增加如下命令：

"scripts": {
  "start": "electron .",
  "pack:osx": "electron-packager . --out=dist/osx --platform=darwin --arch=x64 --icon=images/icons.icns",
  "pack:win64": "electron-packager . --out=dist/win --platform=win32 --arch=x64 --icon=images/icons.ico",
  "build": "npm run pack:osx && npm run pack:win64"
}

为了在 Dock 上显示的 App 名称是语雀而不是 Electron，我们还得在 package.json 增加一个属性："productName": "语雀"。

结束语

整个过程花了一个半小时，不算坎坷也没想的那么容易，非常享受这之间的过程，果然解决痛点是最让人兴奋的事情。



这篇文章就是在自己打包的语雀桌面版上敲的，舒服。



项目我在 GitHub 上开源了，有兴趣可以 Clone 自己也打包一个，很方便。

链接：https://github.com/imxfly/yuque-electron/