2014-02-11 2 views
22

웹 응용 프로그램을위한 2 단계 컴파일 프로세스가 있습니다. 먼저 CoffeeScript 파일을 JavaScript 파일로 컴파일합니다 (1). 그런 다음 JavaScript 스크립트 파일 (CoffeeScript의 파일과 AngularJS 템플릿에서 생성 한 파일 (grunt-angular-templates))은 Google Closure Compiler [2]에 의해 하나의 최소화 된 파일로 컴파일됩니다.두 컴파일 단계의 소스 맵 결합

CoffeeScript ---[1]---> JavaScript --[2]--\ 
              \-> 
AngularJS templates --> JavaScript ----------> single minimized JS file 
              /-> 
        other JS files -------/ 

[1]과 [2] 모두 소스 맵을 생성합니다.

최소 원본 JS 파일을 실행하는 웹 브라우저에서 CoffeeScript 파일을 디버깅 할 수있는 단일 원본 맵에 이러한 원본 맵을 결합 할 수 있습니까? 환언

는 :

g(position in JavaScript) = position in minimized JS 

I : [2]의 함수에 의해 표현된다

f(position in CoffeeScript) = position in JavaScript 

소스 맵 : 소스 맵 [1]의 함수에 의해 표현된다 생각한 함수 구성에 의해 표현되는 소스 맵을 얻고 싶습니다.

h(position in CoffeeScript) = g(f(position in CoffeeScript)) = 
          = position in minimized JS 

답변

3

소스 맵 사양 (및 기타 토론은), 멀티 레벨 매핑은 아직

https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit?pli=1#heading=h.e8hx254xu4sa

소스지도 개정판 3 정의되지 않은; 다중 레벨 매핑 노트

누군가가 Github 저장소에서이 문제를 해결할 수있는 도구를 개발했을 수도 있습니다. 물론 그러한 맵을 생성하는 도구와이를 사용할 수있는 브라우저가 있습니다.

https://hacks.mozilla.org/2013/05/compiling-to-javascript-and-debugging-with-source-maps/ https://github.com/fitzgen/source-map

+0

글쎄, 내 경우에는 중간 파일에 대해서는별로 신경 쓰지 않는다. 단지 부산물 일 뿐이다. 어쨌든이 아이디어는 소스 맵의 현재 구현으로 기술적으로 실현 가능하다. 이 작업을 정확하게 수행하는 도구는 없습니다. 고맙습니다. – liori

+0

"Grunt"는 최소한 "uglify"를 통해 하나의 컴파일 된 'Coffeescript'를 전달하는 경우 2 단계 맵을 처리 할 수 ​​있습니다. - https://github.com/gruntjs/grunt-contrib-uglify – hpaulj

+1

사이드 바에서 : http://stackoverflow.com/questions/15964826 – hpaulj

15

sorcery 시도 - 그것은 바로이 목적 (내가 여기 관련 도구에 대한 정보를 찾고 온, 저자 해요)을 위해 설계되었습니다. .map 파일이 올바른 위치에 있고 (또는 데이터 URI로 인라인 된) 생성 된 파일에 sorcery을 실행하기 만하면 중간 소스 맵을 찾고 작성합니다.

+0

Hello Rich, could 당신은 꿀꺽 꿀꺽 거리는 것과 같이 당신의 도구를 사용하는 방법을 몇 가지 예를 들어 주시겠습니까? github에 대한 문서에서 그 방법을 분명히 알 수 없기 때문입니다. 미리 감사드립니다. – VladosJS

2

폐쇄 컴파일러가 이제 --apply_input_source_maps (및 부팅시 --parse_inline_source_maps)을 구현합니다. 여기서는 달성하려는 작업을 정확하게 수행해야하며, 추가 툴링은 필요하지 않습니다.

+1

두 단계의 코드 변환 만있는 경우에만 추가 도구가 필요하지 않습니다. – liori

+0

@liori 예,이 질문에 설명 된 설정에 필요한 툴링이 필요 없습니다. 그러나 일반적으로 모든 도구가 모든 소스 맵을 인라인으로 유지하고 모든 도구가 인라인 원본 맵을 읽는 것을 지원하는 한 (일반적으로 알 수는 없지만 합리적인 목표처럼 보입니다.)이 모든 것이 작동해야합니다 (tm). –

-1

combine-source-map 패키지의 경우 Mozilla [source-map] 래퍼는 Rich Harris had recommended (2M vs. 32k 다운로드)과 같이 [sorcery]에 대한 대중적인 대안으로 보입니다. 제품 페이지에 자신의 설명으로

, 결합 소스 맵을 것 : 여러 파일의

추가 소스지도는이를 상쇄하고 하나의 소스지도로 결합.

병합 소스 -지도을 평가 한 후 그것은 단지 소스 맵에서 파일 시스템 기반의 소스를 처리하더라도, 유망 보인다.인라인 소스를 사용할 때 충돌이 발생합니다 (클로저 컴파일러의 원래 코드의 한계 일 수 있음). 몇 가지 변경 사항을 통해 인라인 소스를 적절히 처리 할 수 ​​있습니다.