[javascript] ES6 ie 호환

ES6 문법으로 스크립트를 짠 .js 파일은 ie에서 작동이 되지 않는다.

 

이때는 Babel의 힘을 빌려서 호환 작업을 해주어야한다.

 

(해당 작업은 윈도우 운영체제 환경에서 git Bash를 사용하였습니다.)

 

1. node 로컬 설치 여부 확인

node -v

1-1. 설치가 되어있지 않다면, 아래 링크를 따라 안정적인 버전으로 설치

https://nodejs.org/ko/

Node.js

2. npm 로컬 설치 여부 확인 (npm은 node.js 를 설치할때 자동으로 함께 설치된다.)

npm -v

3. Babel 설치

Babel은 특정 버전의 script 코드를 하위 버전으로 변환해주는 트랜스파일러이다.

npm install --save-dev babel-cli

또는

npm install -g babel-cli

babel-cli는 트랜스파일을 진행해주는 코어 기능만 있고 확장된 플러그인들이 필요하다.

따라서 아래 명령어로 추가 플러그인 설치

화살표 함수도 es6 미만의 버전으로 호환되게 설치

Promise, Map, Set, Object.assign, Array.find 등 메서드를 ie 하위브라우저에서도 인식할 수 있게 polyfill 설치 

npm install --save-dev babel-preset-env

npm install babel-plugin-transform-es2015-arrow-functions

npm install babel-polyfill

4. 프로젝트 바로 하위 위치에 .babelrc 파일 추가 생성후 아래와 같이 코딩

{
    "plugins": ["transform-es2015-arrow-functions"],
    "presets": [
        ["env", {
          "targets": {
            "browsers": ["last 2 versions", "not ie <= 10"]
          }
        }]
      ]
}

여기서 "browsers": ["last 2 versions", "not ie <= 10"] 란 익스 10이상부터 지원하게 버전 옵션을 준다는 뜻이다.

 

5. Babel 명령으로 ES6 문법 스크립트를 하위 문법 스크립트로 변환하기

npx babel ./js/index.js --out-file ./js/index_es5.js --presets=es2015

여기서 "./js/index.js 는 ES6 문법 스크립트 파일 경로 및 이름

./js/index_es5.js --presets=es2015 는 해당 ES6 문법 스크립트 파일은 프리셋을 통해 es5 문법으로 ./js/index_es5.js 이란 경로와 이름으로 저장한다." 라는 뜻이다.

 

입력후 해당 경로에 es5문법 스크립트 파일이 저장되었음을 알수 있고, 이를 크로스브라우징(ie호환)을 위해서 index.js 파일이 아닌 index_es5.js 를 연결해주면 된다.

 

하지만 현재 방법으로는 매번 수정이 일어날때마다 해당 es5 파일을 삭제하고, 다시 babel 명령으로 만들어줘야 하므로 추가적인 공부가 필요하다.

 

참고 사이트

• https://perfectacle.github.io/2016/11/11/Babel-ES6-with-IE8/
• https://meetup.toast.com/posts/157

요즘 잘나가는 프론트엔드 개발환경 만들기(2018): ES6 : NHN Cloud Meetup

(Babel) ES6를 IE8에서도 써보자

요즘 잘나가는 프론트엔드 개발환경 만들기(2018): ES6 : NHN Cloud Meetup

• https://blog.outsider.ne.kr/1176 

Babel로 ECMAScript 2015 사용하기 :: Outsider's Dev Story

• https://okchangwon.tistory.com/3

Babel Polyfill 적용하는 방법들