바벨

 

 

bable

: 자바스크립트 컴파일러

@babel/preset

 

쉽게 얘기하자면 es6에서 es5로 바꾸어주는 컴파일러

 

다양한 브라우저에서 서비스를 제공해야하기 때문에 주로 es5 버전으로 컴파일해서 배포함

 

 

 

바벨 동작 단계

 

• 파싱 (parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
• 변환 (Transsforming) : 추상 구문 트리를 변경하는 단계
• 출력 (Printing) : 변경된 결과물을 출력하는 단계

 

✅ 추상 구문 트리(AST)

프로그램 내에서 발생하는 기능을 나타내기 위해 만들어진 구문 구조

 

 

 

바벨은 자바스크립트 코드를 받아서 AST를 만들고

그걸로 새로운 자바스크립트 코드를 출력함

 

 

바벨 플러그인(어떻게 변환할지에 대한 규칙)들을 목적에 따라 묶어놓은 세트를 프리셋(preset)이라고 함

 

ex)

module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}

 

 

 

캣보우 당시 사용한 것

 

 

'@babel/core'

'@babel/cli '

'@babel/preset-env'

'@babel/preset-react'

 

 

 

'@babel/core'

• 바벨을 사용하기 위한 필수 패키지

 

'@babel/cli'

• 명령줄에서 바벨을 사용하기 위한 패키지

 

 

'@babel/preset-react'

• JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있다.
• 리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합

 

'@babel/preset-env'

 

• es6문법을 변환하기 위해 사용
• 모든 es6 plugin을 설치, 때문에 무겁다는 단점이 있음

 

 

때문에 플러그인을 따로 설치하기도 함

 

@babel/plugin-transform-arrow-functions

👆 es6 화살표 함수 관련 플러그인

 

 

 

---

 

npm 설정

npm init 만 할 시 다 지정해줘야함

-y 로 기본값으로 설정

 

npm init -y

 

설치

'@babel/core'

'@babel/cli '

'@babel/preset-env'

'@babel/preset-react'

 

 

 

babel.config.js

 

const presets = ['@babel/preset-react','@babel/preset-env'];

module.exports = {presets};

 

"npx babel 실행파일" 명령어만 입력시 컴파일이 실행됨

 

 

npx babel input.js --out-file output.js

 

input.js 에 es6문법을 넣고 돌리면

es5로 변환된 output.js 파일이 생성된다

---