Awesome Frontend

使用 react devtool 插件调试

前言

虽然绝大多数时候，我们都可以也应该在浏览器调试渲染层的功能，但确实也会有需要在 electron 程序中调试的需求，这里就说明一下 electron 如何安装 chrome 插件 react devtool 调试项目。

核心依赖: electron-devtools-installeropen in new window

步骤

1、安装依赖

cd 到 apps/main 目录

yarn add -D electron-devtools-installer @types/electron-devtools-installer

2、添加环境变量 "NODE_ENV": "development" 标识为开发环境

修改 .env-cmdrc.json 配置文件

{
  "dev": {
    "NODE_ENV": "development",
    "ELECTRON_START_URL": "http://localhost:3000/"
  }
}

3、修改 main 函数

// main.ts
async function main() {
  app.addListener('ready', async () => {
    if (process.env.NODE_ENV === 'development') {
      // 安装 devtool 扩展
      await installExtension(REACT_DEVELOPER_TOOLS)
    }

    await createMainWindow()
  })
}

4、修改 createMainWindow 函数

一般，我们在开发环境还习惯打开控制台，这里也可以在创建窗口后自动打开它。

// main.ts
async function createMainWindow() {
  // 创建新的 electron 窗口
  const mainWindow = new BrowserWindow()
  // 载入生产环境的 url
  await mainWindow.loadURL(
    process.env.ELECTRON_START_URL ||
      path.join(__dirname, './build/index.html'),
  )
  if (process.env.NODE_ENV === 'development') {
    mainWindow.webContents.openDevTools()
  }
}

可能的错误参考: 常见问题 安装浏览器扩展报错

5、启动 electron 开发环境

启动后可以看到自动打开了控制台，然后可以看到 react devtool

实际效果

让主进程的代码也能热更新

前言

可能你也发现了，渲染层使用 cra 创建的项目默认包含了热更新，这都要得益于 webpack HMR 技术，但主进程并非如此，即便使用 tsc -w 监听并编译 ts 代码，但想要生效仍然需要重启 electron，不厌其烦。幸运的是，有人已经实现了这个需求。

核心依赖: electron-reloaderopen in new window

1、安装依赖

yarn add -D electron-reloader

2、在主进程入口文件载入 electron-reloader

//添加热更新功能
if (process.env.NODE_ENV === 'development') {
  require('electron-reloader')(module)
}

3、启动 electron 开发环境

效果

注 2: 当修改代码时，重启 electron 应用是由 electron-reloader 负责，即它不在 WebStorm 的控制之下了。 注 2: 目前另一个 electron-reloadopen in new window 还存在一些小问题。

使用 esbuild 优化渲染层打包性能

如果你还没有感觉到 cra 打包很慢，可以跳过这一节。

禁止 ts/babel 将代码编译为 ES5

由于 electron 捆绑的浏览器和 nodejs 版本都比较新，所以实际上渲染层我们基本不需要 babel 转义，可以优化一些配置项。

  • 将 browserslist 设置为仅支持最后一个 chrome 版本

    {
  "browserslist": ["last 1 chrome version"]
}

  • 修改 tsconfig.json 中的配置，将编译目标修改为 ESNext

    {
  "compilerOptions": {
    "target": "ESNext"
  }
}

使用 esbuild 编译 typescript 代码

核心依赖: esbuildopen in new window, cracoopen in new window

esbuild 是一个使用 golang 编写前端打包工具，官方在性能测试中提出比现有工具快 10-100 倍。

在 cra 创建的项目中，我们可以通过 craco 将 esbuild 仅用作 ts 编译之用（不会检查类型）。

1、安装依赖

yarn add -D @craco/craco craco-esbuild

2、修改 npm script，使用 craco 替换 react-scripts

{
  "scripts": {
    "start": "craco start",
    "build:cra": "react-scripts build",
    "build": "craco build",
    "test": "craco test"
  }
}

生产项目中的对比测试结果（6000+ 行 ts 代码）

分类ESBuildtsc
无缓存17.6136.57
有缓存（运行 5 次）15252.817095.2