[프론트엔드 개발환경과 실습] Babel #5
👩💻 인프런 강의
Babel
- ECMAScript2015+ 이상으로 작성된 모든 코드를 브라우저에서 동작하도록 호환성을 지켜줌 (타입스크립트, JSX 포함)
- 설치 : npm install @babel/core @babel/cli
- 실행 : npx babel 실행파일.js
빌드 과정
- 파싱(Parsing) - 코드를 읽고 추상 구문 트리로 변환
- 변환(Transforming) - 실제 코드를 변경하는 작업
- 출력(Printing) - 변경된 결과물을 출력
플러그인(변환)
block-scoping 플러그인
- const, let을 var로 변환
- 설치 : npm install @babel/plugin-transform-block-scoping
- 실행 : npx babel app.js --plugins @babel/plugin-transform-block-scoping
const alert = msg => window.alert(msg);
👇
var alert = msg => window.alert(msg);
arrow functions 플러그인
- 화살표함수를 일반함수로 변환
- 설치 : npm install @babel/plugin-transform-arrow-functions
- 실행 : npx babel app.js --plugins @babel/plugin-transform-arrow-functions
const alert = msg => window.alert(msg);
👇
const alert = function (msg) {
return window.alert(msg);
};
strict-mode 플러그인
- use strict 구문 추가(엄격모드)
- 설치 : npm install @babel/plugin-transform-strict-mode
- 실행 : npx babel app.js --plugins @babel/plugin-transform-strict-mode
"use strict";
babel.config.js
- 여러 플러그인을 사용시 명령어가 점점 길어지기 때문에 기본 설정파일을 사용
👇 babel.config.js
module.exports = {
plugins: [
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-strict-mode',
]
}
프리셋
- 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것
- 실행 : npx babel app.js
커스텀 프리셋
👇 my-babel-preset.js
module.exports = function myBabelPreset() {
return {
plugins: [
'@babel/plugin-transform-block-scoping',
'@babel/plugin-transform-arrow-functions',
'@babel/plugin-transform-strict-mode',
]
}
}
👇 babel.config.js
module.exports = {
presets: [
'./my-babel-preset.js'
]
}
Author And Source
이 문제에 관하여([프론트엔드 개발환경과 실습] Babel #5), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seungmidev/프론트엔드-개발환경과-실습-Babel-5저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)