Babel - env 프리셋 설정과 폴리필

env 프리셋 설정

과거에 제공했던 연도별 프리셋을 사용해 본 경험이 있다면 까다롭고 헷갈리는 설정 때문에 애를 먹었을 지도 모르겠습니다. 그에 비해 'env'프리셋은 무척 단순하고 직관적인 사용법을 제공합니다.

 

타겟 브라우저

우리 코드가 크롬 최신 버전(2023년 06월 기준)만 지원한다고 가정해봅시다. 그렇다면 인터넷 익스플로러를 위한 코드 변환은 불필요합니다. target 옵션에 브라우저 버전명만 지정하면 'env'프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해 냅니다.

 

'babel.config.js' 예시 보기

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79', // 크롬 79까지 지원하는 코드를 만듭니다.
            }
        }]
    ]
};

 

자 이제 'npx babel app.js'로 빌드해보면 지금까지와는 다르게 'const'와 에로우 함수가 변환되지 않고 그대로 사용되고 있는 것을 확인할 수 있습니다.

 

can i use 사이트에 들어가서 'const'라고 검색하면 호환성 여부를 확인해볼 수 있습니다.

 

그런데 만약에 인터넷 익스플로러도 지원해야 한다면, 'babel.config.js'에 아래와 같이 'ie'옵션을 추가해줍니다.

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79', // 크롬 79까지 지원하는 코드를 만듭니다.
                ie: '11',     // 인터넷 익스플로러 11까지 지원하는 코드를 만듭니다.
            }
        }]
    ]
};

 

이렇게 해주면 인터넷 익스플로러를 지원해야 하기 때문에 'const'와 arrow 함수가 변환된 것을 확인할 수 있습니다.

 

폴리필

이번에는 폴리필에 대해서 알아봅시다.

 

먼저 'app.js'에서 'Promise' 객체를 사용해봅시다.

 

'app.js'예시보기

new Promise();

 

이 상태에서 'babel.config.js'가 크롬 79와 인터넷 익스플로러 11을 지원하도록 세팅 되어 있다면 과연 어떤 결과가 나올까요? 놀랍게도 결과는 아무 변화가 없습니다.

 

그렇다면 인터넷 익스플로러에서도 'Promise'를 지원하는구나 라고 생각할 수 있겠지만, 실제 인터넷 익스플로러에서는 'Promise'를 이해하지 못해서 에러를 던집니다. (can i use 사이트에서도 지원하지 않는다는 사실을 확인할 수 있습니다.)

 

브라우저는 현재 스코프부터 시작해서 전역까지 'Promise'라는 이름을 찾으려고 시도할 것입니다. 그러나 스코프 어디에도 'Promise'라는 이름은 없기 때문에 레퍼런스 에러를 발생시키고 프로그램이 끝나버린 것입니다.

 

우리는 플러그인이 'Promise'를 ECMAScript5 버전으로 변환해줄 것이라고 기대했는데 예상과는 다른 결과가 나왔습니다. 왜 그럴까요?

그 이유는 Babel이 ECMAScript2015+(ES6)를 ECMAScript5(ES5) 버전으로 변환할 수 있는 것만 빌드하기 때문입니다. Babel이 변환할 수 없는 것들은 “폴리필”이라고 부르는 코드조각을 추가해서 해결해야합니다.

 

가령 ECMAScript2015+의 블록 스코핑은 ECMAScript5 버전의 함수 스코핑으로 대체할 수 있습니다. 에로우 함수도 일반 함수로 대체할 수 있습니다. 이런 것들은 Babel이 변환해서 ECMAScript5 버전으로 결과물을 만듭니다.

 

한편 'Promise'는 ECMAScript5 버전으로 대체할 수 없습니다. 다만 ECMAScript 버전으로 구현할 수 는 있습니다.(참고: core-js promise)

 

env 프리셋은 폴리필을 지정할 수 있는 옵션을 제공합니다.

 

'babel.config.js' 예시보기

module.exports = {
    presets: [
        ['@babel/preset-env', {
            targets: {
                chrome: '79', // 크롬 79까지 지원하는 코드를 만듭니다.
                ie: '11',     // 인터넷 익스플로러 11까지 지원하는 코드를 만듭니다.
            },
            useBuiltIns: 'usage',  // 기본값이 usage 입니다.('entry', false도 올 수 있습니다.)
            corejs: {
                version: 2, // 기본값이 2입니다. (3도 올 수 있습니다.) 
            }
        }]
    ]
};

/*
	useBuiltIns는 어떤 방식으로 폴리필을 사용할지 설정하는 옵션입니다.
	"usage" , "entry", false 세 가지 값을 사용하는데 기본값이 false 이므로 폴리필이 동작하지 않았던 것입니다. 
	반면 "usage"나 "entry"를 설정하면 폴리필 패키지 중 core-js를 모듈로 가져옵니다.
	(이전에 사용하던 babel/polyfile은 바벨 7.4.0부터 사용하지 않음)

	corejs 모듈의 버전도 명시하는데 기본값은 2입니다. 버전 3과 차이는 확실히 잘 모르겠습니다. 
	이럴 땐 그냥 기본값을 사용하는게 좋습니다.
*/

 

자 이제 다시 'npx babel app.js'로 빌드해보면 아래와 같이 core-js 라이브러리에서 promise라는 폴리필을 가져오는 코드가 추가된 것을 확인할 수 있습니다.

 

이제야 비로소 인터넷 익스플로러에서 지원가능한 코드가 완성되었습니다.