[玩转 electron 系列]esbuild 构建纯 ts electron 项目

背景

继上篇 纯 ts 从零完成 electron 的搭建和构建 做完之后，我发现一个问题，就是用 tsc 去转换 ts 文件虽然没问题，但是如果在 electron 中去引用其他库，则在最终调 electron-builder 的时候，会将所有的 node_modules 全部构建进去，非常浪费时间和资源。若项目比较大，可预想到肯定是会非常慢。所以开了这篇集中解决这个问题。

问题描述

需要有一种比较好的方式去管理 electron 的 ts 文件。
市面上比较好的打包工具有：esbuild, parcel, rollup, webpack

我选择 esbuild 的原因一个是性能。可在 esbuild官网 看到其构建速度是非常快的。且我使用的 electron 版本很新，也能兼容 esbuild，配置看起来也不复杂。那就说干就干吧！

代码

esbuild.ts

import { join } from 'path';
import { BuildOptions, build } from 'esbuild';

const ROOT = __dirname;

const ELECTRON_ROOT = join(ROOT, 'electron')

const createOptions = (): BuildOptions => ({
  bundle: true,
  entryPoints: [
    // main file
    join(ELECTRON_ROOT, 'main.ts'),
    // preload file
    join(ELECTRON_ROOT, 'preload.ts'),
  ],
  treeShaking: true,
  minify: true,
  external: ['electron'],
  format: 'cjs',
  loader: { '.ts': 'ts' },
  outdir: join(ROOT, 'out/'),
  platform: 'node',
  target: 'chrome89',
  tsconfig: join(ELECTRON_ROOT, 'tsconfig.json'),
});

build(createOptions())
  .then(() => {
    console.log('Electron Build successed');
  })
  .catch((error: any) => {
    console.log('Electron Build Failed');
    console.log(error);
  });

稍微解释一下其中几个点：

1. bundle esbuild 默认是不打包的，所以这个域需要手动设置为 true
2. minify 这个选项其实做了3个事情，移除空格、重写语法使其更体积更小、重命名变量为更短的名称。分别对应参数 minifyIdentifiers, minifySyntax, minifyWhitespace。据我了解到，minifySyntax 有可能会有问题，所以如果发现生成的文件运行不起来，那很有可能是这里参数的问题。解决方法就是只设置其他两个为 true, minifySyntax 设置为 false 就好了。
3. target: 我的 electron 版本是 16.*，也是搜了人家的配置刚好和我的配套。
4. external：如果不加上 electron，跑起来会报错 electron install failed

小结

用了这个之后，安装包的体积减的相对比较少，但是构建速度和安装时间(我生成的是 windows 的安装包)都快了近10倍，巨开心哈哈