MomentJS 와 RequireJS 사용하기

MomentJS 와 RequireJS 사용하기

  • 2018-08-07

MomentJS 와 RequireJS 호환성 개선

최근 진행하는 프로젝트에서 RequireJS와 daterangepicker 라이브러리를 함께 써야하는 상황이 생겼는데, 생각치도 못한 에러가 생겼다. 여러가지 자료를 찾아본 결과 moment 라이브러리가 버전이 올라가며 생긴 이슈 중 하나였다. 일단 개발 환경은 다음과 같다.

  • requireJS 2.3.5
  • moment 2.22.2
  • jquery daterangepicker 0.6.0-beta.1

여기에서 daterangepicker 라이브러리의 의존성이 jquery 1.8.3+, jquery UI 1.9.0+, momentjs 2.3.0+ 인데, 이 중 moment 객체를 참조하지 못해서 생기는 이슈였다.

1
// Uncaught ReferenceError: moment is not defined

이러한 이슈는 moment 라이브러리의 github 에도 등록되어 있는 이슈 였다.(이슈 바로가기) 내용인즉, 모듈 시스템이 감지되면 moment library 가 더 이상 해당 객체를 global 하게 생성해주지 않는다는 것이다. 예를 들어, 일반 view 에서 해당 스크립트를 모드하면, moment 는 전역적으로 사용 가능하다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
 
    <title>제목</title>
    <script src="/js/library/moment.min.js"></script>
    <script>
        console.log(moment); // moment 객체가 감지된다.
    </script>
</head>
</html>

하지만 이상하게 requireJS 에 호출할 때는 moment 객체를 감지를 못하는 증상이 있다.

이러한 해결 방안을 찾다가 고맙게도 moment library 의 메인 contributor 가 requireJS 라이브러리 쪽에 문의를 남겨 다음과 같은 해결 방법을 제시해주었다. (해결방안 원문 보러가기)

1
2
3
4
5
6
7
8
define('moment-adapter', ['moment', 'moment/calculatedLocale'], function(moment) {
    moment.locale('de');
 
    // Set the global.
    window.moment = moment;
 
    return moment;
});

여기에 관련된 호환성 테스트는 아래의 링크를 클릭하면 볼 수 있다.

https://github.com/MartinYounghoonKim/requirejs-moment-compatibility-env

현재 이커머스회사에서 frontend 개발자로 업무를 진행하고 있는 Martin 입니다. 글을 읽으시고 궁금한 점은 댓글 혹은 메일(hoons0131@gmail.com)로 연락해주시면 빠른 회신 드리도록 하겠습니다. 이 외에도 네트워킹에 대해서는 언제나 환영입니다.：Martin（https://github.com/martinYounghoonKim）
VueJS 프로젝트 에러 트래깅하기
Reflow 와 Repaint