Esbuild 调试 Golang 进程和 NodeJs 通信小白教程

admin 报建百科 2024-04-24 199 18

背景

在 esbuild 中有很多同学，都进行了nodejs 插件的开发，但是具体怎么通过 nodejs 进程通信到 golang 中呢？通过这篇文章能让你对 esbuild 插件源码有一个 200% 的了解。

Esbuild 隐藏的秘密

隐藏在 issue 中 esbuild 二次开发特性
- github.com/evanw/esbui…
- github.com/evanw/esbui…

重新编译方法 ·installForTests·

installForTests 是一个可以重新编译 esbuild 函数，是作者特意留下来用于调试开发esbuild用的，下面这段代码就是一个使用的 示例

import {loadPlugin, resolvePlugin} from '../plugin'
import fs from 'fs';
import path from 'path';

// esbuild 源码中 目录 esbuild/scripts/esbuild.js
const esbuild = require('../../scripts/esbuild').installForTests()
// const esbuild = require('../../npm/esbuild/lib/main')

async function exec() {

  let res = await esbuild.build({
    entryPoints: ["src/index.tsx"],
    outfile: "dist/main.js",
    minify: false,
    bundle: true,
    // watch: true,
    incremental: true,
    sourcemap: true,
    plugins: [loadPlugin, resolvePlugin]
  });
}

查看这段 installForTests 源码，这里要关注两行代码

exports.installForTests = () => {
  // Build the "esbuild" binary and library
  const esbuildPath = exports.buildBinary()
  buildNeutralLib(esbuildPath)
  ...
}

buildBinary 该方法是构建 esbuild 上卷 golang 的字节码，通过 nodejs childprocess 调用 go build 这里我们要留意该方法 buildBinary 中的 github/esbuild/scripts/esbuild.js 中 line 298 中

// 目前代码 不支持 gops 附加调试
childProcess.execFileSync('go', ['build', '-gcflags="all=-N -l"', './cmd/esbuild'], { cwd: repoDir, stdio: 'ignore' })

// 注意！！！ 建议修改如下 增加 '-ldflags=-s -w' 参数 来支持 gops 调试

childProcess.execFileSync('go', ['build', '-ldflags=-s -w', './cmd/esbuild'], { cwd: repoDir, stdio: 'ignore' })

buildNeutralLib 该方法是 esbuild 自举构建 nodejs -> npm/esbuild/lib/main.js 调用函数，esbuild 是不含有任何 npm run build 构建调用。我们这里有一些需要关注的代码。lib/shared/common.ts 这个代码大部分都会被构建于 npm/esbuild/lib/main.js 主包调用 nodejs 中逻辑中。

// line 662 这里是 nodejs 发送 streambuffer unit8array 通过 ipc 到 golang 中 核心方法
// 这里的 Req 就是 每个 nodejs 调用 golang 中，参数类型 
// sendRequest<protocol.RebuildRequest, protocol.BuildResponse> 发送重新构建 示例。
// 该方法 是一个 镜像方法 在golang 中 回调 nodejs 中有同样的实现。
 let sendRequest = <Req, Res>(
    refs: Refs | null,
    value: Req,
    callback: (error: string | null, response: Res | null) => void
  ): void => {
    ....
  }

rebuild 参数如下，esbuild 命令类型 “command” 执行 task 时,esbuild 会有个 'id' key 来标识多线程中构建结果。

export interface RebuildRequest {
  command: "rebuild";
  key: number;
  //changefile: string[];
}

重定向字节码文件的环境变量 ESBUILD_BINARY_PATH

在 esbuild 主包中 install.js -> checkAndPreparePackage -> validateBinaryVersion 函数中,可以替换golang go-build 构建结果 esbuild bin文件。

使用示例如下

{
  "scripts": {
		"build": "ESBUILD_BINARY_PATH=/Users/xxx/Desktop/github/esbuild/esbuild ts-node-dev ./build/index.ts"
	},
}

如何附加调试 esbuild 进程，包含(vscode,goland)

下载esbuild 源码到本地
在任意目录，编写一个测试 demo 示例并指定 installForTests 为 esbuild 指定导出，(参考章节2 )，且确定增加了 gops 的编译参数 -ldflags=-s -w
在 packjson 中指定，环境变量到本地 github 下载源码目录。(参考章节3 )
指定esbuild 构建模式为 watch: true 或者 incremental: true,保证执行命令行后，golang的进程会挂起不会释放。
本地确认 golang 版本，确认已经 dlv gotools 调试工具

安装教程 github.com/go-delve/de…

$ git clone https://github.com/go-delve/delve
$ cd delve
$ go install github.com/go-delve/delve/cmd/dlv

安装成功后，在命令行中输入 dlv 会有如下提示:

?  ~ dlv
Delve is a source level debugger for Go programs.

Delve enables you to interact with your program by controlling the execution of the process,
evaluating variables, and providing information of thread / goroutine state, CPU register state and more.

The goal of this tool is to provide a simple yet powerful interface for debugging Go programs.

Pass flags to the program you are debugging using `--`, for example:

`dlv exec ./hello -- server --config conf/config.toml`

Usage:
  dlv [command]

vscode 中创建 .vscode/launch.json 并且填写如下内容

在命令行输入 $: ps -ef|grep esbuild 查询如果下结果

501 72470 72428   0  6:58下午 ttys000    0:00.09 /Users/xxx/Desktop/github/esbuild/esbuild --service=0.14.25 --ping

上述结果的 第二个数字 即为 esbuild golang 进程中的 PID 填写到如下 json 当中

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to Process",
      "type": "go",
      "request": "attach",
      "mode": "local",
      "processId": 72470
    }
  ]
}

启动附加后，可以尝试 internal/bundler/bundler.go 中 func runOnLoadPlugins 中设置断点, line 849 行左右。然后尝试修改 demo 中文件进行欢乐的调试。

PS：vscode golang extension 扩展中已经自动帮你安装了 gops 附加工具，调试的时候自动启动，使用vsocde 同学可以自动忽略！不需要了解 gops 是何种工具，只要保证第5步中 delve 成功安装即可

Goland 附加调试

确保你已经通过 jetbrains 网站中，下载好了 Goland 源码,且通过 Goland 打开 esbuild 源码
打开 internal/bundler/bundler.go 文件，任意*.go 文件皆可。已 mac 为标准按住 ctrl + option + f5, 第一次 Goland 会自动帮你下载 gops，然后就出现当前机器下所有 golang 的进程小窗口，选择其中 esbuild 的进行调试
(参考链接) www.jetbrains.com/help/go/att…
启动附加后，可以尝试 internal/bundler/bundler.go 中 func runOnLoadPlugins 中设置断点, line 849 行左右。然后尝试修改 demo 中文件进行欢乐的调试。

严格注意 go version 1.16.x 中 gops 附加会有严重bug 请确保当前 go version 并不是上述版本在进行上述尝试！

本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!