[JavaScript] Babel

🤔 Babel??

바벨 = 자바스크립트 컴파일러 (바벨 공홈에 그렇게 써있다!)

ES6+ 이상의 최신 ECMAScript문법을 이전 문법(~ES5)으로 변환

 

🤔 그래서 그걸 왜 쓰는데?

우리의 영원한 친구(^^) IE와... IE 말고도 최신 문법을 지원하지않는 브라우저가 있을 수 있기 때문에!

모든 실행환경에서 js가 돌아가도록 하는 느낌이다.

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

 

😎 바벨을 써보자

yarn add -D @babel/core @babel/cli \
              @babel/register @babel/preset-env \
              @babel/preset-foo @babel/plugin-bar
              @babel/why-should-i-install-this
              # ...

설치할게 너무 많다고 생각했었는데, 굉장히 정리를 잘 해두신 블로그를 발견해서 참고해서 정리하기로 했다.

 

 

• @babel/core : 요리사. 재료랑 레시피가 있으면 요리를 할 수 있다.
• @babel/cli : 조리 도구
  ──────────── 기본적인 바벨의 기능을 사용하려면 여기까지만 설치해도 됨
• 플러그인 : 재료 손질 또는 요리 방법이 정리된 레시피.
• 프리셋 : 여러 레시피를 모아둔 요리책. 최근에 가장 인기있는 프리셋은 @babel/preset-env 라고 한다.
  @babel/preset-env 는 ES6이상 문법을 ES5 코드로 변환해주는 모든 규칙을 정의하고 있다.

 

$ npx babel test.js --presets=@babel/env

그래서 그걸 적용하려면 터미널에 이렇게 env라는 preset을 쓸거라고 알려...........줄 수 도 있지만!

매 번 터미널에 이렇게 입력하는건 매우 귀찮은 짓이므로 설정파일을 만든다.

 

프로젝트 최상위 디렉토리에 .babelrc 파일을 생성 후, 아래와 같이 추가한다.

// .babelrc
{
  "presets": ["@babel/env"]
}

그러면 그냥 아래와 같이 실행해도 preset이 적용된다.

$ npx babel test.js

 

 

그리고 특정 브라우저 버전 이상을 지원해야 할 경우, 바벨 설정파일에서 targets 속성 값을 지정하면 된다.

// babel.config.json
module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          chrome: '79', // 크롬79까지 지원
          ie: '11' // ie11까지 지원
        }
      }
    ]
  ]
}

 

바벨 설정파일은 .babelrc, babel.config.js, babel.config.json을 주로 쓴다.

• .babelrc : 주로 하위 디렉토리나 파일에서 특정 플러그인이나 변환을 실행할 때 적절
• babel.config.js : 여러 패키지 디렉토리를 가진 프로젝트에서 규칙을 설정할 때 적절
• babel.config.json : config.js를 사용하면 구성하는 api가 노출될 수 있으므로 config.json을 사용하는 것이 더 좋을 듯.

 

👀 참고

https://tecoble.techcourse.co.kr/post/2021-07-07-babel/

Babel

 

https://imch.dev/posts/babel-practice/

Babel 기초 다지기

 

https://devowen.com/293

Babel이란 무엇인가?