바벨의 Plugins & Presets

변환은 플러그인의 코드의 변화를 어떻게 수행할지 바벨에게 지시하는 작은 자바스크립트 프로그램의 형식으로 나타난다. 심지어 원하는 변화를 적용하는 플러그인을 작성할 수 있다. ES2015+문법을 ES5로 변환할려면 공식플러그인인 @babel/plugin-transform-arrow-functions을 사용하면 된다.

 

 

npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

 

 

이게 arrow함수는 ES5에 호환되는 함수 형식으로 바뀔거다.

 

 

const fn = () => 1;

// converted to

var fn = function fn() {
  return 1;
};

 

하지만 우리는 변환하길 원하는 다른 ES2015+형식도 가지고있다. 우리가 하나하나 원하는 모든 플러그인을 추가하는 대신에 이미 지정 된 preset을 사용할 수 있다.

 

플러그인처럼 필요한 플러그인의 조합을 공유하기 위해 preset또한 생성할 수 있다. 우리의 케이스에서 훌륭한 env라는 preset이 있지

 

 

npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

 

 

어떤 설정(configuration)없이 preset은 최신 자바스크립트(ES2015, ES2016, 등)를 지원하는 플러그인이 포함될거다. 하지만 preset은 옵션을 가질 수 있다. 터미널에서 cli와 preset옵션을 지정하기보다는 다른 방법을로 옵션을 설정하는 방법을 알아보자...