바벨 - null

바벨이 나온 배경

브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할때가 많다. 프론트엔드 개발에서 크로스브라우징 이슈는 코드의 일관성을 헤친다. 크로스브라우징의 혼란을 해결할수 있는 것이 바벨이다. ECMAScript2015+로 작성한 코드를 모든 브라우저에서 동작하도록 호환성을 지켜준다.

바벨의 기본동작

바벨은 ECMAScript2015이상의 코드를 적당한 하위버전으로 바꾸는 것이 주된 역할이다. 이렇게 바뀐 코드는 오래된 버전의 브라우저에서도 작동할수 있도록 해준다.

파싱(Parsing)

코드를 읽고 추상 구문 트리로 변환하는 단계

변환(Transforming)

추상 구문 트리를 변경하는 것이 변환으로써, 실제로 코드를 변경하는 작업

출력(Printing)

변경된 결과물을 출력

바벨 설치하기

@babel/cli는 터미널도구로 사용하기 위해서 설치해야 한다.

1	npm install @babel/core @babel/cli

아래의 명령어로 바벨을 실행시키면 콘솔로 출력 해준다.

1	npx babel 파일경로

바벨 플러그인

기본적으로 바벨은 파싱과 출력만 담당을 하고 변환작업은 플러그인에게 맡긴다. 그래서 플러그인이 설치되어 있지 않으면 기본적으로 입력된 것과 동일한 출력만 하게 된다.

커스텀 플러그인

모듈 함수를 실행하면 visitor 객체를 가진 객체를 반환해야 한다. 그리고 visitor 객체는 Identifier 메소드를 가지고 path 파라미터를 넘겨준다.
visitor에는 여러개의 메소드를 작성할수 있는데 이미 정해져 있는 메소드명을 사용해야 원하는 결과를 얻을수 있다.

1
2
3

// app.js

let data = () => 1;

// babel-plugin.js

module.exports = function myBabelPlugin() {
    return {
        visitor: {
            Identifier(path) {
                console.log(path.node.name) // data
            },
            VariableDeclaration(path) { 
                console.log(path.node.kind) // let
            }
        }
    }
}

1	npx babel app.js --plugins './babel-plugin.js'

바벨의 플러그인을 직접 만들어서 사용하는 일은 드물다. 이미 만들어진 플러그인을 사용하는게 좋다.

플러그인 사용하기

@babel/plugin-transform-block-scoping

let, const를 var로 변경해준다.

@babel/plugin-transform-arrow-functions

화살표 함수를 일반 함수로 변경해준다.

@babel/plugin-transform-strict-mode

자바스크립트에 strict-mode를 추가해준다.

설정파일 만들기

cli로 매번 바벨을 실행 시켜주는 것은 매우 불편한 일이다. 설정파일로 작성 해 놓으면 편하게 실행시킬수 있다. 바벨에서 설정 파일을 사용하기 위해서는 babel.config.js 파일을 만들면 된다.

// bable.config.js

module.exports = {
    plugins: [
                "@babel/plugin-transform-block-scoping",
                "@babel/plugin-transform-arrow-functions",
                "@babel/plugin-transform-strict-mode"
    ]
}

1	npx babel 파일 경로

위 처럼 실행해도 플러그인이 적용되는 것을 확인 할수 있다.

프리셋

코딩시에 필요한 플러그인을 일일이 설정하는 일은 지나친 일이다. 코드 한줄 작성하더라도 세개의 플러그인을 셋팅해주어야 한다. 목적에 맞는 여러가지 플러그인을 모아놓은 것을 프리셋이라 한다. 한마디로 프리셋은 플러그인 모음이라고 할수 있다.

커스텀 프리셋

// preset.js

module.exports = function babelPreset() {
    return {
        plugins: [
            "@babel/plugin-transform-block-scoping",
            "@babel/plugin-transform-arrow-functions",
            "@babel/plugin-transform-strict-mode"
        ]
    }
}

// babel.config.js

module.exports = {
    presets: [
        './preset.js'
    ]
}

자주사용되는 프리셋

preset-env

ECMAScript2015+를 변환할때 사용한다. 바벨7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest) 지금은 preset-env로 통합되었다.

1	npm install -D @babel/preset-env

preset-typescript

타입스크립트를 변환하기 위한 프리셋이다.

@babel/preset- 으로 시작하는 모듈은 바벨의 프리셋이라고 보면 될것이다.

타겟브라우저

지원하는 브라우저의 버전을 명시할수 있다. 예를 들어 A라는 회사의 홈페이지는 크롬 최신버전만 지원한다. 이럴 경우 IE를 위한 변환은 불필요하다. 타켓브라우저를 사용해서 최적의 코드로 출력할수 있다.

// babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: 79,
                ie: 11
            }
        }]
    ]
}

프리셋에 옵션을 줄 경우에는 배열로 넘겨준다. 배열의 첫번째 값으로는 프리셋 모듈을, 두번째 값으로는 옵션을 넘겨준다.

module.exports = {
    presets: [
        ['preset명', {
            // 옵션
        }]
    ]
}

타겟브라우저는 chrome, opera, edge, firefox, safari, ie, ios, android, node, electron 들을 지원한다.

바벨