rollup Babel 관련 설정

Rollup을 사용할 때 Babel과 관련된 두 가지 설정이 있습니다. bundled와 runtime이 그것입니다. 이 둘은 JavaScript 코드를 변환하고 최적화하는 방식이 다릅니다.

Babel Bundled 설정

이 설정은 프로젝트의 각 JavaScript 파일을 개별적으로 다룹니다.

파일마다 Babel이 실행되어 최신 JavaScript 기능(예: 화살표 함수, 클래스 등)을 더 오래된 브라우저에서도 작동할 수 있는 코드로 변환합니다.
이 과정에서 필요한 추가 코드(폴리필)도 각 파일에 포함됩니다.
결과적으로, 각 파일이 자체적으로 모든 필요한 변환과 최적화를 거친 후에 Rollup에 의해 하나의 큰 파일(번들)로 결합됩니다.

babel({
	babelHelpers: 'bundled',
	presets: ['@babel/preset-env'],
}),

Babel Runtime 설정

이 설정은 Babel 변환을 좀 더 효율적으로 만듭니다.

변환 과정에서 자주 사용되는 도우미 코드(헬퍼 함수)나 폴리필을 별도의 파일로 분리합니다.
이렇게 하면, 같은 코드가 여러 파일에 중복되어 포함되는 것을 방지할 수 있고, 최종적으로 생성되는 번들의 크기가 줄어듭니다.
특히, 라이브러리나 프레임워크를 만들 때 유용합니다. 사용자들이 이 라이브러리를 사용할 때 번들 크기가 작아져서 더 빠르게 로드할 수 있게 됩니다.

babel({
	babelHelpers: 'runtime',
	presets: ['@babel/preset-env'],
	plugins: ['@babel/plugin-transform-runtime'],
}),

결론

Babel Bundled 설정은 각 파일을 개별적으로 처리하며, Babel Runtime 설정은 중복을 줄이고 전체 번들 크기를 최소화하기 위해 공통 코드를 별도로 관리합니다. 어떤 설정을 사용할지는 프로젝트의 특성과 필요에 따라 결정하게 됩니다.