JavaScript 스크립트를 해당 웹 페이지에 바인딩

Question

약 10K 줄의 JavaScript 코드가있는 대형 웹 응용 프로그램에서 작업하고 있습니다 (제 3 자 라이브러리는 고려하지 않음). 페이지로드 속도를 높이기 위해 모든 스크립트 파일을 처음으로 응용 프로그램에 액세스 할 때 클라이언트에서로드되고 캐시 된 대형 스크립트로 자동 연결되도록 결정되었습니다. 이것은 각 페이지가 (필수적으로) 동일한 기능에 필요한 모든 JavaScript를 포함하는 고유 한 스크립트를 가지고 있기 때문에 문제가됩니다.
스크립트에서 오류가 발생하면 각 페이지에 명시적인 script 선언을 사용하는 대신 모든 스크립트가 각 페이지에 추가되는 동일한 스크립트로 롤백되기 때문에 오류의 출처를 알기가 정말 어렵습니다. 전에 해봤 어.
이 문제를 해결하기위한 자바 스크립트 패턴이 있습니까? 웹 응용 프로그램 페이지의 특정 컨테이너에 바인딩 할 수있는 AngularJS 모듈과 비슷한 것을 생각하고 있습니다.
그러나 간단하고 맞춤화 된 솔루션을 원합니다. 시간이 부족하고 애플리케이션에 프레임 워크를 구현할 시간이 없습니다. 특정 스크립트 (모듈)는 해당 페이지에만 적용해야하며 개발자는 특정 스크립트가 의존하는 다른 스크립트 (모듈)를 명시 적으로 선언 할 수 있어야합니다.
예외 처리 시스템을 구현하여 어떤 모듈에서 예외가 발생했는지 (예 : Firebug 콘솔에서) 페이지의 모듈이 다른 모듈에 의존하는 경우이를 알릴 수 있습니다. (프레임 워크에 의존하지 않고) JavaScript에서 이러한 문제를 해결하는 일반적인 방법이 있습니까?

Answer 1

문제의 가능한 해결책은 js 소스 맵을 사용하는 것입니다. 많은 concat/minify/uglify 도구가이 기능을 직접 지원하지만 대부분의 최신 브라우저는이를 해석 할 수 있습니다.

당신은 여전히 ​​(이 코드의 이러한 많은 양을 처리하는 가장 좋은 생각이 가장 가능성이없는 경우에도 - 주로 전체 아키텍처에 따라) 모든 코드를 포함하는 하나의 JS 파일 봉사 할 것입니다

을하지만 당신의 브라우저 개발자 도구는 이제 오류/콘솔 출력/etc의 원래 파일 이름과 행 번호를 표시 할 수 있습니다.

프로덕션 환경에서 소스 맵 파일을 제공하지 못할 수 있습니다.

js 소스 맵에 들어가는 좋은 점은 this wiki입니다.