[프론트엔드 개발환경과 실습] Babel #5

👩‍💻 인프런 강의

---

Babel

• ECMAScript2015+ 이상으로 작성된 모든 코드를 브라우저에서 동작하도록 호환성을 지켜줌 (타입스크립트, JSX 포함)
• 설치 : npm install @babel/core @babel/cli
• 실행 : npx babel 실행파일.js

빌드 과정

1. 파싱(Parsing) - 코드를 읽고 추상 구문 트리로 변환
2. 변환(Transforming) - 실제 코드를 변경하는 작업
3. 출력(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'
    ]
}