Babel - Preset(프리셋)

프리셋 이란?

'ECMAScript2015+(ES6)'로 코딩할 때 필요한 플러그인을 매번 일일이 설정하는 일은 무척 비효율적인 일입니다. 코드 한 줄 작성하는데도 3개의 플러그인을 세팅 해야 했으니 말이죠.

 

그래서 좀 더 효율적으로 사용할 수 있도록 목적에 맞게 여러가지 플러그인을 세트로 모아놓은 것을 'preset(프리셋)'이라고 합니다.

 

커스텀 프리셋

우리가 사용한 3개의 플러그인을 하나의 프리셋으로 만들어 보겠습니다.

 

'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',
        ]
    };
};

 

module.exports = {
    // 기존에 있던 plugins 배열은 지워버리고 presets 배열에다가 우리가 만든 커스텀 프리셋을 넣어줍니다.
    presets: [
        './my-babel-preset.js'
    ]
};

 

자 이제 바벨을 실행시켜 봅시다. 'npx babel app.js' 명령어로 실행하면 플러그인을 세팅했을 때와 동일한 결과를 얻을 수 있습니다.

 

프리셋 사용하기

자 지금까지 알아봤던 babel의 설정들은 실제로 실무에서는 많이 쓰이지 않는 것들 이었습니다. 지금부터는 실무에서 많이 쓰이는 프리셋들을 알아보도록 하겠습니다.

 

Babel은 목적에 따라서 몇 가지 프리셋을 제공합니다.

• preset-env
• preset-flow
• preset-react
• preset-typescript

 

'preset-env'는 ECMAScript2015+를 변환할 때 사용합니다. babel 7 이전 버전에는 연도별로 각 프리셋을 제공했지만(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest) 지금은 'env' 하나로 합쳐졌습니다. 우리 개발자들에게는 매우 기쁜 소식이죠.

 

'preset-flow', 'preset-react', 'preset-typescript'는 flow, React, Typescript를 변환하기 위한 프리셋입니다.

 

먼저 인터넷 익스플로러 지원을 위해 가장 많이 사용하는 'env' 프리셋을 사용해 봅시다.

 

'preset-env' 패키지를 install 합니다.

npm install @babel/preset-env

# 개발환경에서만 사용하려면 -D 옵션 추가
npm install -D @babel/preset-env

 

'babel.config.js' 파일의 설정을 수정합니다.

module.exports = {
    // 우리가 만들었던 커스텀 프리셋을 지우고 방금 install한 @babel/preset-env를 넣어줍니다.
    presets: [
        '@babel/preset-env'
    ]
};

 

자 이제 'npx babel app.js'로 빌드해보면 잘 변환된 것을 확인할 수 있습니다.

 

자 이렇게 실제 실무에서는 babel에서 제공하는 프리셋을 사용하게 됩니다.