# 작업 기록: Turbopack에 cjs 지원 개선



PR: https://github.com/vercel/turbo/pull/3111

터보팩 구조를 잘 몰라서 얼마나 걸릴지 잘 모르는 상태였지만 뭐... 팀 프로젝트니까 해야지.

---

그래서 작업을 시작했다.
근데 난 Turbopack을 전혀 몰랐다.
내가 고쳐야할 코드가 어딨는지는 둘째치고 터보팩의 Value, ValueCell 같은 게 무슨 역할인지도 몰랐다.
문서야 있지만 내가 문서를 읽는 걸 좋아하지 않는 관계로 건너뛰고 대충 폴더 열어보면서 테스트를 찾아봤더.
테스트가 존재할만한 폴더들을 하나씩 열어보다가 [`turbopack-tests`](https://github.com/vercel/turbo/tree/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-tests/tests)이라는 폴더를 찾았다.
내가 원하는 테스트 케이스 추가히고... `cargo test` 돌려보니까 내가 추가한 케이스가 실패하더라.
그 말은 제대로 추가한 게 맞는 얘기다.
근데 업데이트가 안 되길래 `UPDATE=1 cargo test`를 해봤다.
swc에서 쓰는 패턴인데, 터보팩에서 쓰는지는 모르곘지만 swc에서 옛날부터 쓰던 패턴이라 당연히 가져갔겠지 싶어서 해봤다.
잘 업데이트 됐다.
여기까지가 테스트 시스템 파악이다.

---

그 다음에는 테스트 결과로 출력된 에러 메시지중에서 `which has no exports`를 뽑아와서 그걸로 검색해봤다.

```rust
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(),
```

[검색 결과에서 나온 코드](https://github.com/vercel/turbo/blob/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-ecmascript/src/references/esm/export.rs#L61-L76)는 `EcmascriptExports::None`인 경우에 실행되는 코드이므로, `EcmascriptExports::None`로 검색해봐서 [해당 Variant를 만드는 코드](https://github.com/vercel/turbo/blob/ec8ee8652c04d0366bebcb1fdfe7cee85a97b44e/crates/turbopack-ecmascript/src/references/mod.rs#L403)를 찾았다.

```rust
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`를 찾아봤다.
[해당 타입의 코드](https://github.com/vercel/turbo/blob/56039940cdfac07b68e030da1396214962e99ceb/crates/turbopack-ecmascript/src/references/esm/export.rs#L116-L223)를 보니까 내가 찍은 게 맞는 것 같더라.

처음엔 cjs 모듈에 무언가를 추가해야할 것 같아서 `CjsExports` 타입을 추가하고 `EcmascriptExports::CommonJs`를 `EcmascriptExports::CommonJs(CjsExportsVc)`로 변경했었다.
근데 하고나서 보니까 cjs 모듈에 코드를 추가하는 게 아니고 cjs 모듈을 불러온 ES 모듈에 코드를 추가해야하는 것이더라.
그래서 ESM 처리 코드를 봤다.
우선

```rust
let stmt = quote!("__turbopack_esm__($getters);" as Stmt,
    getters: Expr = getters.clone()
);
```

를 보니까 어떻게 돌아가는지 알 것 같더라.
출력물에 `__turbopack_esm__`가 존재했는데, 거기에 무언가를 추가하면 될 것 같았다.
[`expand_star_exports`](https://github.com/vercel/turbo/blob/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-ecmascript/src/references/esm/export.rs#L43-L114)를 보니까 출력물에 존재하는 Id들이나 문자열들이 어디서 오는지는 대략 알겠더라.

---

근데 그냥 추가하면 다른 테스트 파일들도 다 바뀔 것 같아서 간단하게 cjs 탐지코드를 넣었다.

```rust
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 보냈다.