[Babel] Plugins 플러그인 제작하기

콘솔 로그를 없에는 Plugins을 제작해 보겠음.

 

처음 프로젝트 세팅을 해줌

mkdir test-babel-custom-plugin
cd test-babel-custom-plugin
npm init -y
npm install @babel/core @babel/cli

 

plugins/remove-log.js

module.exports = function ({ types: t }) {
  return {
    visitor: {
      ExpressionStatement(path) {
        if (t.isCallExpression(path.node.expression)) {
          if (t.isMemberExpression(path.node.expression.callee)) {
            const memberExp = path.node.expression.callee;
            if (
              memberExp.object.name === "console" &&
              memberExp.property.name === "log"
            ) {
              path.remove();
            }
          }
        }
      },
    },
  };
};

 

src/code.js

콘솔 로그가 찍히는 코드를 만든다.

console.log("aaa");
const v1 = 123;
console.log("bbb");

function onClick(e) {
  const v = e.target.value;
}

function add(a, b) {
  return a + b;
}

 

babel.config.js

const plugins = ["./plugins/remove-log.js"];
module.exports = { plugins };

 

$ npx babel src/code.js

를 수행하게 되면 로그가 없어진 것을 확인할 수 있다.

 

 

 

결과 파일임

test-babel-custom-plugin.zip

2.57MB