babel을 이용한 자바스크립트 브라우저호환성 해결 cs

오래된 (<10) IE는 브라우저호환성 문제에서 천덕꾸러기다. 

const 나 let 같은거 쓰면 여지없이 망가진다. 오래된 표준을 사용하기 때문이다. MS가 패치를 하지 못하고 엣지나 그다음 아이를 내놔서 문제를 해결하려고 하는 걸 보면 어쩔수가 없는 모양인 것 같은데, 특히 한국은 여전히 오래된 IE를 쓰는 사람이 무시 못할 정도로 많아서 문제다. 

요즘 웹기반의 상호작용기능을 가진 oTree 기반 설문모듈을 만들다 보니 javascript 를 피할 수가 없는데, 보통 호환성 테스트를 하면 다른 곳은 다 괜찮지만 IE에서 막힌다. 이 문제를 해결하려면 요즘의 js 코드를 옛날의 (es2015) js 코드로 변환해줘야 한다. 그게 babel이라는 아이다. 

그리고 지금 쓸 내용은 미래에 또 IE때문에 당황할 나를 위해 현재의 내가 쓰는 편지같은 거다. 사실은 2019년 4월의 내가 2020년 6월의 나에게 아무런 편지도 쓰지 않아 2019년 4월에 했던 삽질을 2020년 6월에 또 했기 때문에 쓰는 글이기도 하다.


1. 불러 써야 할 js 함수나 클래스들을 모두 .js 파일로 한 폴더에 몰아넣는다. 그 폴더를 src 라고 부르자. oTree의 경우 _static 아래에 두면 좋다. 

2. babel 설치. 위치는 src 폴더의 부모 디렉토리가 적당. 설치하면 node_modules 폴더가 생김. 

$npm install --save-dev @babel/core @babel/cli @babel/preset-env

3. src 폴더의 모든 js 파일을 IE호환성에 맞게 굴리려면 이렇게 쓴다. 

$./node_modules/.bin/babel src --out-dir lib

4. lib 아래에 구식방식으로 변환된 js 파일들이 있으니 script 태그 호출할 때 lib 쪽에서 호출하도록 수정한다. 

<script src="{% static 'global/lib/extended_survey_kberi.js' %}"></script>




미래의 나에게: 이걸로 삽질을 덜 하게 되었다면 부디 댓글을 달아다오.

덧글

댓글 입력 영역



twitter

Twitter

MathJax