webdev 도구로 앱 컴파일하기

webdev 도구로 앱 컴파일하기

이 페이지에서는 webdev로 앱을 컴파일하고 build_runner로 앱을 테스트하는 방법을 알려드릴게요. 웹 앱을 개발할 때 자주 쓰는 도구의 사용법을 차근차근 정리해 봤어요.

출처: webdev

본문

설정하기

webdev를 사용하기 전에, 먼저 build_runner와 build_web_compilers 패키지를 앱에 의존성으로 추가해 주세요. build_runner 패키지가 webdev에 스크립팅 기능을 더해 주거든요.

$ dart pub add build_runner build_web_compilers --dev

webdev 설치 및 업데이트

webdev를 전역으로 설치하려면 dart install 명령을 사용해요.

$ dart install webdev

같은 명령으로 webdev를 업데이트할 수도 있어요. Dart SDK를 업데이트할 때나, webdev 명령이 왜인지 모르게 실패할 때 webdev도 함께 업데이트해 주시면 좋아요.

build_* 패키지에 의존하기

webdev를 사용하려면 build_runner와 build_web_compilers 패키지에 의존하는 패키지의 루트 디렉터리에 있어야 해요. 앱을 테스트할 거라면 build_test에도 의존해야 하구요.

이 패키지들에 의존하려면 앱의 pubspec.yaml 파일에 다음과 같은 dev_dependencies를 추가해 주세요.

dev_dependencies:
  # ···
  build_runner: ^2.15.1
  build_test: ^3.5.16
  build_web_compilers: ^4.8.5

평소처럼 pubspec.yaml을 변경한 뒤에는 dart pub get이나 dart pub upgrade를 실행해 주세요.

$ dart pub get

Dart 패키지의 명령으로 컴파일하고 테스트하기

이 도구는 두 가지 방식으로 컴파일할 수 있어요. 디버깅을 쉽게 해 주는 방식(serve)과, 작고 빠른 코드를 만들어 주는 방식(build)이에요.

개발용 컴파일러는 증분 업데이트를 지원하고 Asynchronous Module Definition(AMD) 모듈을 만들어 내요. webdev serve를 쓰면 Dart 파일을 수정하고 Chrome에서 새로고침만 해도 금방 수정 결과를 볼 수 있어요. 이 속도가 나오는 이유는 앱이 필요로 하는 모든 패키지를 컴파일하는 게 아니라, 변경된 모듈만 컴파일하기 때문이에요.

첫 컴파일은 전체 앱을 컴파일한다 보니 가장 오래 걸려요. serve 명령이 실행되는 동안에는 이후 빌드들이 점점 빨라지게 돼요.

프로덕션용 컴파일러는 하나의 minify된 JavaScript 파일을 생성해요.

이 절에서는 다음 명령들을 어떻게 쓰는지 설명드릴게요.

  • webdev serve — JavaScript 앱을 계속해서 빌드하는 개발 서버를 실행해요.
  • webdev build — 배포 가능한 버전의 JavaScript 앱을 빌드해요.
  • build_runner test — 테스트를 실행해요.

빌드 설정 파일을 이용해서 빌드를 커스터마이즈할 수도 있어요. 빌드 설정 파일에 대해 더 알고 싶다면 build_web_compilers 패키지를 참고해 주세요.

webdev serve

웹 앱의 개발 버전을 서빙하려면 다음 명령을 실행해 주세요.

$ webdev serve [--debug | --release] [ [<directory>[:<port>]] ... ]

이 명령은 앱을 서빙하면서 소스 코드 변경을 감시하는 개발 서버를 실행해요. 기본적으로 앱을 localhost:8080에서 서빙한답니다.

$ webdev serve

첫 번째 webdev serve는 컴파일이 느려요. 첫 컴파일 이후에는 에셋을 디스크에 캐시해 두기 때문에 이후 빌드는 더 빨라져요.

참고 — 개발용 컴파일러는 Chrome만 지원해요. 다른 브라우저에서 앱을 보려면 프로덕션 컴파일러를 사용해 주세요. 프로덕션 컴파일러는 최신 두 버전의 Chrome, Edge, Firefox, Safari를 지원해요.

Dart DevTools를 활성화하려면 --debug 플래그를 추가해 주세요.

$ webdev serve --debug # enables Dart DevTools

개발용 컴파일러 대신 프로덕션 컴파일러를 쓰려면 --release 플래그를 추가해요.

$ webdev serve --release # uses production compiler

디렉터리-포트 조합을 다양하게 지정할 수도 있어요. 예를 들어 다음 명령은 테스트 포트를 기본값(8081)에서 8083으로 바꿔요.

$ webdev serve web test:8083 # App: 8080; tests: 8083

webdev build

앱을 빌드하려면 다음 명령을 사용해 주세요.

$ webdev build [--no-release] --output [<dirname>:]<dirname>

기본적으로 build 명령은 프로덕션 JavaScript 컴파일러를 사용해서 앱의 프로덕션 버전을 만들어요. 개발용 JavaScript 컴파일러로 컴파일하려면 --no-release를 추가하구요, --output 옵션으로 Dart가 프로젝트 최상위 폴더를 컴파일하고 결과물을 기록할 위치를 조절해요.

다음 명령은 프로젝트 최상위 web 폴더를 build 디렉터리로 컴파일하는 예시예요. 이 명령은 기본적으로 프로덕션 JavaScript 컴파일러를 사용해요.

$ webdev build --output web:build

build_runner test

앱의 컴포넌트 테스트를 실행하려면 build_runner test 명령을 사용해 주세요.

$ dart run build_runner test [build_runner options] -- -p <platform> [test options]

팁 — 명령이 테스트 파일을 로드하지 못한다면, 앱의 pubspec에 build_test에 대한 dev_dependency가 있는지 확인해 보세요.

예를 들어 모든 Chrome 플랫폼 테스트를 실행하려면 다음과 같이 해요.

$ dart run build_runner test -- -p chrome

사용 가능한 모든 build_runner 옵션을 보려면 --help 또는 -h 옵션을 사용해 주세요.

$ dart run build_runner test -h

Dart는 빈 -- 인자 뒤에 오는 인자들을 test 패키지 러너로 직접 전달해요. test 패키지 러너의 모든 커맨드라인 옵션을 보려면 다음 명령을 사용해 주세요.

$ dart test -h

더 많은 정보

webdev의 전체 옵션 목록은 webdev --help를 실행하거나 webdev 패키지를 참고해 주세요.

다음 페이지도 함께 살펴보세요.

  • build_runner — build_runner와 내장 명령을 소개하고, 더 많은 정보로 안내해요.
  • build_web_compilers — dart2js_args를 사용해 컴파일러 옵션을 지정하는 예시와 함께 빌드 설정 방법을 설명해요.

더 알아보기