<div id="readability-page-1" class="page"><div><div><a rel="noopener ugc nofollow" href="/?source=post_page-----705ef83365d3--------------------------------"><div aria-hidden="false"><img alt="Jeong Woo Ahn" src="https://miro.medium.com/v2/resize:fill:88:88/2*5-DkBQYvxo0TLldXjX88Og.png" width="44" height="44" loading="lazy" data-testid="authorPhoto"></div></a></div><figure></figure>현 시대 프론트엔드 개발자들은 자연스럽게 코드 에디터를 열고 수백 수천개의 컴포넌트 중 수정이 필요한 컴포넌트를 찾아 수정을 하고 새로운 컴포넌트를 만들고, 그 컨포넌트를 자유자재로 조합한다. 더 나아가 외부 프로젝트에 공유를 하기 위해 패키징을 하며 패키징된 외부 프로젝트를 우리 프로젝트에 가져와 설치를 한다.10년 전의 페이지에 삽입되던 몇 백줄의 자바스크립트와는 비교도 할 수 없을 정도로 많은 양의 자바스크립트 모듈들이 어떻게 이렇게 손쉽게 분리, 통합되고 조합될 수 있었을까.누군가에게는 당연한 이야기일지 모르지만 그 시절부터 개발을 해오던 나로서는 자바스크립트는 그때와는 완전히 다른 무언가로 인식된다. 그 사이에 도대체 무슨일이 있었는지 가늠이 안될 때도 있다.&lt;직업으로서의 소설가&gt;라는 에세이에서 무라카미 하루키는 삼십여년 전 어쩌다가 쓰게되어버린 첫 소설을 유명 문학잡지 &lt;군조&gt; 신춘문예에 응모를 했다. 얼마 후 잡지사에서 연락이 와 신인상 후보에 올랐다는 연락을 받게 된다. 그때 하루키는 이런 생각을 했다고 한다. “틀림없이 나는 &lt;군조&gt;신인상을 탈 것이라고, 그리고 소설가가 되어 어느 정도의 성공을 거둘것이라고, 심히 건방진 소리 같지만, 나는 왠지 그렇게 확신했습니다.”이 구절을 읽고 저는 상당히 놀랐다. 5년 후의 내 커리어에 대해서도 불안이 가득한데 말이다. 그리고 10년전의 자바스크립트는 아마 30년 전의 하루키와 지금의 하루키가 다른 것 만큼이나 달라졌을 텐데. 10년 전에 제가 자바스크립트에 대해 하루키처럼 이런 직관을 할 수 있었다면 어땠을까. 자바스크립트 그 자신도 상상 못했을 거다. (<a href="https://velog.io/@jmkacc99/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC" rel="noopener ugc nofollow" target="_blank">축약된 자바스크립트 역사</a>)죄송. 말도 안되는 얘기였다.ㅎㅎ 아무튼 자바스크립트는 그 자신과 환경이 아주 빠르게 변화했고 복잡도가 높아졌다. 우리가 지금과 같이 많고 많은 모듈을 손쉽게 다룰 수 있게된것은 번들러 덕분이다. 그렇다면 자바스크립트 번들러는 도대체 무슨일을 하는 걸까.<h2 id="ce43">번들러는 도대체 무슨일을 하는 걸까 📦</h2>자바스크립트 번들러는 번들을 생성한다. 번들은 웹 브라우저에 제공되도록 최적화된 정적파일이다. 우리가 보통 작성하는 모듈은 복잡한 프론트엔드 시스템과 개발자를 위해 만들어진 구조이다. 브라우저 입장에서 작성된 것이 아니다. 브라우저 입장에서는 중복도 많고 파일 수도 너무 많다. 브라우저에서 효율적으로 다룰 수 있도록 최적화된 정적파일을 만드는 과정이 필요하고 그것이 번들이다.최적화를 위해 번들러는 종속성 그래프를 만든다. 최초 진입점에서 시작해 거기서 참조하는 모든 종속성과 그 종속 대상의 종속성을 모두 순회한다. 의존성 그래프를 통해 번들러는 앱의 어느 위치에서 무엇이 사용되는지 정확히 알 수 있다.<figure></figure>처음에 프론트엔드 규모가 작을 때에는 모든 모듈들을 진입점에 파일 하나로 뭉쳐서 만들면 충분했다. 이제는 그러기에는 너무 커졌고 번들 과정에 최적화를 위한 많은 요구사항들이 반영이 되었다.물론 브라우저도 이런 요구사항들을 반영하며 빠르게 변화하고 있다. 하지만 그것보다 훨씬 빠른 속도로 자바스크립트 생태계가 변화하고 복잡해지고 있는거다. 그래서 그 간극을 메우기 위한 느낌이라고 볼 수 있다.바로 종속성 그래프가 있기 때문에 이것을 기반으로 번들파일에 여러 최적화를 도입할 수 있다. 최적화는 예를들면 이런 것들이다.<ul><li id="1f06">코드 분할</li><li id="c63f">CSS 인라이닝</li><li id="25e1">HMR</li><li id="f16e">웹브라우저 하위 호환성 보장</li><li id="8240">js 파일 외의 css, html, jpg 등 다양한 자원들까지 처리 가능</li><li id="34b4"><a href="https://so-so.dev/web/tree-shaking-module-system/" rel="noopener ugc nofollow" target="_blank">트리쉐이킹</a></li><li id="e9f0">사용하지 않는 소스코드 제거</li><li id="5ee2">그외 여러가지 자동화</li></ul>번들링을 해주는 도구는 Webpack과 Parcel.js, rollupjs, esbuild, 올가미 등이 있다.<h2 id="36f3"><a href="https://webpack.js.org/concepts/" rel="noopener ugc nofollow" target="_blank">웹팩</a>과 <a href="https://rollupjs.org/" rel="noopener ugc nofollow" target="_blank">롤업</a></h2>HMR등 강력한 기능을 탑재했던 Webpack은 수년동안 번들러중의 원탑이었다. 그러나 시간이 지나면서 더 빠르고 새로운 환경에 걸맞는 도구들이 나오기 시작했다.여러 번들러 도구들의 역사와 비교는 <a href="https://bepyan.github.io/blog/2023/bundlers" rel="noopener ugc nofollow" target="_blank">이 글</a>을, Webpack과 rollupjs의 차이에 대해서는 <a href="https://yoon-dumbo.tistory.com/entry/%EB%A1%A4%EC%97%85%EA%B3%BC-%EC%9B%B9%ED%8C%A9%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90-rollup-vs-webpack" rel="noopener ugc nofollow" target="_blank">이 글</a>을 통해 보시면 도움이 될 것이다. 나는 이 보다 더 잘 설명할 수 없고 다양한 도구를 다뤄보지는 못했다.이 글에서는 롤업을 사용해서 간단한 Vue3 번들을 만들어 보려고 한다.처음부터 ES6 기반으로 만들어진 롤업은 좀 더 가볍고 빠르다. 강력한 개발서버를 제공하는 Vite가 번들링을 롤업으로 사용하면서 더 유명해진것 같다.<h2 id="ce3d">롤업이란 🍣</h2><blockquote>롤업은 작은 코드 조각을 라이브러리나 애플리케이션과 같이 더 크고 복잡한 것으로 컴파일하는 JavaScript용 모듈 번들러입니다. 이 번들러는 CommonJS 및 AMD와 같은 이전의 고유한 솔루션 대신 JavaScript ES6 개정판에 포함된 코드 모듈에 대한 새로운 표준 형식을 사용합니다. ES 모듈을 사용하면 자주 사용하는 라이브러리에서 가장 유용한 개별 기능을 자유롭고 원활하게 결합할 수 있습니다. 언젠가는 모든 곳에서 기본적으로 이 기능을 사용할 수 있게 되겠지만, 롤업을 사용하면 지금 바로 사용할 수 있습니다. <a href="https://rollupjs.org/introduction/#installation" rel="noopener ugc nofollow" target="_blank">via rollup.js#installation</a></blockquote>Vue3 번들링을 위해 사용하게 될 롤업의 기능들은 아래와 같다.<ul><li id="fce5">vue</li><li id="c1b7">sass</li><li id="b6b7">copy</li><li id="9fd5">dynamic import 지원을 위한것</li><li id="36b7">chunk split</li><li id="7584">babel</li></ul>먼저 롤업을 글로벌로 설치한다.<pre>$ npm install --global rollup</pre>프로젝트를 하나 만들고 몇가지 파일을 생성한다.<pre>- assets - styles - reset.scss - src - hello.vue - index.js</pre>단순히 hello!를 출력하는 뷰파일을 패키징해서 제공하려고 한다.<code>hello.vue</code> 를 간단히 작성한다.<pre>&lt;template&gt; &lt;div&gt; Hello! &lt;/div&gt; &lt;/template&gt; &lt;style scoped lang='scss'&gt; $color-primary: #5c7cfa; div { color: $color-primary; } &lt;/style&gt;</pre>엔트리파일로 사용할 <code>index.js</code>를 작성한다.<pre>import Hello from './src/hello.vue';export { Hello }</pre><code>package.json</code> 파일을 작성한다.<pre>{ "name": "rollup-study", "version": "1.0.0", "description": "Project for roll-up study", "files": [ "dist" ], "main": "/dist/index.js", "module": "/dist/index.es.js", "scripts": { "build": "rollup --config" }, "keywords": [ "rollup.js" ], "author": "guruahn@gmail.com", "license": "ISC" }</pre>오늘 실험에서 중요한 필드는 아래와 같다.<ul><li id="1465"><code>main</code> : <code>main</code> 필드는 패키지 사용자가 패키지를 사용할 때 진입 되는 경로입니다. <code>/dist/index.js</code> 로 해두자.</li><li id="a143"><code>module</code> : ES6 호환 환경에서 패키지를 사용할 경우를 대비하여 <code>module</code>도 <code>/dist/index.es.js</code> 라고 해두자.</li><li id="58e5"><code>files</code> : <code>files</code> 필드는 패키지가 설치될 때 포함될 항목들을 저장하는 필드다. 우리는 dist 폴더에 사용자가 사용할 파일만 변경 혹은 그대로 저장할 거다. 이렇게 설정하면 불필요한 파일이 사용자의 node_modules 폴더에 저장되지 않을거다.</li><li id="868c"><code>scripts.build</code> : <a href="https://rollupjs.org/command-line-interface/" rel="noopener ugc nofollow" target="_blank">cli 명령어</a>로 rollup — config (혹은 -c) 라고 했다. 뒤에 파일이름을 사용하면 해달 파일을 설정파일로 하겠다는 뜻이다. 파일이름이 없고 위와 같이 되어있다면 자동으로 다음과 같은 우선순위로 파일을 로딩한다. <code>rollup.config.mjs -&gt; rollup.config.cjs -&gt; rollup.config.js</code></li></ul><code>package.json</code><a href="https://beomy.github.io/tech/etc/package-json/" rel="noopener ugc nofollow" target="_blank">의 다른 필드들에 대한 설명은 이곳</a>에서 보시오.<h2 id="a067">롤업설정</h2>롤업 설정 <code>rollup.config.js</code> 은 일단 아래와 같이 시작 해보자.<h2 id="abcf">input / output</h2><pre>const pkg = JSON.parse(readFileSync('package.json', {encoding: 'utf8'})); export default [{ input: './index.js', output: [ { file: pkg.main, format: 'umd', name: 'rollupStudy', globals: { vue: 'Vue', }, }, { file: pkg.module, format: 'es', }, ], }]</pre>이렇게 <code>input</code> , <code>output</code> 두 가지 필드가 있다.<ul><li id="dd0e"><code>input</code> : 번들의 진입점(entry points). 여러개인 경우 배열 혹은 객체로 표현할 수 있다.</li><li id="6b83"><code>output</code> : 청크파일 생성 옵션.</li></ul><code>output</code>에 대해 좀 더 자세히 보면<ul><li id="b8c2">file : 저장될 파일 경로 및 이름.</li><li id="eb71">format : amd, cjs, es, iife, umd, system 중 하나가 될 수 있다.</li><li id="7d3d">globals : umd/iife 번들에서 외부 가져오기에 필요한 id: 변수 이름 쌍을 지정한다.</li><li id="e80a">name: umd/iife 번들에서 값을 export 할 경우 필수.</li></ul><h2 id="ee2c">external</h2>우리가 번들링할 rollup-study 가 의존하고 있는 외부 패키지가 있다면 해당 패키지의 이름을 명시해야 한다. <code>rollup.config.js</code> 에 아래 설정을 추가한다.<pre>external: [ 'vue', ...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {}), ]</pre><code>external</code> 필드에 패키지 이름들을 일일이 열거하기 쉽지 않을 수 있기 때문에 <code>package.json</code> 명시된 패키지 이름들을 자동으로 가져올 수 있도록 했다. vue는 별도로 명시되어있지 않아서 직접 추가했다.<h2 id="abcc">plugins</h2>롤업에서 제공하지 않는 수 많은 기능들은 <a href="https://rollupjs.org/tutorial/#using-plugins" rel="noopener ugc nofollow" target="_blank">플러그인</a>을 통해 확장할 수 있다. 우리는 아래와같은 플러그인을 사용할 것이다.<pre>plugins: [ vue({ target: 'node', preprocessStyles: true, preprocessOptions: { sass: { // sass 적용 includePaths: ['./node_modules'], }, }, transformAssetUrls: true, }), resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.svg'], }), commonjs(), scss(), babel({ exclude: 'node_modules/**', extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.svg'], babelHelpers: 'bundled', presets: [ [ '@babel/preset-env' ], ], }), copy({ targets: [ { src:'assets/styles/reset.css', dest: 'dist/assets/css' } ] }), ] }</pre><ul><li id="37a2"><code>vue</code> : rollup-plugin-vue 설치가 필요하다. SSR인경우 target 값은 node로 설정. preprocess 관련 옵션은 sass 적용을 위해 필요하다.</li><li id="25aa"><code>resolve</code> : @rollup/plugin-node-resolve 설치가 필요. Node.js가 <code>node_modules</code> 에 있는 써드파티 모듈들을 사용하기 위한 <a href="https://nodejs.org/api/modules.html#modules_all_together" rel="noopener ugc nofollow" target="_blank">특정 알고리즘</a>으로 모듈을 찾는 플러그인.</li><li id="7dfd"><code>commonjs</code> : @rollup/plugin-commonjs 설치가 필요. CommonJS 모듈을 ES6로 변환하여 롤업 번들에 포함할 수 있도록 하는 롤업 플러그인.</li><li id="8284"><code>scss</code> : rollup-plugin-scss 설치가 필요.</li><li id="a107"><code>babel</code> : @rollup/plugin-babel 설치가 필요.</li><li id="bad5"><code>copy</code> : rollup-plugin-copy 설치가 필요. 특정 파일을 그대로 번들링에 포함시키고 싶을때 사용.</li></ul><h2 id="3e28">결과</h2>아래와 같은 파일이 /dist 폴더에 생성된다.<pre>- dist - assets - css - reset.css - output-b307511b.css - index.js - index.es.js</pre>이제 여기서부터가 시작이다. 설명은 장황했지만, 다소 간단한 설정으로 패키징을 위한 많은 일을 자동화 할 수 있게 되었다. 앞으로 청크 파일 분리, 다이나믹 임포트 등 다양한 기능들을 추가할때마다 롤업 설정을 변경해야 할 것이다.<h2 id="1399">참고문서</h2><ul><li id="b986"><a href="https://rollupjs.org/" rel="noopener ugc nofollow" target="_blank">Rollup.js</a></li><li id="c470"><a href="https://velog.io/@sian/Vue%EB%A1%9C-%EB%A7%8C%EB%93%A0-Design-system%EC%9D%84-Rollup%EC%9C%BC%EB%A1%9C-%EB%B2%88%EB%93%A4%EB%A7%81-%ED%95%B4%EB%B3%B8-%ED%9B%84%EA%B8%B0" rel="noopener ugc nofollow" target="_blank">Vue로 만든 UI 라이브러리를 Rollup으로 번들링 해본 후기</a></li><li id="90e5"><a href="https://beomy.github.io/tech/etc/package-json/" rel="noopener ugc nofollow" target="_blank">[ETC] package.json 톺아보기</a></li><li id="e6fd"><a href="http://Tree Shaking과 Module System" rel="noopener ugc nofollow" target="_blank">Tree Shaking과 Module System</a></li></ul></div></div>

Stories by Jeong Woo Ahn on Medium

Jeongwoo Ahn

현 시대 프론트엔드 개발자들은 자연스럽게 코드 에디터를 열고 수백 수천개의 컴포넌트 중 수정이 필요한 컴포넌트를 찾아 수정을 하고 새로운 컴포넌트를 만들고, 그 컨포넌트를 자유자재로 조합한다. 더 나아가 외부 프로젝트에 공유를 하기 위해 패키징을 하며 패키징된 외부 프로젝트를 우리 프로젝트에 가져와 설치를 한다.
10년 전의 페이지에 삽입되던 몇 백줄의 자바스크립트와는 비교도 할 수 없을 정도로 많은 양의 자바스크립트 모듈들이 어떻게 이렇게 손쉽게 분리, 통합되고 조합될 수 있었을까.
누군가에게는 당연한 이야기일지 모르지만 그 시절부터 개발을 해오던 나로서는 자바스크립트는 그때와는 완전히 다른 무언가로 인식된다. 그 사이에 도대체 무슨일이 있었는지 가늠이 안될 때도 있다.
<직업으로서의 소설가>라는 에세이에서 무라카미 하루키는 삼십여년 전 어쩌다가 쓰게되어버린 첫 소설을 유명 문학잡지 <군조> 신춘문예에 응모를 했다. 얼마 후 잡지사에서 연락이 와 신인상 후보에 올랐다는 연락을 받게 된다. 그때 하루키는 이런 생각을 했다고 한다. “틀림없이 나는 <군조>신인상을 탈 것이라고, 그리고 소설가가 되어 어느 정도의 성공을 거둘것이라고, 심히 건방진 소리 같지만, 나는 왠지 그렇게 확신했습니다.”
이 구절을 읽고 저는 상당히 놀랐다. 5년 후의 내 커리어에 대해서도 불안이 가득한데 말이다. 그리고 10년전의 자바스크립트는 아마 30년 전의 하루키와 지금의 하루키가 다른 것 만큼이나 달라졌을 텐데. 10년 전에 제가 자바스크립트에 대해 하루키처럼 이런 직관을 할 수 있었다면 어땠을까. 자바스크립트 그 자신도 상상 못했을 거다. (축약된 자바스크립트 역사)
죄송. 말도 안되는 얘기였다.ㅎㅎ 아무튼 자바스크립트는 그 자신과 환경이 아주 빠르게 변화했고 복잡도가 높아졌다. 우리가 지금과 같이 많고 많은 모듈을 손쉽게 다룰 수 있게된것은 번들러 덕분이다. 그렇다면 자바스크립트 번들러는 도대체 무슨일을 하는 걸까.
번들러는 도대체 무슨일을 하는 걸까 📦
자바스크립트 번들러는 번들을 생성한다. 번들은 웹 브라우저에 제공되도록 최적화된 정적파일이다. 우리가 보통 작성하는 모듈은 복잡한 프론트엔드 시스템과 개발자를 위해 만들어진 구조이다. 브라우저 입장에서 작성된 것이 아니다. 브라우저 입장에서는 중복도 많고 파일 수도 너무 많다. 브라우저에서 효율적으로 다룰 수 있도록 최적화된 정적파일을 만드는 과정이 필요하고 그것이 번들이다.
최적화를 위해 번들러는 종속성 그래프를 만든다. 최초 진입점에서 시작해 거기서 참조하는 모든 종속성과 그 종속 대상의 종속성을 모두 순회한다. 의존성 그래프를 통해 번들러는 앱의 어느 위치에서 무엇이 사용되는지 정확히 알 수 있다.
처음에 프론트엔드 규모가 작을 때에는 모든 모듈들을 진입점에 파일 하나로 뭉쳐서 만들면 충분했다. 이제는 그러기에는 너무 커졌고 번들 과정에 최적화를 위한 많은 요구사항들이 반영이 되었다.
물론 브라우저도 이런 요구사항들을 반영하며 빠르게 변화하고 있다. 하지만 그것보다 훨씬 빠른 속도로 자바스크립트 생태계가 변화하고 복잡해지고 있는거다. 그래서 그 간극을 메우기 위한 느낌이라고 볼 수 있다.
바로 종속성 그래프가 있기 때문에 이것을 기반으로 번들파일에 여러 최적화를 도입할 수 있다. 최적화는 예를들면 이런 것들이다.
코드 분할
CSS 인라이닝
HMR
웹브라우저 하위 호환성 보장
js 파일 외의 css, html, jpg 등 다양한 자원들까지 처리 가능
트리쉐이킹
사용하지 않는 소스코드 제거
그외 여러가지 자동화
번들링을 해주는 도구는 Webpack과 Parcel.js, rollupjs, esbuild, 올가미 등이 있다.
웹팩과 롤업
HMR등 강력한 기능을 탑재했던 Webpack은 수년동안 번들러중의 원탑이었다. 그러나 시간이 지나면서 더 빠르고 새로운 환경에 걸맞는 도구들이 나오기 시작했다.
여러 번들러 도구들의 역사와 비교는 이 글을, Webpack과 rollupjs의 차이에 대해서는 이 글을 통해 보시면 도움이 될 것이다. 나는 이 보다 더 잘 설명할 수 없고 다양한 도구를 다뤄보지는 못했다.
이 글에서는 롤업을 사용해서 간단한 Vue3 번들을 만들어 보려고 한다.
처음부터 ES6 기반으로 만들어진 롤업은 좀 더 가볍고 빠르다. 강력한 개발서버를 제공하는 Vite가 번들링을 롤업으로 사용하면서 더 유명해진것 같다.
롤업이란 🍣
롤업은 작은 코드 조각을 라이브러리나 애플리케이션과 같이 더 크고 복잡한 것으로 컴파일하는 JavaScript용 모듈 번들러입니다. 이 번들러는 CommonJS 및 AMD와 같은 이전의 고유한 솔루션 대신 JavaScript ES6 개정판에 포함된 코드 모듈에 대한 새로운 표준 형식을 사용합니다. ES 모듈을 사용하면 자주 사용하는 라이브러리에서 가장 유용한 개별 기능을 자유롭고 원활하게 결합할 수 있습니다. 언젠가는 모든 곳에서 기본적으로 이 기능을 사용할 수 있게 되겠지만, 롤업을 사용하면 지금 바로 사용할 수 있습니다. via rollup.js#installation
Vue3 번들링을 위해 사용하게 될 롤업의 기능들은 아래와 같다.
vue
sass
copy
dynamic import 지원을 위한것
chunk split
babel
먼저 롤업을 글로벌로 설치한다.
$ npm install --global rollup
프로젝트를 하나 만들고 몇가지 파일을 생성한다.
- assets
 - styles
 - reset.scss
- src
 - hello.vue
- index.js
단순히 hello!를 출력하는 뷰파일을 패키징해서 제공하려고 한다.
hello.vue 를 간단히 작성한다.
<template>
 <div>
 Hello!
 </div>
</template> 
<style scoped lang='scss'>
$color-primary: #5c7cfa;
div { 
 color: $color-primary; 
}</style>
엔트리파일로 사용할 index.js를 작성한다.
import Hello from './src/hello.vue';
export { Hello }
package.json 파일을 작성한다.
{
 "name": "rollup-study",
 "version": "1.0.0",
 "description": "Project for roll-up study",
 "files": [
 "dist"
 ],
 "main": "/dist/index.js",
 "module": "/dist/index.es.js",
 "scripts": {
 "build": "rollup --config"
 },
 "keywords": [
 "rollup.js"
 ],
 "author": "guruahn@gmail.com",
 "license": "ISC"
}
오늘 실험에서 중요한 필드는 아래와 같다.
main : main 필드는 패키지 사용자가 패키지를 사용할 때 진입 되는 경로입니다. /dist/index.js 로 해두자.
module : ES6 호환 환경에서 패키지를 사용할 경우를 대비하여 module도 /dist/index.es.js 라고 해두자.
files : files 필드는 패키지가 설치될 때 포함될 항목들을 저장하는 필드다. 우리는 dist 폴더에 사용자가 사용할 파일만 변경 혹은 그대로 저장할 거다. 이렇게 설정하면 불필요한 파일이 사용자의 node_modules 폴더에 저장되지 않을거다.
scripts.build : cli 명령어로 rollup — config (혹은 -c) 라고 했다. 뒤에 파일이름을 사용하면 해달 파일을 설정파일로 하겠다는 뜻이다. 파일이름이 없고 위와 같이 되어있다면 자동으로 다음과 같은 우선순위로 파일을 로딩한다. rollup.config.mjs -> rollup.config.cjs -> rollup.config.js
package.json의 다른 필드들에 대한 설명은 이곳에서 보시오.
롤업설정
롤업 설정 rollup.config.js 은 일단 아래와 같이 시작 해보자.
input / output
const pkg = JSON.parse(readFileSync('package.json', {encoding: 'utf8'}));
export default [{
 input: './index.js',
 output: [
 {
 file: pkg.main,
 format: 'umd',
 name: 'rollupStudy',
 globals: {
 vue: 'Vue',
 },
 },
 {
 file: pkg.module,
 format: 'es',
 },
 ],
}]
이렇게 input , output 두 가지 필드가 있다.
input : 번들의 진입점(entry points). 여러개인 경우 배열 혹은 객체로 표현할 수 있다.
output : 청크파일 생성 옵션.
output에 대해 좀 더 자세히 보면
file : 저장될 파일 경로 및 이름.
format : amd, cjs, es, iife, umd, system 중 하나가 될 수 있다.
globals : umd/iife 번들에서 외부 가져오기에 필요한 id: 변수 이름 쌍을 지정한다.
name: umd/iife 번들에서 값을 export 할 경우 필수.
external
우리가 번들링할 rollup-study 가 의존하고 있는 외부 패키지가 있다면 해당 패키지의 이름을 명시해야 한다. rollup.config.js 에 아래 설정을 추가한다.
external: [
 'vue',
 ...Object.keys(pkg.dependencies || {}),
 ...Object.keys(pkg.peerDependencies || {}),
]
external 필드에 패키지 이름들을 일일이 열거하기 쉽지 않을 수 있기 때문에 package.json 명시된 패키지 이름들을 자동으로 가져올 수 있도록 했다. vue는 별도로 명시되어있지 않아서 직접 추가했다.
plugins
롤업에서 제공하지 않는 수 많은 기능들은 플러그인을 통해 확장할 수 있다. 우리는 아래와같은 플러그인을 사용할 것이다.
plugins: [
 vue({
 target: 'node',
 preprocessStyles: true,
 preprocessOptions: {
 sass: { // sass 적용
 includePaths: ['./node_modules'],
 },
 },
 transformAssetUrls: true,
 }),
 resolve({
 extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.svg'],
 }),
 commonjs(),
 scss(),
 babel({
 exclude: 'node_modules/**',
 extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue', '.svg'],
 babelHelpers: 'bundled',
 presets: [
 [
 '@babel/preset-env'
 ],
 ],
 }),
 copy({
 targets: [
 {
 src:'assets/styles/reset.css', dest: 'dist/assets/css'
 }
 ]
 }),
]}
vue : rollup-plugin-vue 설치가 필요하다. SSR인경우 target 값은 node로 설정. preprocess 관련 옵션은 sass 적용을 위해 필요하다.
resolve : @rollup/plugin-node-resolve 설치가 필요. Node.js가 node_modules 에 있는 써드파티 모듈들을 사용하기 위한 특정 알고리즘으로 모듈을 찾는 플러그인.
commonjs : @rollup/plugin-commonjs 설치가 필요. CommonJS 모듈을 ES6로 변환하여 롤업 번들에 포함할 수 있도록 하는 롤업 플러그인.
scss : rollup-plugin-scss 설치가 필요.
babel : @rollup/plugin-babel 설치가 필요.
copy : rollup-plugin-copy 설치가 필요. 특정 파일을 그대로 번들링에 포함시키고 싶을때 사용.
결과
아래와 같은 파일이 /dist 폴더에 생성된다.
- dist
 - assets
 - css
 - reset.css
 - output-b307511b.css
 - index.js
 - index.es.js
이제 여기서부터가 시작이다. 설명은 장황했지만, 다소 간단한 설정으로 패키징을 위한 많은 일을 자동화 할 수 있게 되었다. 앞으로 청크 파일 분리, 다이나믹 임포트 등 다양한 기능들을 추가할때마다 롤업 설정을 변경해야 할 것이다.
참고문서
Rollup.js
Vue로 만든 UI 라이브러리를 Rollup으로 번들링 해본 후기
[ETC] package.json 톺아보기
Tree Shaking과 Module System
이 글이 마음에 드셨다면 👏🏽👏🏽와 커피한잔 후원하기 (카카오페이), 이메일로 소식을 받아보고 싶으시다면 ✉️ 이메일 구독하기 해주세요.

Vue3 컴포넌트 번들링 하기

댓글