Rollup으로 라이브러리 만들기

1. 라이브러리 만들기

프로젝트가 많아지며 공통으로 사용할 코드들을 분리해두고

각 프로젝트에 적용하여 사용해야 하는 상황이 생겼습니다.

 

NPM에 올려서 사용할 것도 아니고

내부적으로 사용할 목적이기에

min.js 파일로 만들어서 적용해보려고 합니다.

 

1-1. Rollup 설치

기본적인 npm 사용을 위해

명령어로 node_modules를 생성합니다.

npm i

 

 

rollup 번들러를 사용합니다.

npm install rollup rollup-plugin-terser

 

• [src]
  • util.js (min.js로 만들 파일)
• package.json
• rollup.config.js

폴더 구조를 이렇게 만듭니다.

 

1-2. rollup.config.js

import { terser } from "rollup-plugin-terser";

export default [
  {
    input: "src/Util.js",
    output: {
      file: "dist/util.min.js",
      format: "esm", // universal module: works with CommonJS, AMD, script tag
      name: "Util", // global var name when included via <script>
      // exports: "default",
    },
    plugins: [
      terser(),
    ],
    external: [],
  },
];

 

간단하게 만드는 것이라 많은 설정이 필요하진 않았습니다.

이 설정대로 만들면 dist 폴더에 util.min.js 가 생깁니다.

 

format은 esm 으로 했습니다. 다른 설정으로도 가능합니다. (cjs 등) 

 

※ 참고, 모듈 시스템 

https://deemmun.tistory.com/86

번들러 파헤치기 1 - 모듈 시스템의 발전과 역사 (commonJS, AMD, UMD, ESM-esmodule)

 

 

exports를 default로 하면 여러 파일을 합쳐서 export를 하기 어렵더군요.

export { a, b }

export default a;

 

1-3. 생성

src 폴더 밑에 이렇게 파일들을 만들겠습니다.

 

Util.js, Sum.js

 

1-3-1. Sum.js

여긴 간단히 sum 함수를 만들겠습니다.

const Sum = {
  toSum(arr) {
    let res = 0;
    for (let i = 0; i < arr.length; i++) {
      res += arr[i];
    }
    return res;
  },
  // 추가 작성
};
export default Sum;

 

1-3-2. Util.js

import Sum from "./Sum";
export { Sum };

 

이렇게 작성합니다.

 

1-3-3. min.js

npx rollup -c

 

하고 min.js를 생성합니다.

 

이렇게 만들어진 파일을 다른 프로젝트 lib에 넣고 사용합니다.

공통적으로 사용할 코드만 담았기에

여러 프로젝트에서 사용할 수 있을겁니다.

 

---

※ 참고, 번들러의 발전과 역사에 관한 글

 

https://deemmun.tistory.com/87

번들러 파헤치기 2 - 번들러의 발전과 역사 (HTTP/1.1, webpack, rollup, parcel, snowpack, esbuild, vite, turbopack)