728x90
반응형
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 파일이 생성된다
728x90
반응형
'TIL' 카테고리의 다른 글
observer API 무한스크롤 (0) | 2023.01.08 |
---|---|
프로그래머스 js 마법의 엘리베이터 (0) | 2022.12.31 |
자바스크립트 Dom 이란? (0) | 2022.12.27 |
dependencies 와 devDependencies 차이 (0) | 2022.12.27 |
.env / .env.production / .env.development 차이 (0) | 2022.12.27 |
댓글