[JavaScript] Babel - 자바스크립트 컴파일러 사용법

스튜디오 밀님의 강좌를 토대로 정리한 글입니다. 

 

 

1. Babel 이란 ?

 자바스크립트는 계속해서 발전해 나가고 있는 대표적인 언어로써, 신버전의 문법(ES6)이 

나온지 꽤 됐지만, 개발자들의 적 '인터넷익스플로어' 같은 구버전의 OS들에는 적용이 잘 되지않아,

서비스를 배포할때에는 구버전의 문법으로 배포해주어야 하는데, 그때 사용하는 것이 바벨이다. 

 

2. Babel 사용법

 1) Node JS 설치 

 2) npm 프로젝트 초기화 

     프로젝트 폴더에서,

     npm init -y

3) babel-cli (바벨씨엘아이)_바벨을 터미널창에서 사용할수 있도록해주는_ 설치

    npm install --save-dev babel-cli

    -g 옵션으로 글로벌로 설치하거나, 각 프로젝트마다 다른 babel 버전을 사용하는 경우 --save-dev 옵션으로.

 4) npm script_간편하게 바벨을 실행_ 로 자동화

   package.json 파일을 수정

   "scripts": { "build": "babel ./public/src -d ./public/lib -w" },

   : publick/src 폴더에 있는 babel을 사용해서 public/lib에 자동으로 생성해주세요 라는 뜻

   실행은 아래와 같이.

    npm run build

    ./public/src 경로에 있는 원본 코드를 변환해서 ./public/lib 안에 생성.

    이 상태에서 그냥 npm run build를 실행하면, 바벨은 그냥 src 안의 파일과 같은 파일을 lib에 생성한다. 변환 작업을      위해서는 변환 옵션을 설정해야 하는데, 그 때 사용하는 파일이 아래의 .babelrc

  5) .babelrc 파일로 설정

    .babelrc를 생성하고 아래의 기본 구성 내용을 입력. 플러그인을 사용하지 않는다면 plugins는 생략해도 무방.

    { "presets": [], "plugins": [] }

    우리는 ECMA 2015 preset을 사용하기 위해 해당 preset을 설치

    npm install --save-dev babel-preset-es2015

    그리고 .babelrc 파일에 우리가 사용할 프리셋(설치한 프리셋)을 추가

    { "presets": ["es2015"] }

    여기까지 하면 기본적으로 잘 동작한다.

  6) minify

    lib에 압축된 버전의 파일을 생성하기 위해 minify 패키지를 설치.

    npm install --save-dev babel-preset-minify

    .babelrc 파일에도 추가

    { "presets": ["es2015", "minify"] }

    npm run build 수행 시 "Couldn't find intersection" 에러가 날 경우, .babelrc 파일을 아래와 같이 바꾸어 주자.

    { "presets": [ "es2015", ["minify", {builtIns: false, evaluate: false, mangle: false}] ] }

 

3. 후기 

 저는 인프런의 '애플클론인터렉티브웹'을 만들기 위해 강좌를 들었는데,

윈도우에서 비쥬얼스튜디오 터미널로 실행했는데 성공했습니다. 

파이썬 장고 웹개발은 맥북이 확실히 편하지만, javascript는 비쥬얼스튜디오코드

터미널로도 무리가 없이 npm등을 실행시킬 수 있습니다. 

 

얼른 애플클론웹사이트 실습하고, 제가 만들어보고싶은 웹에 적용하고싶네요.