[rollup.js] 환경 설정하기(1) - 오류 해결하기

이 글에 대한 배경은

2024.04.25 - [개발] - [Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?

[Javascript] HTML 페이지에서 자바스크립트 태그를 어떻게 파싱할까 🤔?

에서 시작된다.

 

사내 프로젝트는 commomJS 환경에서 개발된 상태에서 React를 래핑하여 지원할 수 있도록 개선해야 하는데

타사 제품에는 umd 예제를 지원하고 있어서 rollup.js를 적용해 해당 예제를 지원할 수 있도록 해야한다.

 

그래서 !

rollup.js를 한번 공부해보기로 했으나 레퍼런스가 매우 부족한 현실에 벌써부터 마음이 고단하다.

일단, 공식 도큐먼트 사이트를 통해서 공부를 시작해보자.

rollup.js

https://rollupjs.org/tutorial/#installing-rollup-locally

Tutorial | Rollup

일단 rollup의 공식 도큐먼트 사이트는 처음에 봤을 때, webpack의 공식 도큐먼트 사이트보다는 불 친절 하다는 느낌을 받았다.

그래도 공식 도큐먼트가 있다는게 어딘가라는 마음으로 시작해보자.

 

우선 rollup을 전역 환경이 아닌 로컬 환경으로 다운로드를 받았다.

npm i rollup -D

 

이후 진입점을 설정해야 하는 main.js를 생성했다.

// src/main.js
import { version } from '../package.json';

export default function () {
	console.log('version ' + version);
}

 

나는 플러그인 예제를 바로 연습해 보았다.

// rollup.config.mjs
import json from '@rollup/plugin-json';

export default {
	input: 'src/main.js',
	output: {
		file: 'bundle.js',
		format: 'cjs'
	},
	plugins: [json()]
};

 

여기서 rollup/plugins-json의 용도란?

rollup/plugins-json 은 Rollup에서 JSON 파일을 가져와서 처리하는 플러그인 이다 .

 

Rollup은 기본적으로 JavaScript 파일만을 처리할 수 있기 때문에 JSON 파일을 직접 import하여 사용할 수 없다.

이 때 rollup-plugin-json을 사용하면 JSON 파일을 자바스크립트 모듈로 변환하여 Rollup이 처리할 수 있도록 도와준다.

이 플러그인을 사용하면 JSON 파일을 자바스크립트 객체로 변환하여 가져올 수 있다. 

이를 통해 JSON 파일에 있는 데이터를 자바스크립트 코드에서 사용할 수 있게 된다.

 

이제 어느정도 튜토리얼을 따라서 설정 파일들을 생성 및 수정을 했으니 명령어를 실행할 차례이다.

"build": "rollup -c"

package.json 에 rollup 을 처리할 수 있는 명령어를 등록하고 npm run build를 실행했다.

하지만 나는 아래와 같은 오류를 맞이했다.

 

node:5699) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use node --trace-warnings ... to show where the warning was created)
[!] RollupError: Node tried to load your configuration file as CommonJS even though it is likely an ES module. To resolve this, change the extension of your configuration to ".mjs", set "type": "module" in your package.json file or pass the "--bundleConfigAsCjs" flag.

Original error: Cannot use import statement outside a module

 

쉽게 말하자면, rollup이 ES 모듈을 로드하려고 하는데, 현재 설정이 commonJS 스타일로 되어 있으니 수정하라는 말이다.

해결하기 위해 관련 레퍼런스 자료를 찾으려고 했는데 너무 간단한 문제였는지 아무런 글이 없었다.

 

그럼 내가 알아보고 해결하고 글로 작성하면 그만이라고 생각했고 결국 간단한 방법으로 해결했다.

package.json에 아래와 같은 설정을 추가하면 간단하게 해결된다.

"type":"module"

 

이제 다시 npm run build를 실행하면

정상적으로 rollup이 번들을 잘 해준 것을 볼 수 있다.

결과

 

시작이 반이라고 열심히 알아가도록 해보자 :)