Babel이란?

아래 두가지에 대한 개념 정리.

• 크로스 브라우징(Cross Browsing)
• 바벨(Babel)

  1. 크로스 브라우징(Cross Browsing)

• 사용자 환경의 영향을 최소로 하고, 웹 서비스를 사용할 수 있도록 최적화하는 작업이다.(즉, 모든 브라우저에서 의도한대로 올바르게 나오도록 하는 작업(호환성))
  --> 크로스 브라우징을 위한 것이 바로 Babel이라는 툴!

 

  2. Babel: 크로스 브라우징 이슈를 해결하기 위한 툴

• ES6+ 버전의 자바스크립트, 타입스크립트 등의 다른 언어들도 모든 브라우저에서 동작 가능하도록 호환성을 지켜줌.
• 바벨을 통해서 ES6+ 버전의 자바스크립트 코드는 하위버전으로 변환되고, 그로 인하여 IE나 다른 브라우저에서 동작할 수 있도록 함.

 

 

  3. 바벨의 빌드 단계

    3-1. 파싱(parsing): 코드를 읽고 추상구문트리(AST)로 변환

    3-2. 변환(Transforming): 추상 구문 트리를 변경

    3-3. 출력(Printing): 변경된 결과물을 출력

    ===>  ★ 바벨은 파싱과 출력을 담당.

    ===>  ★ 변환은 플러그인이 담당. (바벨 플러그인: 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙)

 

 

  4. 바벨의 사용

• 바벨의 직접적인 사용보다는 webpack으로 통합해서 자주 사용.
• webpack을 설정할때 loader는 'babel-loader'주로 사용. 
  (--> webpack과 관련한 정리글에서 자세히 설명.)
  https://lsj31404.tistory.com/22

 

 

 

 

 

 

 

정리한 내용이 담긴 사이트(출처)

https://devowen.com/293