Rollup

Node.js

# Node.js 버전 확인
➜ node -v
v20.9.0

# v20.9.0 가 설치되어 있지 않다면
➜ nvm install 20.9.0

# v20.9.0 를 사용하고 있지 않다면
➜ nvm use 20.9.0

# Node.js 버전 다시 확인
➜ node -v
v20.9.0

npm

# npm 버전 확인
➜ npm -v
10.2.1

# 최신 버전 npm 으로 업그레이드 
➜ npm i [email protected] -g

# npm 버전 다시 확인
➜ npm -v
10.2.1

pnpm

# pnpm 설치 확인 및 버전 확인
➜ pnpm -v
8.10.0

# 최신 버전 pnpm 으로 업그레이드 
➜ npm i [email protected] -g

# pnpm 설치 다시 확인 및 버전 다시 확인
➜ pnpm -v
8.10.0

프로젝트 생성

➜ mkdir rollup-example

➜ cd rollup-example

➜ pnpm init

➜ corepack use [email protected]

➜ pnpm add rollup -D

➜ code .

두개의 코드 조각 작성하기

// rollup-example/src/plusOne.js

const plusOne = (number) => number + 1;

export default plusOne;

// rollup-example/src/main.js

import plusOne from "./plusOne.js";

export default function main() {
  console.log(plusOne(1));
}

번들링하기

// rollup-example/rollup.config.js

module.exports = {
  input: "src/main.js",
  output: {
    file: "dist/bundle.js",
    format: "cjs",
  },
};

{
  "name": "rollup-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "rollup -c",
    "test": "echo \\"Error: no test specified\\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "packageManager": "[email protected]+sha1.77d568bacf41eeefd6695a7087c1282433955b5c",
  "devDependencies": {
    "rollup": "^4.2.0"
  }
}

➜ pnpm build

번들링 결과를 여러개의 모듈 시스템 방식으로 만들기

// rollup-example/rollup.config.js

module.exports = {
  input: "src/main.js",
  output: [
    {
      file: "dist/bundle.js",
      format: "cjs", // commonjs
    },
    {
      file: "dist/bundle.mjs",
      format: "es", // esm, module
    },
  ],
  plugins: [],
};

➜ pnpm build

commonjs 방식으로 작성된 모듈을 import 문으로 가져오려면