Requirejs - 다른 모듈을 통해 같은 의존성을 공유하기

Question

이 프로젝트를 발판 상상 :

• utils.js
• 모듈 1/controllers.js
• 모듈 1/services.js
• 모듈 2/controllers.js을
• 모듈 2/services.js

utils.js

define([], function(){ /* My utils functions */ }); 

모듈 1/controllers.js

define(['../utils'], function(utils){ /* Module1 stuff */ }); 

utils.js은 한 번만 다운로드하기 때문이 아닌 최적화 맥락에서 아주 잘 작동

define(['../utils'], function(utils){ /* Module2 stuff */ }); 

모듈 2/controllers.js 모듈 1 또는 모듈 2에 관계없이 그러나 JS 파일에서 각 모듈을 최적화하고 패키지화해야합니다.

이를 얻기 위하여, 나는 예를 들어, 각 모듈에 main.js 파일을 추가 :

모듈 1/main.js 내가 최적화 도구를 사용하여 연주를 시작할 이제

define(['./controllers', './services.js'], function(){}); 

이 내 응용 프로그램입니다 .build.js

좋아, 나는 두 가지 모듈에 utils.js 코드가 포함되어 있습니다. 로드 순서를 보장 할 수 없기 때문에이 동작이 적절합니다.

그래서,이 제 질문은 다음과 같습니다

1. 이에 대한 모든 스마트 솔루션을 존재 하는가?
2. 이 코드를 건너 뛸 수 없으면 아무도 requirejs가 어떻게 작동하는지 알 수 있습니까? 이 전략이 어떤 종류의 문제를 일으킬 수 있습니까?

Answer 1

마지막으로 나는 빌드 스크립트의 옵션을 제외 사용하여 대답을 얻었다 ". 이 방법을 사용하면 이러한 종류의 "전역"종속성을 수동으로 작성해야하지만 작동합니다.

Answer 2

최적화 도구로 '재생'하는 방법을 잘 모르겠지만 기본 라이브러리 (내 백본 확장 모두 포함)와 뷰 또는 2 개가있는 경우 처리 방법은 다음과 같습니다.

자료 라이브러리 : 페이지 x에 대한 'base.js'

define([ 
'foo', 
'bar', 
'baz' 
]); 

코드 같은 :하자 'x.js'

define([ 
    'foo', 
    'bar' 
], function() { 

}); 

설정에 'libraryBuild.js을 가정 해 봅시다 '파일과'build.js '파일을 적절히 수정해야합니다. 두 파일의 차이점은 build.js에 있습니다.'base.js '에 정의 된 모든 파일을'empty '로 설정합니다.

libraryBuild.js

({ 
    baseUrl: ".", 
    name: "base", 
    out: "base-built.js" 
}) 

빌드.JS

({ 
    baseUrl: ".", 
    paths: { 
     foo: "empty:", 
     bar: "empty:", 
     baz: "empty:" 
    } 
}) 

이제 (I 글로벌 패키지와 NPM을 통해 설치 requirejs, 그래서 난 그냥 r.js를 호출 할 수 있습니다 - 그렇지 않으면 node ../path/to/r.js 일 것)를 두 번 최적화를 실행합니다.

r.js -o libraryBuild.js

r.js -o build.js name=x out=x-optimized.js (대신 대신 개별 파일의 전체 프로젝트에 이것을 적용 할 수 있습니다 ..하지만이 순간을 위해 더 좋은 예입니다) 당신이주의해야

은 " x-optimized.js "파일에는 base-built.js에 설정된 코드가 포함되어 있지 않습니다.

그래서 나는 확신 다음

<script> 
require.config({ 
    paths: { 
     base: "base-built" 
    } 
}); 
require(['base'], function() { 
    require(['x'], function (x) { 
     //The stuff you'd normally do when X is included 
    }) 
}); 
</script> 

... 페이지에이 일을 더 나은 방법이있다, 그러나 이것은 적어도 작업을 수행하고 파일이 아래로 크기를 유지합니다.

... 
modules:[ 
    { name: 'utils' }, 
    { name: 'module1/main', exclude: ['utils'] } 
    { name: 'module2/main', exclude: ['utils'] } 
] 
... 

나는 utils를위한 분리 된 모듈을 만들고 옵션을 사용하여 다른 모듈의 코드를 포함하지 않도록이 방법 "제외 :