如何成为一个独立开发者：electron构建篇

怎么构建出用户能够使用的安装包？客户端软件图标、隐藏 Windows 的菜单、windows 自定义安装路径设置、Windows 打包成压缩文件。

前言

相信你看了《如何成为一个独立开发者：electron 快速入门篇》后已经能够生产出支持 windows 平台的 exe 文件和支持 mac 平台的 dmg 文件了。不过这个时候的文件自己使用是没什么问题的，离给用户使用还是有一段距离的。这一篇我们来聊一聊怎么配置出对用户友好的安装包。

客户端软件图标

如果不配置 electron 会自动使用自己的图标作为默认图标，作为一款软件总得有自己的图标吧，生成好你的图标命名为icon.png放在 public 文件夹（当然你可以放在任意位置）里。然后配置资源路径（如果你放的不在 public 里就配置对应你放的文件夹），配置如下：

{
  "build": {
    "directories": {
      // 指定资源路径
      "buildResources": "public"
    }
  }
}

隐藏 Windows 的菜单

如果你和我一样是 web 项目转客户端，可能暂时不需要用到菜单这个功能。但是 windows 上，应用窗口上方又会默认加上菜单，这样显得应用很丑，mac 菜单不在应用上所以看上去还好。这样看来，去掉 Windows 菜单无疑是最好的选择。想要去掉 Windows 端的只需要引入 Mennu，然后在创建窗口的时候调用设置菜单的方法即可。配置如下：

// 引入Menu
const { app, BrowserWindow, Menu } = require('electron');

function createWindow() {
  // 隐藏菜单
  Menu.setApplicationMenu(null);
  const win = new BrowserWindow();
  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();
  }
});

windows 自定义安装路径设置

electron 默认设置是直接安装到 c 盘的，这样对有自定义路径安装需求的用户来说不太友好。所以我们需要进行一些设置让安装包可以支持自定义路径安装。配置如下：

{
  "build": {
    // 安装过程的配置
    "nsis": {
      "oneClick": false, // 是否一键安装
      "allowToChangeInstallationDirectory": true // 允许修改安装目录
    }
  }
}

Windows 打包成压缩文件

electron 默认给 Windows 打包成 exe 文件，如果你想提供绿色软件（压缩文件）给用户，只需要配置 target 即可，一般推荐 7z 压缩格式，因为它压缩出来比较小。配置如下：

{
  "build": {
    "win": {
      "target": ["nsis", "7z", "zip"]
    }
  }
}

白屏问题

因为通常我们的 web 程序是部署到服务器上的，所以打包出来直接去双击文件打开根目录是系统的根目录，访问不到对应的 js 自然就是是白屏的。
解决它只需要修改打包出来的路径为相对路径就可以了。还有路由为 hash 路由
保证打包出来的文件我们双击打开能够正常访问就行。

这里要主要 umi4 项目 dev 不支持相对路径写法，可以根据环境配置 public

1
2
3

export function getUrlByEnv(url: string) {
  return process.env.NODE_ENV === 'production' ? `./${url}` : `/${url}`;
}

配置

{
  "build": {
    //输入
    "files": ["dist/**/*", "main.js"],
    "directories": {
      // 输出
      "output": "release/build"
    }
  }
}

构建技巧

排查问题，怎么知道我们打的包去了哪儿呢
asar 这个 node 可以解压资源
asar extract 需要解压文件的路径解压文件存放的路径

/release/build/mac/ant-design-pro.app/Contents/Resources/app.asar

打包原理

读取 package.json
拿到 build 配置，没有设置就使用默认设置。
package.json、node_modules、files 中的文件拷贝到资源目录里进行压缩
main.js 改造，主要是修改入口