[NodeJS] babel plugin 만들기

cross-env 설치

# babel-node로 스크립트를 실행하면 cache되어 plugin 스크립트를 수정해도 변경사항에 맞춰 실행되지 않음 
# 실시간으로 변경 사항에 맞춰 실행할 수 있도록 설정값을 넘겨주기 위해 설치
yarn add --dev cross-env

package.json 설정

// <프로젝트>/package.json 

{
    ...
    "scripts": {
        "start": "cross-env BABEL_DISABLE_CACHE=1 babel-node src/js/example.js"
    },
    ...
    "babel": {
        "presets": [
            "env"
        ],
        "plugins": [
            "./src/plugins/babel-plugin-custom"
        ]
    }
    ...
}

스크립트 작성

// src/js/helloworld.js 

export default 'Hello World';

// src/js/example.js 
import helloworld from '@/js/helloworld'; 

console.log(helloworld); 

babel plugin 스크립트 작성

// src/plugins/babel-plugin-custom.js 
// import문에서 @를 루트 경로로 치환하는 스크립트

module.exports = function(babel) { 
    return { 
        visitor: { 
            ImportDeclaration: function(path){ 
                var filepath = path.node.source.value; 

                if (filepath[0] !== "@") { 
                    return; 
                } 

                filepath = filepath.substring(1); 
                filepath = process.cwd() + "/src" + filepath; 

                path.node.source.value = filepath; 
            } 
        } 
    } 
}; 

스크립트 실행

yarn start

참고

• 예제
  • https://www.youtube.com/watch?v=5gQiIWXBQ0U
• 기본 설명
  • https://github.com/jamiebuilds/babel-handbook/blob/master/translations/ko/plugin-handbook.md
• babel node 구조 쉽게 보여주는 사이트
  • https://astexplorer.net/