바벨 플러그인 사용하기

이전 글에서 직접 커스터마이징해서 간단히 바벨의 동작원리를 알아보는 시간이 있었다면 이제 바벨에서 제공해주는 플러그인으로 간단히 변환시켜 보자.

 

우선 플러그인을 설치해준 뒤에 

 npm install @babel/plugin-transform-block-scoping

app.js

const 는 성공적으로 바뀌엇으니 이제 애로우 함수를 바꾸어 보자.

 

 

npm install @babel/plugin-transform-arrow-functions

 

성공쓰

 

파일 상단에 엄격한 자바스크립트 모드를 나타내는 'use strict' 문구를 적어주는 플러그인도 설치해보자 

 

npm install @babel/plugin-transform-strict-mode

이렇게 매번 바벨을 실행시킬 때 마다 문구가 길어지게 되는데 config 파일을 통해 쓸 플러그인들을 설정해두자

 

 

config 파일 내부에 쓸 플러그인들을 설정해준뒤에

 

babel 명령어로 실행시켜주면 알아서 config 파일 내부의 플러그인들을 읽어서 실행시켜 준다.

 

이렇게 코드의 양이 많으면 그렇다 해도 소량의 코드를 변환시켜주기 위해 매번 config 파일에서 실행시킬 플러그인들을 작성하는 것은 매우 비효율적인 일이다. 

 

그래서 등장한 것이 프리셋인데 용도별 플러그인 묶음, 플러그인 덩어리 등으로 이해하면 되겠다. 

직접 프리셋을 한번 설정해보자

 

프리셋 파일을 하나 만든뒤에

 

설정해준 뒤 

 

 

config 파일에서 호출해주면 되겠다.