rollup 정리

라이브러리를 만들기 위해 사용한 rollup에 대해 정리해보자
rollup은 javascript 번들러이다
주로 라이브러리를 만드는데 사용되며 모듈로 번들링하기 때문에 treeshaking에 강점이 있다

참고

• https://so-so.dev/web/tree-shaking-module-system/

// rollup.config.js
import Ts from "rollup-plugin-typescript2";
import image from "@rollup/plugin-image";

export default {
  input: ["src/index.ts"],
  output: {
    dir: "dist",
    format: "esm",
    sourcemap: true,
    preserveModules: true, // preserve source folder
  },
  plugins: [Ts(), image()],
  external: [
    "@emotion/styled",
    "@mui/material",
    "@emotion/react",
    "immer",
    "lodash",
    "react",
    "react-media-recorder",
    "react-router-dom",
    "react-toastify",
    "react-loader-spinner",
    "react-cookie",
  ],
};

• 번들링 설정파일이다
• 이미지를 import해서 사용하기 위해 @rollup/plugin-image 플러그인을 사용하였고
• 타입스크립트를 사용하고 있기 때문에 rollup-plugin-typescript2 플러그인을 사용하였다

// package.json
{
  // ...
  "scripts": {
    "build": "rollup -c",
    "dev": "rollup -c --watch",
  },
}

• rollup을 설치하면 node_modules/bin에 rollup 커맨드 라인이 추가된다
• rollup -c : 빌드하기
  • -c : Use this config file (if argument is used but value is unspecified, defaults to rollup.config.js)
• rollup -c --watch : 빌드 후 watch 모드로 동작
  • watch모드에선 변화가 있다면 다시 빌드를 함
• 참고
  • https://rollupjs.org/command-line-interface/#command-line-flags