Babel - Plugin(플러그인)

Plugin이란?

기본적으로 Babel은 코드를 받아서 반환합니다. Babel 함수를 정의한다면 이런 모습이 될 것입니다.

const babel = code => code;

 

 

Babel은 'Parsing'과 'Printing'만 담당하고 'Transforming' 작업은 'Plugin'이 처리합니다.

 

커스텀 플러그인

Plugin을 직접 만들면서 동작의 원리를 살펴봅시다.

 

'my-babel-plugin.js'라는 파일을 만들어 봅시다.(출처: Babel 홈페이지 예제 코드)

module.exports = function myBabelPlugin() {
    return {
        visitor: {
            Identifier(path) {
                const name = path.node.name;

                // Babel이 만든 AST Node를 출력
                console.log('Identifier() name:', name);

                // 변환작업: 코드 문자열을 역순으로 변환
                path.node.name = name.split('').reverse().join('');
            }
        },
    };
};

• Plugin 형식은 'visitor' 객체를 가진 함수를 반환해야 합니다. 이 객체는 Babel이 Parsing하여 만든 추상 구문 트리(AST)에 접근할 수 있는 메소드를 제공합니다. 그중에서 'Identifier()' 메소드의 동작 원리를 살펴보는 코드입니다.

 

Plugin의 사용법을 알아봅시다.

# --help 옵션으로 사용법을 확인해볼 수 있습니다.
npx babel --help

• 그중에서 '--plugins [list]'옵션을 사용해봅시다.

 

'--plugins [list]'옵션을 추가해서 plugin을 실행시켜봅시다.

npx babel app.js --plugin './my-babel-plugin.js'

 

이렇게 plugin을 실행하면 아래와 같은 결과를 확인할 수 있습니다.

 

'Identifier()'메소드로 들어온 인자 'path'에 접근하면 코드 조각에 접근할 수 있는 것 같습니다. 우리는'my-babel-plugin.js'에 'path.node.name'의 값을 역순으로 변경하는 코드를 작성했는데, 위의 결과창 마지막줄에서 문자열이 역순으로 잘 변경된 것을 확인해볼 수 있습니다.

 

그러나 우리가 하려는 것은 'ECMAScript2015(ES6)'로 작성한 코드를 인터넷 익스플로러애서 돌아가도록 만드는 것입니다. 먼저 'const' 코드를 'var'로 변경하는 플러그인을 만들어 봅시다.

 

'my-babel-plugin.js' 예시 보기

module.exports = function myBabelPlugin() {
    return {
        visitor: {
            // https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-block-scoping/src/index.js#L26
            VariableDeclaration(path) {
                console.log('VariableDeclaration() kind:', path.node.kind); // const

                // const -> var 변환
                if (path.node.kind === 'const') {
                    path.node.kind = 'var';
                }
            },
        },
    };
};

 

이렇게 하고 다시 plugin을 실행하면 아래와 같이 'const'가 'var'로 잘 변경된 것을 확인할 수 있습니다.

 

플러그인 사용하기

'const' 'let' 처럼 블록 스코핑을 따르는 예약어를 함수 스코핑을 사용하는 'var'로 변경해주는 플러그인이 바로 block-scoping 입니다.

 

먼저 NPM 패키지로 제공하는 block-scoping 플러그인을 설치합니다.

npm install @babel/plugin-transform-block-scoping

# 개발 환경에만 설치하려면 -D 옵션을 사용
npm install -D @babel/plugin-transform-block-scoping

 

설치한 block-scoping 플러그인을 실행시켜 봅시다.

npx babel app.js --plugins @babel/plugin-transform-block-scoping

 

이렇게 실행하면 아래와 같이 'const'가 'var'로 잘 변경된 것을 확인할 수 있습니다.

 

자 다음으로는 인터넷 익스플로러에서 지원하지 않는 에로우 함수를 arrow-functions 플러그인을 사용해서 일반 함수로 변경해봅시다.

 

먼저 NPM 패키지로 제공하는 arrow-functions 플러그인을 설치합니다.

npm install @babel/plugin-transform-arrow-functions

# 개발 환경에만 설치하려면 -D 옵션을 사용
npm install -D @babel/plugin-transform-arrow-functions

 

그 다음 설치한 arrow-functions 플러그인을 실행시켜 봅시다.

npx babel app.js --plugins @babel/plugin-transform-arrow-functions

 

이렇게 실행시키면 아래와 같이 에로우 함수가 일반 함수로 잘 변경된 것을 확인할 수 있습니다.

 

자 이제 block-scoping과 arrow-functions을 같이 사용하면 인터넷 익스플로러가 이해할 수 있는 코드로 변경이 완료됩니다.

npx babel app.js --plugins @babel/plugin-transform-block-scoping --plugins @babel/plugin-transform-arrow-functions

 

이제 마지막으로 ECMAScript5에서부터 지원하는 엄격모드를 사용하는 것이 안전하기 때문에 “use strict” 구문을 추가해봅시다.

 

먼저 strict-mode 플러그인을 install 합니다.

npm install @babel/plugin-transform-strict-mode

# 개발 환경에만 설치하려면 -D 옵션을 사용
npm install -D @babel/plugin-transform-strict-mode

 

이제 아까 사용했던 block-scoping과 arrow-functions랑 같이 실행해봅시다.

npx babel app.js --plugins @babel/plugin-transform-block-scoping --plugins @babel/plugin-transform-arrow-functions --plugins @babel/plugin-transform-strict-mode

 

이렇게 실행하면 아래와 같이 “use strict” 구문이 추가된 것을 확인할 수 있습니다.

 

그런데 사용하는 플러그인이 많아지니까 커맨드라인 명령어가 점점 길어지기 때문에 조금 불편할 수 있습니다. 그래서 따로 설정 파일로 분리를 해보도록 하겠습니다. webpack의 'webpack.config.js'처럼 Babel도 'babel.config.js'를 기본 설정파일로 사용합니다.

 

'babel.config.js' 예시 보기

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

 

이렇게 설정 파일을 만든 후에 babel을 실행시킵니다.

npx babel app.js

 

 

이렇게 하면 아까랑 완전히 동일한 결과를 확인해볼 수 있습니다.