이클립스에서 Angular2 프로젝트에 js 파일 안보이게 하기 (but systemjs.config.js 파일은 제외)

일단 이클립스에서 보고싶지 않은 파일 숨기는 방법이다

앵규라2 공식사이트의 예제 (https://angular.io/docs/ts/latest/quickstart.html)를 따라하다가

ts에서 컨버전 된 파일이 js파일은 내가 손댈 필요가 없는 파일임에도 불구하고, 보기힘들게 아래의 왼쪽창과 같이 여기저기 박혀있다.

js 파일등과 같이 산출되는 파일은 특정 폴더에 넣는 방법은 후에 설명하도록 한다.

우선 js 파일 부터 안보이게 해보자.

002-angular-tour-of-heroes 프로젝트에서 오른쪽 클릭 후 Properties 선택

Resource - Resource Filters 선택 후 아래와 같이 설정한다.

한가지 주의사항은

*.js 필터로 Exclude all 을 해버리면 Angular2에서 파일 컨버전시 필요한 systemjs.config.js 까지 안보이게 되므로

^((?!systemjs.config).)*.js$

정규식으로 systemjs.config.js 는 제외시켜 보이게 한다.

상기 정규식에 대한 설명 (출처 : http://nolleh.tistory.com/107)

hero 로 시작하는 문자열 제외	hero가 포함된 문자열 제외
^(?!hero).*$	^((?!hero).)*$

^ : 라인 시작으로부터

?! : 문자열이 일치하지 않고

(.)* : 어떤 문자들이 뒤에 위치할 수도 있음

$ : 라인종료

팁 : Angular2 에서 컴파일시 생성되는 *.'js 또는 *.js.map 파일을 특정디렉토리에 산출 되게 하기

/*

 * outDir 은 TypeScript compiler 가 ts 파일을 컴파일하고 생기는 JavaScript 파일과

 * 이것의 mapping 정보를 담고 있는 map 파일의 경로를 설정해 둔것이다. "./dist" 가 실제 Web Application에서 사용 될 JavaScript와 mapping 정보 파일들을 담음

 * 그리고 rootDir은 TypeScript 소스 파일들의 root 폴더이다.

 * 하나의 TypeScript 파일이 컴파일 되면 JavaScript 와 map 이렇게 두 개의 파일이 만들어진다

 * map 파일은 JavaScript 와 source 파일인 TypeScript 의 mapping 정보를 담고 있는데 이 파일은 실제 Production 에 사용 하지 않아도 되는 파일이다.

 * 실제 필요한 것은 JavaScript 이다. 하지만 위에서  sourceMap 을 true 로 설정하였기 때문에 map 파일이 생성 된것이다.

 * 이것을 false로 설정하면 map 파일이 없이 JavaScript 만 생성된다.

 */