babel

일관적인 방식으로 코딩하면서, 다양한 브라우저에서 돌아가는 어플리케이션을 만들기 위한 도구

• 바벨탑과 마찬가지로 브라우저마다 사용하는 언어(js 버전)가 달라서 프론트엔드 코드는 일관적이지 못할 때가 많다.
• 크로스브라우징 이슈는 코드의 일관성을 해치고 초심자를 불안하게 만든다. 히브리어로 바벨이 '혼돈'이란 뜻인것처럼
• 크로스 브라우징의 혼란을 해결해 줄 수 있는 것이 babel
• ECMAScrip2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다.
• TS, JSX처럼 다른 언어로 분류되는 것도 포함
• 이렇게 변화하는 것을 "트랜스파일" 한다라고 표현한다.
  • 추상화 수준을 유지한 상태로 코드를 변환
  • ex:) TS => JS, JSX => JS처럼 트랜스파일 후에도 여전히 코드를 읽을 수 있다.

바벨탑
창세기 11장에 등장하는 건축물. 인간들이 천국에 닿으려고 계속 쌓았는데, 그 오만함에 분노한 야훼가 모든 인간의 말을 제각각으로 만들고 사람들을 온 땅으로 흩어 버리는 바람에 공사가 중단되어 버렸다고 한다
...
창세기에는 이로 인해 탑에는 혼돈을 의미하는 바벨(Babel)이라는 이름이 붙었다

cross browsing?

• 웹 페이지 제작에 모든 브라우저에서 깨지지 않고 의도한대로 올바르게(호환성) 나오게 하는 작업을 의미
• 브라우저 마다 렌더링 엔진이 다르기때문에 발생하는 이슈

렌더링 엔진

• 웹 브라우저 엔진 or 레이아웃 엔진 이라고도 불린다.
• 페이지를 렌더링할 때 실질적으로 작업을 하게 되는 엔진
• html, css, js를 해석하여 화면을 출력한다.

바벨의 기본 동작

• 바벨은 ECMAScript2015 이상의 코드를 적당한 하위 버전으로 바꾸는 것이 주된 역할
• 최신 자바스크립트 코드를 이해하지 못하는 환경에서 잘 동작하게 만듬

설치

// 바벨, 바벨 커맨드라인 도구
$ npm install -D @babel/core @babel/cli 

// 설치 완료후 node_module/.bin 폴더에 추가된 바벨 명령어 사용 가능
$ npx babel app.js 

바벨 빌드 단계

• 바벨은 세 단계로 빌드를 진행한다.

1. 파싱(parsing)

• 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계

2. 변환(Transforming)

• 추상 구문 트리를 변경
• 실제로 코드를 변경하는 작업을 한다.

3. 출력(Printing)

• 변경된 결과물을 출력 후 작업 완료

플러그인

• 바벨은 파싱과 출력만 담당하고 변환 작업은 플러그인이 처리한다.

커스텀 플러그인

• 커스텀 플러그인은 visitor 객체를 가지고 있는 객체를 반환해주어야 한다.

module.exports = function myBabelPlugin() {
  return {
    visitor: {
      Identifier(path) {
// Identifier() 메소드로 들어온 인자 path에 접근하면 코드 조각에 접근할 수 있다
        const name = path.node.name;

        // 바벨이 만든 AST 노드를 출력
        console.log('Identifier() name: ', name);

        // 변환 작업: 코드 문자열을 역순으로 변환
        path.node.name = name
          .split("")
          .reverse()
          .join("")
      }
    },
  };
}

바벨로 플러그인 실행

• --plugin 옵션으로 플러그인 지정후 실행

$ npx babel app.js --plugins ./my-babel-plugin.js

block-scoping 플러그인

@babel/plugin-transform-block-scoping

• 블록 스코프(const, let)를 함수 스코프인(var)로 변경

설치

$ npm install -D @babel/plugin-transform-block-scoping

arrow-functions 플러그인

@babel/plugin-transform-arrow-functions

• 에로우 함수를 일반 함수로 변경

설치

$ npm install -D @babel/plugin-transform-arrow-functions

strict-mode 플러그인

@babel/plugin-transform-strict-mode

• 엄격 모드('use strict') 구문 추가

설치

$ npm install -D @babel/plugin-transform-strict-mode

babel.config.js

• 매번 커맨드라인 명령어로 설정하는 것은 불편하기 때문에 기본 설정파일을 지정해서 사용
• Node.js에서 돌아가는 것이기 때문에 CommonJs 모듈 방식을 사용
• 바벨은 기본적으로 이 설정파일을 읽어서 플러그인을 적용하고 변환 후에 결과물을 출력한다.

module.exports = {
  plugins: [
    "@babel/plugin-transform-block-scoping",
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-strict-mode"
  ]
}

실행

• 따로 --plugins 옵션을 사용하지 않아도 된다.

npx babel app.js