웹 트랙 1주차 과제는 개발 환경 설정이다.

https://github.com/thorvg/thorvg.web/wiki/Development-Guide

위 가이드를 참고하면 별거 없어보이는데 나는 wasm 빌드 관련 에러가 많이 났다.
에러가 난 점에 대해서는 따로 정리를 하며 wasm에 대해서 더욱 알아볼 예정이다.

로컬 환경은 아래와 같다.

OS: windows 11
개발 환경: MSYS2
터미널: powershell
pnpm 스크립트 실행 환경: git bash

개발 환경

프로젝트 단위별로 개발 환경을 자꾸 변경하게 되는 것 같아서 도커를 쓸까 하다가 로컬 런타임에서 가볍게 자주 변경해야 될 필요성이 있어서 mise로 환경을 좀 갈아 엎었다.

mise는 각종 런타임과 CLI 도구의 버전을 프로젝트 단위로 관리할 수 있게 해준다.

mise help 치면 왠만한 사용례는 다 나온다.

Examples:

$ mise install node@20.0.0       Install a specific node version
$ mise install node@20           Install a version matching a prefix
$ mise install node              Install the node version defined in config
$ mise install                   Install all plugins/tools defined in config

$ mise install cargo:ripgrep     Install something via cargo
$ mise install npm:prettier      Install something via npm

$ mise use node@20               Use node-20.x in current project
$ mise use -g node@20            Use node-20.x as default
$ mise use node@latest           Use latest node in current directory

$ mise up --interactive          Show a menu to upgrade tools

$ mise x -- npm install          `npm install` w/ config loaded into PATH
$ mise x node@20 -- node app.js  `node app.js` w/ config + node-20.x on PATH

$ mise set NODE_ENV=production   Set NODE_ENV=production in config

$ mise run build                 Run `build` tasks
$ mise watch build               Run `build` tasks repeatedly when files change

$ mise settings                  Show settings in use
$ mise settings color=0          Disable color by modifying global config file

thorvg.web 프로젝트 구동에 필요한 node.js, pnpm, meson, ninja 를 mise로 설정해줬다.

Emscripten 은 공식 홈페이지 getting started 참고하되 windows의 경우 .bat 파일 사용하라는 주의 사항만 숙지하면 된다.

환경 변수도 자동으로 설정되게끔 해놓아서 기다리기만 하면 된다. (내가 한거 아님)

thorvg.web

thorvg.web 프로젝트는 lottie-player 와 webcanvas 두 프로젝트로 구성된 모노레포이다.

package.json을 보면 하위 레포들 명령어를 통일해놓고 최상위에서 build 명령어를 입력해도 되게끔 해놨다.

  "scripts": {
    "build": "pnpm -r build",
    "clean": "pnpm -r clean",
    "test": "pnpm -r test",
    "lint": "pnpm -r lint",
    "lint:fix": "pnpm -r lint:fix"
  }

재귀 옵션(-r)으로 하위 레포들이 명령어가 실행되게끔 해놓아서