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

[DaengDo]

웹 트랙 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)으로 하위 레포들이 명령어가 실행되게끔 해놓아서

이렇게 함께 병렬로 빌드가 된다.

내 로컬 환경에서 대략 두 패키지 모두 4분 이내로 빌드가 된다.

js의 fetch 처럼 wasm 파일은 정책적으로 파일 프로토콜로 실행이 불가능하게 설정되어있다.

레포 내 example 폴더에 로컬 서버를 하나 파서 실행해보자

webcanvas

examples/live-editor 예제

lottie-player

examples/lottie.html 예제

examples/index.html 이 예제 귀엽다..😺

[tinyjin]

고생하셨습니다. 여러 플랫폼에서 테스트해야하기 때문에 저도 실제 개발시에는 도커를 많이 활용하고 있습니다. 윈도우즈에서는 도커보단 기타툴이 편하겠다 싶었는데, mise라는 것도 있네요. 하나 알아갑니다.

추가로 패키지 자체의 병렬 패키지는 현재 구성이 되어있는데요. 패키지별 프리셋 빌드는 동기식 빌드라 나중에 이것도 병렬로 개선해봐도 좋을 것 같습니다.

[DaengDo]

네 윈도우 네이티브에서는 mise가 상당히 매력적이더라고요. wasm 쪽 에러는 closuer 최적화 쪽 옵션이 조금 문제가 있었고 사소하지만 package.json에 script 부분이 posix 명령어 기반이라 pnpm 기본 스크립트를 깃 배시로 수정하기도 하는 등등의 것들이 있었는데.. 내용이 너무 산으로 가면서 길어져서 생략했었습니다. 서두에 적어둔 것 처럼 일단은 살펴보는 시간을 갖고있습니다