babel 공식 문서 - @babel/core

@babel/core로 실행 & 설정

앞서 살펴본 @babel/cli, babel-loader는 @babel/core를 통해 실행된다. 다른 파일을 통하지 않고 직접 @babel/core를 통해 실행하는 방법을 알아보자.

실행파일 작성

프로젝트 루트에 바벨 실행파일을 작성해보자. 이전까지는 콘솔을 통해 babel명령어를 작성하여 실행했지만, 이제 runBabel.js을 작성하고 바벨을 실행하게 된다.

코드예졔 : 실전 리액트 프로그래밍/이재승 저

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];
const plugins = [
  '@babel/plugin-transform-arrow-functions',
  '@babel/plugin-transform-template-literals',
];

const { code } = babel.transformSync(source, {
  filename,
  presets,
  plugins,
  configFile: false,
});

console.log(code);

• @babel/core 불러오기
• file-system(fs) 불러오기 : /src.core.js를 불러오기 위해 사용
• presets, plugins : 사용한 플로그인/프리셋 배열에 담아 작성
• @babel/core의 transformSync() 메서드를 통해 코드 변환
• 변환파일은 저장하지 않고 콘솔에 출력

위 코드예제를 보고 느끼는 점은 이전 webpack/babel-loader나 @babel/cli 설정과 딱히 다르지 않고 더 복잡한 느낌적 느낌이 드는데 왜 이 방식을 쓸까 라는 것. 하지만 코드가 복잡해지고 여러 설정에 따라 바벨적용을 달리해야 한다면 여러번 바벨 컴파일 하지 않고, @babel/core를 통해 직접 작성한 코드가 훨씬 간결하고, 1회 실행으로 결과물이 나온다고한다. (나는 아직 경험해 보지 못해.. 중요성은 모르겠다)

@babel/core의 컴파일 단계

• 파싱(parse) : 입력된 코드 부터 AST(abstract sytax tree)를 생성
• 변환(transform): AST를 원하는 형태로 변환
• 생성(generate): AST를 코드로 출력

추상 구문 트리 : AST(abstract syntax tree) 위키참조
추상 구문 트리는 컴파일러에 널리 사용되는 자료 구조인데, 이는 프로그램 코드의 구조를 표현하는 프로퍼티이기 때문이다. AST는 일반적으로 컴파일러의 구문 분석 단계의 결과물이다. 컴파일러가 요구하는 여러 단계를 통해 프로그램의 중간 표현의 역할을 하며 컴파일러의 최종 결과물에 대해 강력한 영향을 준다.

• AST = 코드가 분석된 결과를 담는 트리 구조체

AST 활용 효율적 babel 실행법

// AST 활용하여 효율적인 바벨실행파일을 작성해보자

const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];

// 코드 생성하지 않고 AST만 생성 : 동일한 옵션 적용
const { ast } = babel.transformSync(source, {
  filename,
  presets,
  configFile,
  ast: true,
  code: false,
});

// ast 설정과 + code.js + 개별설정 에 따라 컴파일된 code1 반환 : 화살표 함수 적용
const { code: code1 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-arrow-functions'],
  configFile: false,
});

// ast 설정과 + code.js + 개별설정 에 따라 컴파일된 code2 반환 : 템플릿 문자열적용
const { code: code2 } = babel.transformFromAstSync(ast, source, {
  filename,
  plugins: ['@babel/plugin-transform-template-literals'],
  configFile: false,
});

console.log(code1);
console.log(code2);