2012-02-11 4 views
1

Javascript 파일 종속성을 가장 잘 관리하고 100 % 프론트 엔드 애플리케이션 패키징을 수행하는 방법을 파악하려고합니다. 요컨대, 나는 다른 라이브러리와 함께 backbone.js를 사용하여 응용 프로그램을 구축하고 있습니다. 나는 조직 된 코드베이스를 원하고 각 파일 내의 의존성을 선언 할 수 있기를 원한다. 이상적으로 그 선언은 a) 브라우저가 파일을로드하는 순서를 결정합니다 (개발 중에는 파일을 별도로로드해야 함). 패키징 스크립트가 연결을 위해 스크립트를로드하는 순서를 변경합니다. 전체 앱에 대한 단일 파일).Javascript 의존적 인 관리 및 패키징

필자는 requirejs와 commonjs를 읽었지 만 나는 확신하지 못했습니다.

지금 내가 원하는 것을 수행하기 위해 cat <file> <file> <file> <file> > concatenated.file을 사용하는 간단한 셸 스크립트가 있지만 그 파일 목록을 올바른 순서로 최신 상태로 유지하는 것은 쉽지 않습니다. 각 자바 스크립트 파일의 시작 부분에서 종속성을 선언하고 포장기 및 로더가 정보를 사용하여 스크립트를 연결 /로드하는 것이 현명 할 수 있도록하는 것이 훨씬 쉬울 것입니다.

제안 사항?

감사를, 복잡한 프론트 엔드를 들어

루이스

답변

1

은 (AMD) 형식이 최선의 선택이 비동기 모듈 정의입니다 애플 리케이션. AMD (curl.js, RequireJS)를 지원하는 많은 훌륭한 로더가 있습니다.

나는 자바 스크립트 실행 종속 관리에 현대적인 접근 방법에 대해 알아 보려면이 기사를 권 해드립니다 :

Writing Modular JavaScript With AMD, CommonJS & ES Harmony

Why AMD?

가 포장을 위해 몇 가지 구현이있는 계정으로 CommonJS 사양을 가지고 그것은 취향의 문제이다 어떤 경우이든 그 중 일부 사양을 준수하는 도구를 선택하는 것이 좋습니다.

+0

좋아, 이겼어. 저는 AMD, require.js 등을 사용하기 위해 구조적인 변경을했습니다. 추가 할 질문 중 하나는 : r.js를 사용하여 응용 프로그램을 컴파일/uglyfy/etc로 사용할 때 모든 JS를 연결하려고합니다. 하나의 파일로 빌드 설정 파일을 사용할 때, 나는 그 일이 일어나지 않는 것 같습니다. 빌드 디렉토리에는 근본적으로 내 소스 디렉토리와 동일한 구조가 있지만 모든 파일은 불량입니다. 이것은 실행중인 명령입니다 :'node node_modules/requirejs/bin/r.js -o app.build.js' 그리고 이것은 app.build.js의 내용입니다 : https://gist.github.com/ 94b400be04dcd40cd762 – luisgo

2

나는 스스로를 괴롭 히고 있습니다. JavascriptMVC의 일부이지만 Backbone.js와 함께 사용할 이유가 없습니다.

멋진 점은 CSS 및 js를 축소하고 모든 것을 2로 정리하는 등 제작을위한 앱을 빌드한다는 것입니다. 파일 : production.css 및 production.js.

비 JS 파일로드도 처리 할 수 ​​있으므로 steal ('somefile.css')과 같은 작업을 수행 할 수 있습니다. then (function() {...}); 파일의 경우

, 그 다른 언어로 할 것입니다 매우처럼 :

steal(dep1, dep2, dep3).then(function() { 
    // code 
}); 
0

각 자바 스크립트 파일의 시작에서 종속성을 선언 할 수 있어야하고 그것은 훨씬 쉽게 것 가지고 패키저 및 로더는 스크립트를 연결 /로드하기 위해 해당 정보를 사용하는 것에 대해 현명합니다.

나는 몇 달 전 같은 생각이 있고 (옵션 debug 매개 변수를 사용하여 개발 및 배포 버전 사이 distinuish의 필요성 등 포함) 이미 나를 위해 그것을 쉽게 내 Resource Builder에 대한 종속성의 해결에 노력하고 있습니다

.

JsDoc Toolkit (및 관련 작업) (구문이 지원됨) e. 지. Eclipse JSDT에 의해 @requires 태그가 제공되므로이를 사용할 수 있습니다. 그러나 의존성을 해결하는 것은 여전히 ​​쉬운 일이 아닙니다 (ResourceBuilder::resolveDeps()에서 볼 수 있듯이). (궁극적 인 목표는 태그없이, 자동으로 의존성을 해결하기 위해 정적 코드 분석을 사용하는 것입니다.)

이 비동기 로더에 관해서는 단순한

<script type="text/javascript" src="builder?src=dom/css"></script> 

현재

<script type="text/javascript" src="builder?src=object,types,dom,dom/css"></script> 

을 줄일 수 : 비동기 로더의 장점은 속도가 빠르다는 것입니다. 비동기 적재기에 대한 나쁜 점은 - 작동하는 경우; 그들은 모두 비표준 접근법을 기반으로합니다 - 스크립트가 제공하는 기능이 다음 스크립트에서 사용 가능하다는 것을 확신 할 수 없을 정도로 빠릅니다. 따라서 코드를 청취자가 실행해야합니다. 필요할 때만 필요로하는 기능을 응용 프로그램에 실제로 가지고 있지 않으면 피하는 것이 좋습니다.

관련 문제