<div id="readability-page-1" class="page"><cite>DarrenKwonDev</cite>
 2021. 12. 20. 21:39
 <div>
 <h4 data-ke-size="size20">초반 세팅</h4>
esm만 지원해도 괜찮은가
<a href="https://antfu.me/posts/publish-esm-and-cjs" target="_blank" rel="noopener">https://antfu.me/posts/publish-esm-and-cjs</a>

알아둬야 하는 것들
By default, Rollup will expect config files to be ES modules and bundle and transpile them and their relative imports to CommonJS before requiring them. - <a href="https://rollupjs.org/guide/en/#using-untranspiled-config-files" target="_blank" rel="noopener">https://rollupjs.org/guide/en/#using-untranspiled-config-files</a>

config-intellisense 세팅
<a href="https://rollupjs.org/guide/en/#config-intellisense" target="_blank" rel="noopener">https://rollupjs.org/guide/en/#config-intellisense</a>

다음과 같이 자동완성이 되는 것을 확인할 수 있습니다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1126" data-origin-height="582">
 
 <img src="https://k.kakaocdn.net/dn/FPy5r/btronJBQEDH/b1R71ZPsk5OJ9onhDKaKdk/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="600" height="310" data-origin-width="1126" data-origin-height="582">
 
 
</figure>


<h4 data-ke-size="size20">각종 옵션들</h4>

preserveModules

preserveModules : true로 설정된 경우 모듈의 구조를 유지하며 빌드합니다. 아래는 preserveModules에 설정을 하지 않은 default 케이스입니다. 이 경우 모든 파일을 하나의 파일에 몰아서 번들링하기 때문에 tree shaking 등에 불리합니다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="290" data-origin-height="70">
 
 <img src="https://k.kakaocdn.net/dn/bpbLCf/btroxkmV44L/EXBe1Km97HZzgGtKweB7G0/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="290" data-origin-height="70">
 
 
</figure>
preserveModules를 활성화한 경우 아래와 같이 모듈 구조를 유지하면서 빌드되는 것을 확인할 수 있습니다.
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="366" data-origin-height="119">
 
 <img src="https://k.kakaocdn.net/dn/GxVAo/btropm7NAFh/zIWDIKtkehk5N3CvkX5h4K/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="366" data-origin-height="119">
 
 
</figure>

<h4 data-ke-size="size20">plugins 구성과 그 사용례들</h4>
모든 플러그인은 다음에서 확인 가능하다 <a href="https://github.com/rollup/plugins" target="_blank" rel="noopener">https://github.com/rollup/plugins</a>

🚨 주의사항
&nbsp;- 몇 몇 플러그인들은 배치 순서가 중요합니다. 유의미한 차이가 있기 때문입니다. 예를 들어 @rollup/plugin-commonjs와 @rollup/plugin-babel가 동시에 사용될 때, commonjs() 플러그인이 babel() 플러그인보다 상단에 위치해야 합니다.

@rollup/plugin-babel
rollup과 babel을 쓰기 위한 플러그인입니다.&nbsp;
<a href="https://github.com/rollup/plugins/tree/master/packages/babel" target="_blank" rel="noopener">https://github.com/rollup/plugins/tree/master/packages/babel</a>
<pre id="code_1640051649055" data-ke-language="javascript" data-ke-type="codeblock"><code>import { babel } from '@rollup/plugin-babel';

const config = {
 input: 'src/index.js',
 output: {
 dir: 'output',
 format: 'esm'
 },
 plugins: [ 
 babel({ babelHelpers: 'bundled' })
 ]
};

export default config;</code></pre>

@rollup/plugin-node-resolve
외부 패키지에 대한 일종의 트리 쉐이킹(이런 용어가 적절한지는 모르겠지만)을 적용하여 우리 모듈을 설치한 이용자들이 패키지 전부를 설치하지 않아도 되도록 조치.
추가로, 대개 node_modules 폴더에 있는 대부분의 패키지는 ESM이 아닌 CJS일 수 있어서 보통 @rollup/plugin-commonjs와 함께 사용됨.
<a href="https://github.com/rollup/plugins/tree/master/packages/node-resolve" target="_blank" rel="noopener">https://github.com/rollup/plugins/tree/master/packages/node-resolve</a>
<pre id="code_1640052151585" data-ke-language="javascript" data-ke-type="codeblock"><code>import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
 input: 'main.js',
 output: {
 file: 'bundle.js',
 format: 'iife',
 name: 'MyModule'
 },
 plugins: [nodeResolve(), commonjs()]
};</code></pre>

@rollup/plugin-commonjs
CJS 모듈을 ES6로 변환하여 롤업 번들링 과정에 포함될 수 있게 도와줍니다. 앞서 언급하였듯 작성된 파일이 ESM을 따를 것으로 예상하고 있습니다.&nbsp;
<a href="https://github.com/rollup/plugins/tree/master/packages/commonjs" target="_blank" rel="noopener">https://github.com/rollup/plugins/tree/master/packages/commonjs</a>


@rollup/plugin-typescript
<a href="https://github.com/rollup/plugins/tree/master/packages/typescript" target="_blank" rel="noopener">https://github.com/rollup/plugins/tree/master/packages/typescript</a>


@rollup/plugin-url
파일을 데이터 data-URL 형태로 가져오는 롤업 플러그인.
설명이 감이 잘 안올 수 있는데 다음과 같은 꼴로 사용할 수 있게 된다고 보면 된다.
<pre id="code_1640053820100" data-ke-language="javascript" data-ke-type="codeblock"><code>// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);
&lt;img src={svg} /&gt;</code></pre>
<a href="https://github.com/rollup/plugins/tree/master/packages/url/#readme" target="_blank" rel="noopener">https://github.com/rollup/plugins/tree/master/packages/url/#readme</a>



<h4 data-ke-size="size20">공식 plugin은 아니지만 사용하는 것들</h4>
rollup-plugin-terser
terser를 활용하여 번들을 minify합니다.
<a href="https://github.com/TrySound/rollup-plugin-terser" target="_blank" rel="noopener">https://github.com/TrySound/rollup-plugin-terser</a>
<pre id="code_1640053435970" data-ke-language="javascript" data-ke-type="codeblock"><code>import { rollup } from "rollup";
import { terser } from "rollup-plugin-terser";

rollup({
 input: "main.js",
 plugins: [terser()],
});</code></pre>

rollup-plugin-peer-deps-external
peerDependencies들을 번들링 결과에 포함하지 않고 externailize합니다. 왜 이런 짓을 하느냐? 우리가 만든 라이브러리를 사용하는 사람이 일반적으로 설치할 것으로 예상되는 peerDependencies는 라이브러리에 포함시키지 않는 것이 번들 크기를 줄이고 중복적인 종속성을 방지할 수 있기 때문이다.
<a href="https://github.com/pmowrer/rollup-plugin-peer-deps-external#readme" target="_blank" rel="noopener">https://github.com/pmowrer/rollup-plugin-peer-deps-external#readme</a>





<h4 data-ke-size="size20">배포</h4>




1. tsconfig 수정과 typing

tsconfig.json 중 다음 내역을 신경써주자

allowJS: false -&gt; true면 d.ts 생성이 안된다고 함. default가 false니까 선언을 안하면 됨
<a href="https://www.typescriptlang.org/tsconfig#noEmit" target="_blank" rel="noopener">noEmit</a>: false -&gt; true면 출력물을 내보내지 않겠다는 것이다. default가 false니까 선언을 안하면 됨
isolatedModules: false -&gt; true면 export로 독립된 external 모듈을 허용하지 않습니다. default가 false니까 선언을 안하면 됨
"declaration": true -&gt; true를 명시해주자.&nbsp; "declarationDir": "프로젝트 빌드 파일의 타이핑 경로", -&gt; 여기에 지정해준 곳에 d.ts 파일이 생기게 됩니다.

<pre id="code_1640063408021" data-ke-language="javascript" data-ke-type="codeblock"><code>tsc --emitDeclarationOnly // 타입 생성</code></pre>


2. package.json 수정

우리가 application을 만들고 있다면 main을 설정해주지만 우리는 모듈을 만들고 있으므로 module을 설정해주자.
프로젝트의 entry point를 등록해두면 된다.
<pre id="code_1640062825288" data-ke-language="javascript" data-ke-type="codeblock"><code>"module": "dist/index.js",</code></pre>

tsconfig.json에 등록한 typing 관련 경로를 package.json의 types 필드에 정의해주자
<pre id="code_1640063117335" data-ke-language="javascript" data-ke-type="codeblock"><code>"types": "dist/types/index.d.ts",</code></pre>



3. 배포
npm publish나 yarn publish를 사용할테지만&nbsp;
좀 더 안전하고 체계적으로 배포를 진행하기 위한 패키지가 존재한다.&nbsp;
<a href="https://github.com/sindresorhus/np" target="_blank" rel="noopener">https://github.com/sindresorhus/np</a>
 
 
 </div></div>

HotHandCoding

DarrenKwon

초반 세팅
esm만 지원해도 괜찮은가
https://antfu.me/posts/publish-esm-and-cjs
 
알아둬야 하는 것들
By default, Rollup will expect config files to be ES modules and bundle and transpile them and their relative imports to CommonJS before requiring them. - https://rollupjs.org/guide/en/#using-untranspiled-config-files
 
config-intellisense 세팅
https://rollupjs.org/guide/en/#config-intellisense
 
다음과 같이 자동완성이 되는 것을 확인할 수 있습니다.
 
 
각종 옵션들
 
preserveModules
 
preserveModules : true로 설정된 경우 모듈의 구조를 유지하며 빌드합니다. 아래는 preserveModules에 설정을 하지 않은 default 케이스입니다. 이 경우 모든 파일을 하나의 파일에 몰아서 번들링하기 때문에 tree shaking 등에 불리합니다.
preserveModules를 활성화한 경우 아래와 같이 모듈 구조를 유지하면서 빌드되는 것을 확인할 수 있습니다.
 
plugins 구성과 그 사용례들
모든 플러그인은 다음에서 확인 가능하다 https://github.com/rollup/plugins
 
 주의사항
 - 몇 몇 플러그인들은 배치 순서가 중요합니다. 유의미한 차이가 있기 때문입니다. 예를 들어 @rollup/plugin-commonjs와 @rollup/plugin-babel가 동시에 사용될 때, commonjs() 플러그인이 babel() 플러그인보다 상단에 위치해야 합니다.
 
@rollup/plugin-babel
rollup과 babel을 쓰기 위한 플러그인입니다. 
https://github.com/rollup/plugins/tree/master/packages/babel
import { babel } from '@rollup/plugin-babel';
const config = {
 input: 'src/index.js',
 output: {
 dir: 'output',
 format: 'esm'
 },
 plugins: [ 
 babel({ babelHelpers: 'bundled' })
 ]
};
export default config;
 
@rollup/plugin-node-resolve
외부 패키지에 대한 일종의 트리 쉐이킹(이런 용어가 적절한지는 모르겠지만)을 적용하여 우리 모듈을 설치한 이용자들이 패키지 전부를 설치하지 않아도 되도록 조치.
추가로, 대개 node_modules 폴더에 있는 대부분의 패키지는 ESM이 아닌 CJS일 수 있어서 보통 @rollup/plugin-commonjs와 함께 사용됨.
https://github.com/rollup/plugins/tree/master/packages/node-resolve
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
 input: 'main.js',
 output: {
 file: 'bundle.js',
 format: 'iife',
 name: 'MyModule'
 },
 plugins: [nodeResolve(), commonjs()]
};
 
@rollup/plugin-commonjs
CJS 모듈을 ES6로 변환하여 롤업 번들링 과정에 포함될 수 있게 도와줍니다. 앞서 언급하였듯 작성된 파일이 ESM을 따를 것으로 예상하고 있습니다. 
https://github.com/rollup/plugins/tree/master/packages/commonjs
 
 
@rollup/plugin-typescript
https://github.com/rollup/plugins/tree/master/packages/typescript
 
 
@rollup/plugin-url
파일을 데이터 data-URL 형태로 가져오는 롤업 플러그인.
설명이 감이 잘 안올 수 있는데 다음과 같은 꼴로 사용할 수 있게 된다고 보면 된다.
// src/index.js
import svg from './image.svg';
console.log(`svg contents: ${svg}`);
<img src={svg} />
https://github.com/rollup/plugins/tree/master/packages/url/#readme
 
 
 
공식 plugin은 아니지만 사용하는 것들
rollup-plugin-terser
terser를 활용하여 번들을 minify합니다.
https://github.com/TrySound/rollup-plugin-terser
import { rollup } from "rollup";
import { terser } from "rollup-plugin-terser";
rollup({
 input: "main.js",
 plugins: [terser()],
});
 
rollup-plugin-peer-deps-external
peerDependencies들을 번들링 결과에 포함하지 않고 externailize합니다. 왜 이런 짓을 하느냐? 우리가 만든 라이브러리를 사용하는 사람이 일반적으로 설치할 것으로 예상되는 peerDependencies는 라이브러리에 포함시키지 않는 것이 번들 크기를 줄이고 중복적인 종속성을 방지할 수 있기 때문이다.
https://github.com/pmowrer/rollup-plugin-peer-deps-external#readme
 
 
 
 
 
배포
 
 
 
 
1. tsconfig 수정과 typing
 
tsconfig.json 중 다음 내역을 신경써주자
 
allowJS: false -> true면 d.ts 생성이 안된다고 함. default가 false니까 선언을 안하면 됨
noEmit: false -> true면 출력물을 내보내지 않겠다는 것이다. default가 false니까 선언을 안하면 됨
isolatedModules: false -> true면 export로 독립된 external 모듈을 허용하지 않습니다. default가 false니까 선언을 안하면 됨
"declaration": true -> true를 명시해주자. 
"declarationDir": "프로젝트 빌드 파일의 타이핑 경로", -> 여기에 지정해준 곳에 d.ts 파일이 생기게 됩니다.
 
tsc --emitDeclarationOnly // 타입 생성
 
 
2. package.json 수정
 
우리가 application을 만들고 있다면 main을 설정해주지만 우리는 모듈을 만들고 있으므로 module을 설정해주자.
프로젝트의 entry point를 등록해두면 된다.
"module": "dist/index.js",
 
tsconfig.json에 등록한 typing 관련 경로를 package.json의 types 필드에 정의해주자
"types": "dist/types/index.d.ts",
 
 
 
3. 배포
npm publish나 yarn publish를 사용할테지만 
좀 더 안전하고 체계적으로 배포를 진행하기 위한 패키지가 존재한다. 
https://github.com/sindresorhus/np

typed-icon를 rollup으로 번들링해서 npm publish하자

댓글