# Svelte 컴파일러 핸드북

> Clean Markdown view of GeekNews topic #1837. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=1837](https://news.hada.io/topic?id=1837)
- GeekNews Markdown: [https://news.hada.io/topic/1837.md](https://news.hada.io/topic/1837.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-04-06T16:16:01+09:00
- Updated: 2020-04-06T16:16:01+09:00
- Original source: [lihautan.com](https://lihautan.com/the-svelte-compiler-handbook/)
- Points: 6
- Comments: 2

## Topic Body

- Svelte의 컴파일 단계를 이해하기 쉽게 설명

#1 .svelte 파일을 읽어서 AST로 변환

ㅤ→ HTML은 자체 파싱, Script는 Acorn, CSS 는 css-tree 사용

#2 AST를 탐색해서 레퍼런스와 의존성 추적

ㅤ→ Component 인스턴스 만들고, 변수들을 찾아서 마킹

#3 코드 블록 과 조각들 생성

ㅤ→ DOM/SSR Renderer

#4 코드 생성

## Comments



### Comment 1529

- Author: heycalmdown
- Created: 2020-04-07T14:21:45+09:00
- Points: 3

며칠 전에 소개된 Toast UI Editor(https://news.hada.io/topic?id=1823)도 그렇고, Language Server Protocol(https://en.wikipedia.org/wiki/Language_Server_Protocol)도 그렇고 AST를 활용하는 프로젝트가 점점 많아지네요. 예전에 JS 파일을 텍스트가 아닌 AST로 내려보내서 브라우저 엔진이 더 빨리 해석하게 하자는 주장도 봤던거 같은데, 이 글(https://blog.cloudflare.com/binary-ast)은 아니었지만 비슷한 아이디어 같습니다.

암시적으로 만들어지는 AST가 아니라 좀 더 의미있게 손으로 AST를 만들게 되면 이제 S-Expression 계열의 함수형 언어가 되는데요, 중간에서 만나면 재밌겠네요.

### Comment 1527

- Author: xguru
- Created: 2020-04-06T16:16:27+09:00
- Points: 1

한번 읽고나면 외부 기여자들이 Svelte 코드에 컨트리뷰트 하기 편할듯