AngularJs 2 - 디렉토리 구조 재배치

기존에 만들어진 디렉토리 구조를 나중에 배포할 구조로 바꾸어 보자.

grunt 같은 배포툴을 이용할 수도 있겠지만, 일단 만들때부터 가능하다면 서비스 디렉토리 구조와 맞추어 보고, 변경에 필요한 내용을 공부한다는 의미도 가진다.

Project Root
|- app
| |-css
| |-html
| |-js
| |-library
| ＼index.html
|-node_modules
|-ts
|-typings
|-bs-config.json
|-package.json
|-tsconfig.json
＼typings.json

위와 같은 구조로 만들어 본다.

웹 서버에서 동작할 루트디렉토리는 app 으로 생각하고 나중에 배포시에는 그 하위 디렉토리만 복사하면 되도록한다.

코드 작성시에 사용할 서버의 루트를 설정하기 위해 bs-config.json이라는 파일을 새로 생성한다.

{
  "server":{"baseDir":"./app/"}
}

library 디렉토리에는 index.html에서 필요로하는 기본 js 라이브러리들을 복사해 두고 script 태그들의 src값들을 바꾼다.

23번째 줄의 js라는 값이 원래 app이라는 값에서 변경되었다. js디렉토리내의 파일들을 SystemJs로 로딩할때 사용할 규칙이라는 의미이다.

이를 사용해 29번째 줄도 /app/main 에서 /js/main으로 바뀌었다.

ts 파일들은 ts 디렉토리 밑에 작성할 것이고 이는 서비스시 필요한 파일은 아니다. 작성된 ts 파일들의 결과물인 js 파일들이 필요한데 이를 app/js 디렉토리 밑으로 생성하도록 tsconfig.json파일을 변경한다.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir":"app/js/",
    "rootDir":"ts"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

outDir라는 필드가 이 생성된 파일을 저장할 곳을 가리키고, rootDir 라는 필드가 ts 파일들이 있는 곳을 가리킨다. 사실 서비스 시에 map파일들도 필요없으므로 sourceMap파일도 꺼두었다.