안녕하세요, Babel! 우선 babylon과 babel-generator만을 사용하여 코드 변환 입문을 시도하십시오.

Qiita 첫 투고입니다.
실은 작년의 단계에서 계정은 만들고 있었습니다만, 보다 좋은 코드나 재미있는 기사를 쓸 수 있으면 포스트 하려고 생각하고 있었습니다.
하지만 그런 날은 분명 방문하지 않고, 그것이 영어의 발음을 신경써 영어를 좀처럼 말할 수 없는 것과 같잖아! 라고 생각해, 이미 쓰기로 했습니다.
초안만 쓰고 가볍게 하고 있는 것보다, 투고해 버리는 편이 재미있어!

코딩 타임 컴파일, 메타 프로그래밍, 트랜스파일

앞으로의 시대의 메타 프로그래밍 JavaScript의 정의를 이야기합시다.

안녕 보일러 플레이트. s2s로 빠른 redux 애플리케이션 구축

작년의 삶에 위의 기사를 만나 메타 프로그래밍이나 트랜스 파일이나 코딩 타임 컴파일 등의 말에 매료되었습니다. 그리고 설날에는 아래와 같은 기사도 투고했습니다.

2018년 설날, 코딩 타임 컴파일에 메타프로그래밍, 트랜스파일이라는 단어가 내 마음을 포착해 놓지 않는 건

요점은 빠졌습니다.
다만, 자신은 이런 분야의 지식이 절망적으로 없기 때문에, よし、俺も今日からメタプログラマーだ！글쎄, 어두운 구멍의 바닥에서 절망하는 것은 쉽지만 바닥에서 기어 오르는 것은 재미 있습니다.
우선 babel을 사용하여 간단한 변환 코드를 쓰는 곳에서 처음으로보기로 결정했습니다.
그래서 타이틀입니다.

babylon과 babel-generator만 있으면 우선 변환할 수 있을 것 같다

조속히 해보겠습니다. 이하, 비망록적인 형태가 됩니다.

설치

yarn add babylon babel-generator

코드 쓰기

const babylon = require('babylon');
const generate = require('babel-generator').default;

const sampleCode = `
console.log("Goodmorning!!");
console.log("Hello!!");
console.log("Goodnight!!");
`

// ASTに変換
const ast = babylon.parse(sampleCode);

// console.log内の文字列を"Hi!"に変換
ast.program.body.forEach(function(n1) {
  n1.expression.arguments[0].value = "Hi!";
});

// ASTからJavaScriptコードを生成し、codeを取得する
const transformedCode = generate(ast, sampleCode).code;
console.log(transformedCode);

실행 결과는 다음과 같습니다.

node hello-world.js

console.log("Hi!");
console.log("Hi!");
console.log("Hi!");

어렵다고 생각했던 AST가 조금만 가까워진 것 같은 생각이 들었습니다.