작업 기록: Turbopack에 cjs 지원 개선
PR: https://github.com/vercel/turbo/pull/3111
터보팩 구조를 잘 몰라서 얼마나 걸릴지 잘 모르는 상태였지만 뭐... 팀 프로젝트니까 해야지.
그래서 작업을 시작했다.
근데 난 Turbopack을 전혀 몰랐다.
내가 고쳐야할 코드가 어딨는지는 둘째치고 터보팩의 Value, ValueCell 같은 게 무슨 역할인지도 몰랐다.
문서야 있지만 내가 문서를 읽는 걸 좋아하지 않는 관계로 건너뛰고 대충 폴더 열어보면서 테스트를 찾아봤더.
테스트가 존재할만한 폴더들을 하나씩 열어보다가 turbopack-tests이라는 폴더를 찾았다.
내가 원하는 테스트 케이스 추가히고... cargo test 돌려보니까 내가 추가한 케이스가 실패하더라.
그 말은 제대로 추가한 게 맞는 얘기다.
근데 업데이트가 안 되길래 UPDATE=1 cargo test를 해봤다.
swc에서 쓰는 패턴인데, 터보팩에서 쓰는지는 모르곘지만 swc에서 옛날부터 쓰던 패턴이라 당연히 가져갔겠지 싶어서 해봤다.
잘 업데이트 됐다.
여기까지가 테스트 시스템 파악이다.
그 다음에는 테스트 결과로 출력된 에러 메시지중에서 which has no exports를 뽑아와서 그걸로 검색해봤다.
EcmascriptExports::None => AnalyzeIssue {
code: None,
category: StringVc::cell("analyze".to_string()),
message: StringVc::cell(format!(
"export * used with module {} which has no exports\nTypescript only: Did you \
want to import only types with `export type * from \"...\"`?",
asset.path().to_string().await?
)),
path: asset.path(),
severity: IssueSeverity::Warning.into(),
source: None,
title: StringVc::cell("unexpected export *".to_string()),
}
.cell()
.as_issue()
.emit(),
검색 결과에서 나온 코드는 EcmascriptExports::None인 경우에 실행되는 코드이므로, EcmascriptExports::None로 검색해봐서 해당 Variant를 만드는 코드를 찾았다.
let exports = if !esm_exports.is_empty() || !esm_star_exports.is_empty() {
let esm_exports: EsmExportsVc = EsmExports {
exports: esm_exports,
star_exports: esm_star_exports,
}
.into();
analysis.add_code_gen(esm_exports);
EcmascriptExports::EsmExports(esm_exports)
} else if let Program::Module(_) = program {
EcmascriptExports::None
} else {
EcmascriptExports::CommonJs
};
EcmascriptExports::CommonJs가 사용되어야할 것 같은데, 탐지 코드가 없는 것 같더라.
그리고 위에 보니까 .add_code_gen이 있는데 그걸 사용하면 출력물에 무언가를 추가할 수 있는 것 같아서 EsmExports를 찾아봤다.
해당 타입의 코드를 보니까 내가 찍은 게 맞는 것 같더라.
처음엔 cjs 모듈에 무언가를 추가해야할 것 같아서 CjsExports 타입을 추가하고 EcmascriptExports::CommonJs를 EcmascriptExports::CommonJs(CjsExportsVc)로 변경했었다.
근데 하고나서 보니까 cjs 모듈에 코드를 추가하는 게 아니고 cjs 모듈을 불러온 ES 모듈에 코드를 추가해야하는 것이더라.
그래서 ESM 처리 코드를 봤다.
우선
let stmt = quote!("__turbopack_esm__($getters);" as Stmt,
getters: Expr = getters.clone()
);
를 보니까 어떻게 돌아가는지 알 것 같더라.
출력물에 __turbopack_esm__가 존재했는데, 거기에 무언가를 추가하면 될 것 같았다.
expand_star_exports를 보니까 출력물에 존재하는 Id들이나 문자열들이 어디서 오는지는 대략 알겠더라.
근데 그냥 추가하면 다른 테스트 파일들도 다 바뀔 것 같아서 간단하게 cjs 탐지코드를 넣었다.
fn has_cjs_export(p: &Program) -> bool {
use swc_core::ecma::visit::{visit_obj_and_computed, Visit, VisitWith};
struct Visitor {
found: bool,
}
impl Visit for Visitor {
visit_obj_and_computed!();
fn visit_ident(&mut self, i: &Ident) {
if &*i.sym == "module" {
self.found = true;
}
}
}
let mut v = Visitor { found: false };
p.visit_with(&mut v);
v.found
이름 고민하기 귀찮아서 그냥 함수 안에다가 타입을 정의해놨다.
처음엔 Spread 원소들을 넣었는데, 그러니까 __turbopack__esm__이 import보다 먼저 출력되어서 런타임에 깨지는 문제가 있었다.
그래서 해도 되는지 물어본 뒤에 런타임에 __turbopack__cjs__를 runtime.js에 추가하고 그걸 호출하도록 변경했다.
삽입 위치는 임포트가 처리된 직후로 하라고해서 그렇게 구현했다.
스프레드를 쓸지 lazy를 쓸지도 물어봤는데 import 직후에 있으면 spread 써도 된다고 하더라.
그래서 작업하고 코드 정리한 뒤 PR 보냈다.