티스토리 뷰
발생일: 2013.04.02
문제:
Require.js 에는 AMD를 지원하지 않는 다른 라이브러리나 객체를 모듈로 정의하는 옵션이 있다.
문제:
Require.js 에는 AMD를 지원하지 않는 다른 라이브러리나 객체를 모듈로 정의하는 옵션이 있다.
바로 shim 옵션이고, 해당 가이드 문서를 아래 링크에서 찾았었다.
난 처음 사용할 때 가이드를 보고도 한참 이해가 되지 않았었다.
설정을 하고도 자꾸 모듈을 찾지 못한다는 오류가 나서 한참을 삽질했던 기억이 있다.
예전 메모를 정리하다가 혹시 도움이 될까 남겨둔다.
해결책:
사실 위 가이드는 2.0으로 버전업하면서 만들어진 가이드라 현재 버전 가이드랑 약간 다르다.
최신 가이드는 아래 링크에서 찾아볼 수 있다.
아무튼, shim 설정을 사용해 jquery를 AMD 모듈로 포함하는 예제를 보자.
require.config({
shim: {
'jquery': { // (A)
exports: '$' // (B)
}
}
});
위 설정은,
(A) 모듈의 이름을 'jquery'라 하고,
(B) 해당 모듈의 리턴값을 글로벌의 '$' 변수에 할당된 값이라 한다.
라는 의미이다.
간단하게, 아래 코드를 정의하는 설정이라고 생각하면 되겠다.
define('jquery', function () {
return window['$'];
return window['$'];
});
(난 처음에 저 exports 개념에서 되게 헷갈렸었다 -_-)
혹시, jquery를 이미 로드한 상태라 하더라도,
위 설정이 jquery 모듈을 찾을 수 없다는 오류를 발생할 수도 있다.
이는, shim 설정 아래의 'jquery'가,
baseUrl 경로 바로 아래에 있는 `jquery.js` 파일을 찾아 로드하려 하기 때문이다.
baseUrl 경로 아래에 jquery가 존재하지 않는다면, 별도로 paths를 설정해줘야 하고,
혹시 스크립트 태그로 jquery를 미리 로드하고 있었다면 중복 로드될 테니 제외하기를 권장한다.
baseUrl과 paths 설정을 포함한 아래 코드를 보면 좀 더 이해하기 쉬울 것이다.
require.config({
baseUrl: '/js', // /js 경로가 모듈을 불러오는 루트 경로이다.
paths: {
'jquery': 'lib/jquery' // `/js/lib/jquery.js` 파일을 `jquery` 라는 이름으로 설정한다
},
shim: {
'jquery': { // 'jquery'라는 이름의 모듈을 정의하고,
exports: '$' // 글로벌 변수인 $를 리턴하도록 한다.
}
}
});
backbone 이나 jquery 플러그인 같은 다른 모듈도 함께 사용한다고 가정하고
예제를 작성해보면 아래와 같다.
require.config({
baseUrl: '/js/lib', // 이번엔 라이브러리 폴더가 모듈의 루트 경로라고 해보자.
shim: {
'backbone': { // `/js/lib/backbone.js`를 로드해 모듈을 정의하고 `window.backbone`을 리턴한다.
exports: 'backbone'
},
'jquery': {
exports: '$'
},
'underscore': {
exports: '_'
},
'jquery-scroll': [ 'jquery' ]
// `/js/lib/jquery-scoll.js` 파일을 로드한다. `jquery` 모듈에 의존한다.
}
});
shim 에서 설정하는 키 값이 모듈의 이름이라는 것과,
exports 는 그 모듈이 리턴하는 값이라는 것만 기억하면 이해하기 쉬울 것이다.
반응형
댓글
공지사항