<div id="readability-page-1" class="page"><div>
			
<main role="main">
	<article>
		
		<div>
			PR: <a href="https://github.com/vercel/turbo/pull/3111">https://github.com/vercel/turbo/pull/3111</a>
평상시 내 업무는 swc/next-swc 관리뿐인데 매니저가 이거 작업해줄 수 있냐고 물어보길래 내가 하겠다고 했다.
터보팩 구조를 잘 몰라서 얼마나 걸릴지 잘 모르는 상태였지만 뭐… 팀 프로젝튼데 당연히 해야지 싶었다.
<hr>
그래서 작업을 시작했다.
근데 난 Turbopack을 전혀 몰랐다.
내가 고쳐야할 코드가 어딨는지는 둘째치고 터보팩의 Value, ValueCell 같은 게 무슨 역할인지도 몰랐다.
문서야 있지만 내가 문서를 읽는 걸 좋아하지 않는 관계로 건너뛰고 대충 폴더 열어보면서 테스트를 찾아봤더.
테스트가 존재할만한 폴더들을 하나씩 열어보다가 <a href="https://github.com/vercel/turbo/tree/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-tests/tests"><code>turbopack-tests</code></a>이라는 폴더를 찾았다.
내가 원하는 테스트 케이스 추가히고… <code>cargo test</code> 돌려보니까 내가 추가한 케이스가 실패하더라.
그 말은 제대로 추가한 게 맞는 얘기다.
근데 업데이트가 안 되길래 <code>UPDATE=1 cargo test</code>를 해봤다.
swc에서 쓰는 패턴인데, 터보팩에서 쓰는지는 모르곘지만 swc에서 옛날부터 쓰던 패턴이라 당연히 가져갔겠지 싶어서 해봤다.
잘 업데이트 됐다.
여기까지가 테스트 시스템 파악이다.
<hr>
그 다음에는 테스트 결과로 출력된 에러 메시지중에서 <code>which has no exports</code>를 뽑아와서 그걸로 검색해봤다.
<div><pre tabindex="0"><code data-lang="rust">EcmascriptExports::None =&gt; 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(),
</code></pre></div><a href="https://github.com/vercel/turbo/blob/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-ecmascript/src/references/esm/export.rs#L61-L76">검색 결과에서 나온 코드</a>는 <code>EcmascriptExports::None</code>인 경우에 실행되는 코드이므로, <code>EcmascriptExports::None</code>로 검색해봐서 <a href="https://github.com/vercel/turbo/blob/ec8ee8652c04d0366bebcb1fdfe7cee85a97b44e/crates/turbopack-ecmascript/src/references/mod.rs#L403">해당 Variant를 만드는 코드</a>를 찾았다.
<div><pre tabindex="0"><code data-lang="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
};
</code></pre></div><code>EcmascriptExports::CommonJs</code>가 사용되어야할 것 같은데, 탐지 코드가 없는 것 같더라.
그리고 위에 보니까 <code>.add_code_gen</code>이 있는데 그걸 사용하면 출력물에 무언가를 추가할 수 있는 것 같아서 <code>EsmExports</code>를 찾아봤다.
<a href="https://github.com/vercel/turbo/blob/56039940cdfac07b68e030da1396214962e99ceb/crates/turbopack-ecmascript/src/references/esm/export.rs#L116-L223">해당 타입의 코드</a>를 보니까 내가 찍은 게 맞는 것 같더라.
처음엔 cjs 모듈에 무언가를 추가해야할 것 같아서 <code>CjsExports</code> 타입을 추가하고 <code>EcmascriptExports::CommonJs</code>를 <code>EcmascriptExports::CommonJs(CjsExportsVc)</code>로 변경했었다.
근데 하고나서 보니까 cjs 모듈에 코드를 추가하는 게 아니고 cjs 모듈을 불러온 ES 모듈에 코드를 추가해야하는 것이더라.
그래서 ESM 처리 코드를 봤다.
우선
<div><pre tabindex="0"><code data-lang="rust">let stmt = quote!("__turbopack_esm__($getters);" as Stmt,
 getters: Expr = getters.clone()
);
</code></pre></div>를 보니까 어떻게 돌아가는지 알 것 같더라.
출력물에 <code>__turbopack_esm__</code>가 존재했는데, 거기에 무언가를 추가하면 될 것 같았다.
<a href="https://github.com/vercel/turbo/blob/079505baf1ce03707d28b6c0afb158dca601a11a/crates/turbopack-ecmascript/src/references/esm/export.rs#L43-L114"><code>expand_star_exports</code></a>를 보니까 출력물에 존재하는 Id들이나 문자열들이 어디서 오는지는 대략 알겠더라.
<hr>
근데 그냥 추가하면 다른 테스트 파일들도 다 바뀔 것 같아서 간단하게 cjs 탐지코드를 넣었다.
<div><pre tabindex="0"><code data-lang="rust">fn has_cjs_export(p: &amp;Program) -&gt; 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(&amp;mut self, i: &amp;Ident) {
 if &amp;*i.sym == "module" {
 self.found = true;
 }
 }
 }

 let mut v = Visitor { found: false };
 p.visit_with(&amp;mut v);
 v.found
</code></pre></div>이름 고민하기 귀찮아서 그냥 함수 안에다가 타입을 정의해놨다.
<hr>
처음엔 Spread 원소들을 넣었는데, 그러니까 <code>__turbopack__esm__</code>이 import보다 먼저 출력되어서 런타임에 깨지는 문제가 있었다.
그래서 해도 되는지 물어본 뒤에 런타임에 <code>__turbopack__cjs__</code>를 runtime.js에 추가하고 그걸 호출하도록 변경했다.
삽입 위치는 임포트가 처리된 직후로 하라고해서 그렇게 구현했다.
스프레드를 쓸지 lazy를 쓸지도 물어봤는데 import 직후에 있으면 spread 써도 된다고 하더라.
그래서 작업하고 코드 정리한 뒤 PR 보냈다.

		</div>
	</article>
</main>




			</div></div>

Math && Programming

PR: https://github.com/vercel/turbo/pull/3111 평상시 내 업무는 swc/next-swc 관리뿐인데 매니저가 이거 작업해줄 수 있냐고 물어보길래 내가 하겠다고 했다. 터보팩 구조를 잘 몰라서 얼마나 걸릴지 잘 모르는 상태였지만 뭐&

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

댓글