<div id="readability-page-1" class="page"><div>
			
<main role="main">
	<article>
		
		<div>
			<p>소스맵을 개선하려다가 욕이 절로 나오는 상황을 맞닥뜨렸다.
빡쳐서 적는 글이다.</p>
<hr>
<p>일단 상황을 설명하자면, 소스맵을 기반으로 작동하는 툴이 많은데, swc를 이용하면 제대로 작동하지 않는다는 이슈 제보가 있었다.
바벨이나 <code>tsc</code>를 쓰면 작동한다더라.
근데 특성상 소스맵은 자동화된 테스트가 매우 어렵다.
그래서 고민을 엄청 하다가 다른 툴에 아예 맞춰버리는 방법을 생각해냈다.</p>
<p>처음엔 바벨의 소스맵이 swc 것보단 낫겠지 하고 바벨 소스맵하고 swc 소스맵 비교해주는 테스트 시스템을 만들었다.
근데 테스트하다가 매우 놀라운 걸 알게되었다.
바벨 소스맵보다 swc 소스맵이 정확하다.</p>
<p><a href="https://twitter.com/kdy1dev/status/1572480517634924544">https://twitter.com/kdy1dev/status/1572480517634924544</a></p>
<p>솔직히 당황했다.
가장 중요한 AST 노드인 <code>Identifier</code>의 위치조차 제대로 안 던져주는데 작동하는 툴들은 뭐냐고…</p>
<p>다운스트림 툴들이 소스맵을 어떻게 처리하는지 대충 알 것 같아서 좀 짜증이 났지만 그건 신경쓰지 않기로 하고 <code>terser</code>에 맞추기로 했다.
근데 terser도 똑같더라.</p>
<p><img src="https://kdy1.github.io/post/2022/09/srcmap/swc.png" alt="swc"></p>
<p><code>swc</code> 의 소스맵</p>
<p><img src="https://kdy1.github.io/post/2022/09/srcmap/terser.png" alt="terser"></p>
<p><code>terser</code>의 소스맵</p>
<hr>
<p>하…
<code>terser</code>의 소스맵이나 바벨의 소스맵이 저런데 다운스트림 툴들이 작동한다는 건 다운스트림 툴들이 소스맵을 어느정도 패치해서 쓰기 때문일 것 같은데 이러면 일이 매우 복잡해진다.
본격적으로 작업을 하기 전에 지금까지 판 것들을 기록해놓는다.</p>

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






			</div></div>

Math && Programming

소스맵을 개선하려다가 욕이 절로 나오는 상황을 맞닥뜨렸다. 빡쳐서 적는 글이다. 일단 상황을 설명하자면, 소스맵을 기반으로 작동하는 툴이 많은데, swc를 이용

소스맵 문제에 대한 기록

댓글