SystemJS 로 Angular2 로컬 개발 환경 만들기

소스 보기

개요

  • 꼭 필요한 최소한의 라이브러리만 이용합니다.
  • SystemJS 를 사용하였습니다.
  • angular-cli 를 사용하지 않았습니다.
  • jspm 을 사용하지 않았습니다.
  • 브라우저에서 미리 TypeScript 를 트랜스파일한 형태의 JS 파일만을 이용합니다.
  • SystemJS 에서는 트랜스파일하지 않습니다.
  • 테스트용 로컬 서버는 http-server 를 이용하였습니다.

angular2 가 의존하는 라이브이러리 설명 (2.4.2 기준)

  • core-js
    • 자바스크립트를 위한 표준 모듈 라이브러리입니다.
    • 상위 버전의 자바스크립트 스펙 사용을 위한 폴리필의 역할을 합니다.
    • reflect-metadatacore-js 에 포함되어 있기 때문에 따로 추가할 필요가 없습니다.
      • reflect-metadata 는 Decorator Metadata 를 위한 ES7 Reflection API 를 사용할 수 있게 해주는 라이브러리 입니다.
  • zone.js
    • Change Detection 의 역할을 합니다.
    • 모델의 변경을 감지하기 위해 angular 가 제공하던 방식이 아닌 범용 디텍션 라이브러리 입니다.
  • rxjs
    • The ReactiveX library for JavaScript 입니다.
    • 말이 필요없네요. Go
    • angular2 에서 기본 탑재한 패키지입니다.

그래서 최종 설치한 패키지 리스트

  • SystemJS 패키지
    • “systemjs”: “^0.19.41”
  • angular2 최소 패키지
    • “@angular/common”: “^2.4.2”
    • “@angular/compiler”: “^2.4.2”
    • “@angular/core”: “^2.4.2”
    • “@angular/platform-browser”: “^2.4.2”
    • “@angular/platform-browser-dynamic”: “^2.4.2”
  • core-js 패키지
    • “core-js”: “^2.4.1”
  • zone.js 패키지
    • “zone.js”: “^0.7.4”
  • rxjs 패키지
    • “rxjs”: “^5.0.3”
  • TypeScript 패키지 (트랜스파일하기 위한)
    • “typescript”: “^2.1.4”
  • http-server 패키지 (테스트용 로컬 서버를 띄우기 위한)
    • “http-server”: “^0.9.0”