폴리필을 써야 하는 이유

바벨의 플러그인인 es5로 변환할수 있는 것만 변경해준다. es5에 이미 존재 했었던 개념은 플러그인으로 변경이 가능하지만 ECMAScript2015+에서 새롭게 등장한 개념은 플러그인을 통해서 변경이 되지 않는다.
예를 들어 화살표 함수의 경우에는 일반 함수로 변경이 가능하지만, Promise같은 새로운 개념은 변경이 안된다.
그래서 이렇게 새롭게 등장한 개념에 대한 변경이 가능하도록 폴리필이라고 부르는 코드조각을 추가해서 해결하게 된다.
폴리필로 사용되는 것중 하나에 core-js가 존재한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// babel.config.js

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: 79,
                ie: 11
            },
            useBuiltIns: 'usage',    // 폴리필을 쓰겠다.
            corejs: {                // 폴리필로 corejs를 쓰겠다.
                version: 2
            }
        }]
    ]
}

• useBuiltIns: 어떠한 방식으로 폴리필을 사용하지에 대한 옵션으로, value에 ‘usage’를 주면 코드상에서 사용이 되는 폴리필만 import 하도록 해준다.
• corejs: 폴리필시에 사용되는 파일로써 version을 옵션으로 사용하고자 하는 버전을 선택가능하다.

웹팩에서 바벨 사용하기

실무환경에서는 바벨을 따로 사용하지 않고 웹팩을 통해서 사용하게 된다. 보통은 바벨은 로더 형태로 제공된다(babel-loader).

1

npm install -D babel-loader

1
2
3
4
5

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/     // node_modlues에도 js가 있어서 제외 시켜준다
}

Comment and share

바벨이 나온 배경

브라우저마다 사용하는 언어가 달라서 프론트엔드 코드는 일관적이지 못할때가 많다. 프론트엔드 개발에서 크로스브라우징 이슈는 코드의 일관성을 헤친다. 크로스브라우징의 혼란을 해결할수 있는 것이 바벨이다. 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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 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 파일을 만들면 된다.

1
2
3
4
5
6
7
8
9

// bable.config.js

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

1

npx babel 파일 경로

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

프리셋

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

커스텀 프리셋

1
2
3
4
5
6
7
8
9
10
11

// preset.js

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

1
2
3
4
5
6
7

// 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를 위한 변환은 불필요하다. 타켓브라우저를 사용해서 최적의 코드로 출력할수 있다.

1
2
3
4
5
6
7
8
9
10
11
12

// babel.config.js

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

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

1
2
3
4
5
6
7

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

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

Comment and share