Turbopack 源码调试

image

截止今天（2024-06-28）Turbopack 仅支持在 Next.js 项目的开发环境使用，详细见: Getting started
image

Turbopack 是否支持生产环境打包 🤔️ ？如何脱离 Next.js 使用 🤔️ ？如何进行源码调试 🤔️ ？

这需要我们先对它的源码先有个初步的了解，下面是我的一些调试经验

Step1: 拉取源码

1
2
3
4
git clone https://github.com/vercel/turbo

// 切换到目前最新的 commit, 后面的调试都基于该 commit
git checkout 3bca6e8415

Step2: 新增 VS Code 调试命令

Turbopack 代码挺规范的，按照常理 turbopack-cli 这个库就是我们调试 Turbopack 源码的入口了
image

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
  "name": "turbo dev",
  "type": "lldb",
  "request": "launch",
  "program": "${workspaceRoot}/target/debug/turbopack-cli",
  "args": ["dev"],
  "cwd": "${workspaceRoot}",
  "presentation": {
    "group": "commands",
    "order": 1
  }
},
{
  "name": "turbo build",
  "type": "lldb",
  "request": "launch",
  "program": "${workspaceRoot}/target/debug/turbopack-cli",
  "args": ["build"],
  "cwd": "${workspaceRoot}",
  "presentation": {
    "group": "commands",
    "order": 1
  }
}

Step3: 构建 turbopack-cli

1
2
cd crates/turbopack-cli
cargo build

Step4: 补充一下 turbopack-cli 运行需要的 config

dev 命令

image 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
use crate::arguments::CommonArguments;
use core::net::Ipv4Addr;
/// Start a devserver with the given args.
pub async fn start_server(args: &DevArguments) -> Result<()> {
    let mut args = DevArguments {
        port: 3000,
        hostname: IpAddr::V4(Ipv4Addr::new(0, 0, 0, 0)),
        no_open: true,
        eager_compile: false,
        allow_retry: false,
        common: CommonArguments {
            show_all: true,
            log_detail: true,
            full_stats: true,
            memory_limit: Some(1024),
            log_level: Default::default(),
            entries: Some(vec![String::from("app/page.tsx")]),
            dir: Some(PathBuf::from("/Users/xxx/my-app")),
            root: Some(PathBuf::from("/Users/xxx/my-app"))
        }
    };

build 命令

✅ 看来 turbopack 支持生产环境打包，只是官方还未开放出来

image 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
use crate::arguments::CommonArguments;

pub async fn build(args: &BuildArguments) -> Result<()> {
    let mut args = BuildArguments {
        no_minify: true,
        common: CommonArguments {
            show_all: true,
            log_detail: true,
            full_stats: true,
            memory_limit: Some(1024),
            log_level: Default::default(),
            entries: Some(vec![String::from("app/page.tsx")]),
            dir: Some(PathBuf::from("/Users/xxx/my-ap")),
            root: Some(PathBuf::from("/Users/xxx/my-ap"))
        }
    };

Step5: 创建一个 React Demo 项目

接着我们准备一个用于 turbopack-cli 进行打包的 React Demo 项目，然后把上面的 dev 与 build 命令的 dir、root 目录的值改为下面命令创建好的目录

1
npx create-next-app --example with-turbopack

Step6: 点击 turbo build 或者 turbo dev 来正式开始调试

image

You do it!

✅ turbopack 已经能够脱离 Next.js 使用
image