Turbopack 源码调试 #71
Description
截止今天（2024-06-28）Turbopack 仅支持在 Next.js 项目的开发环境使用，详细见: Getting started
Turbopack 是否支持生产环境打包 🤔️ ？如何脱离 Next.js 使用 🤔️ ？如何进行源码调试 🤔️ ？
这需要我们先对它的源码先有个初步的了解，下面是我的一些调试经验
Step1: 拉取源码
git clone https://github.com/vercel/turbo
// 切换到目前最新的 commit, 后面的调试都基于该 commit
git checkout 3bca6e8415Step2: 新增 VS Code 调试命令
Turbopack 代码挺规范的，按照常理 turbopack-cli 这个库就是我们调试 Turbopack 源码的入口了
{
"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
cd crates/turbopack-cli
cargo buildStep4: 补充一下 turbopack-cli 运行需要的 config
dev 命令
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 支持生产环境打包，只是官方还未开放出来
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 目录的值改为下面命令创建好的目录
npx create-next-app --example with-turbopackStep6: 点击 turbo build 或者 turbo dev 来正式开始调试
You do it!
✅ turbopack 已经能够脱离 Next.js 使用