[과제] 웹 트랙 1주차) 개발 환경 설정 후 빌드 이정민

1. 개발 가이드 요약

개요

thorvg.web 모노레포는 두 패키지로 구성되어 있다.

• @thorvg/lottie-player → lottie 재생 전용
• @thorvg/webcanvas - 범용 캔버스 api

사전 준비

빌드를 위해서는 다음과 같은 항목이 필요하다.

• Node.js 20+, pnpm 10+
• Emscripten SDK
• Meson & Ninja

export EMSDK={absolute path}/emsdk
export PATH=$EMSDK/upstream/emscripten:$PATH

패키지 빌드

• @thorvg/lottie-player

cd packages/lottie-player
pnpm install
pnpm run build      
pnpm run build:watch

• @thorvg/webcanvas

cd packages/webcanvas
pnpm install && pnpm run build
sh ./wasm_wcanvas_build.sh $EMSDK   

테스트 수단

테스트 수단은 총 5가지가 있다.

1. Playground
   1. https://thorvg-playground.vercel.app/
2. Perf-test
   1. https://thorvg-perf-test.vercel.app/
3. HTML 예제
   1. pnpm run build:watch + npx http-server . -p 8080 후 /examples/
4. Framework Integration Testing
5. ThorVG Viewer
   
   

2. 작업 환경 구축

Emscripten SDK 설치

• Node.js 20+, pnpm 10+
• Emscripten SDK
• Meson & Ninja

중 Emscripten SDK를 추가로 설치가 필요했다.

cd /c/projects/ThorVG
git clone https://github.com/emscripten-core/emsdk.git && cd emsdk
./emsdk install 6.0.0     
./emsdk activate 6.0.0

thorvg 서브모듈 초기화

thorvg/는 git 서브모듈이라 clone 직후에는 폴더가 비어 있고, 이 상태에서는 WASM 빌드가 아예 시작되지 않는다.

git submodule update —init —recursive

빌드 세션마다 필요한 설정

export로 설정한 환경 변수는 현재 셸 세션에서만 유지되므로, 새 터미널을 열 때마다 다시 실행해야 한다.

export EMSDK=/c/projects/ThorVG/emsdk
export PATH="$HOME/bin:/c/Users/USER/AppData/Roaming/Python/Python314/Scripts:$EMSDK/upstream/emscripten:$PATH"
export npm_config_script_shell=bash

Emscripten SDK와 Python 실행 경로를 PATH에 추가하고, npm 스크립트가 Bash를 사용하도록 설정한다.

3. WebCanvas 패키지 빌드

cd packages/webcanvas
pnpm run build

4. LottiePlayer 패키지 빌드

cd packages/lottie-player
pnpm run build

5. 예제 구동

npx http-server . -p 8080

examples/live-editor.

examples/lottie.html (Lottie Player)