Jenis-jenis rollup yang paling utama adalah lima format output bawaan Rollup.js: AMD, CJS, ESM, IIFE, dan UMD. Format ESM (es) menjadi default sejak Rollup 3.0 yang rilis April 2023, dan merupakan target paling bersih untuk tree-shaking penuh di library JavaScript.

Variasi rollup tidak berhenti di format output. Karakter sebuah build rollup juga dibentuk oleh plugin yang dipasang dan oleh konteks penggunaannya, apakah untuk membundel library yang akan didistribusikan ke konsumen lain, atau untuk membundel aplikasi web utuh. Memilih jenis rollup pada akhirnya berarti memilih tiga hal sekaligus: format, plugin, dan target konsumsi.

Artikel ini memetakan kelima format, plugin-plugin yang paling sering membentuk konfigurasi, dan posisi Rollup di antara bundler JavaScript modern lain seperti Webpack, Esbuild, dan Parcel.

Lima Format Output Inti dalam Rollup

Rollup punya lima format output resmi yang diatur lewat opsi output.format di rollup.config.js: amd, cjs, es (alias esm), iife, dan umd. Kelimanya menjawab kebutuhan runtime JavaScript yang berbeda, dari Node.js sampai script tag di browser. Memilih di antara mereka adalah keputusan pertama yang akan membentuk sisa konfigurasi Anda.

ESM dan CJS: Pilar Modul JavaScript

ESM adalah output bawaan dan target paling bersih untuk library modern seperti Vue, Svelte, Preact, D3, dan Three.js. Format ini mendukung tree-shaking penuh, artinya kode yang tidak dipakai benar-benar dibuang dari bundle akhir. CJS dihasilkan dengan output.format: ‘cjs’ dan masih dibutuhkan saat modul akan dikonsumsi di runtime Node lama atau tooling seperti Jest dan Mocha.

IIFE dan UMD: Format untuk Browser dan Distribusi Library

IIFE dan UMD sama-sama menjalankan kode langsung di browser tanpa module loader, tapi cara mereka mengekspos dirinya berbeda. Pilihannya tergantung pada bagaimana konsumen akan memuat library Anda.

• IIFE membungkus bundle dalam fungsi anonim yang langsung dieksekusi, cocok untuk skrip sederhana yang dipasang via script tag.
• UMD mengekspos variabel global seperti window.MyLib, sehingga satu file bisa dipakai di browser, AMD, dan CJS sekaligus, ideal untuk distribusi via CDN.

AMD: Format Warisan yang Mulai Ditinggalkan

AMD pernah dominan bersama RequireJS, namun pada 2025 hampir tidak ada proyek baru yang memilihnya sebagai target build.

Plugin yang Menentukan Karakter Rollup Anda

Jenis rollup tidak ditentukan hanya oleh format output. Plugin yang Anda pasang membentuk perilaku bundler itu sendiri, mulai dari cara Rollup menemukan modul sampai cara ia menerjemahkan sintaks. Di sinilah “jenis rollup” mulai punya lebih banyak variasi daripada sekadar daftar format resmi.

Plugin resmi dipublikasikan dengan scope @rollup/plugin-* di npm. Empat yang paling sering dipasang adalah @rollup/plugin-node-resolve, @rollup/plugin-commonjs, @rollup/plugin-typescript, dan @rollup/plugin-babel. Dua yang pertama menutup sekitar 80% kebutuhan library pada umumnya: node-resolve memungkinkan Rollup menemukan modul di folder node_modules, sementara commonjs menerjemahkan modul CJS agar bisa di-bundle bersama ESM. Rollup punya lebih dari 60 plugin resmi yang terdaftar di rollupjs.org/plugin-collection, dibagi ke dalam kategori resolver, transformer, loader, dan optimizer. Plugin bekerja lewat tiga hook internal Rollup: build hook saat membaca source, output hook saat menghasilkan output, dan render hook saat memformat bundle akhir.

Rollup versus Bundler JavaScript Modern Lainnya

Rollup 3.0 rilis April 2023 membawa perubahan besar pada API config, dan statusnya sebagai bundler default untuk build production di Vite sejak Vite 2 ke atas tetap bertahan. Library besar yang memakai Rollup antara lain Vue 3, Svelte, Preact, D3, dan Three.js, bukti bahwa output Rollup dianggap paling bersih untuk distribusi ke konsumen.

Dibandingkan Webpack, output Rollup umumnya lebih kecil karena tree-shaking berbasis ESM berjalan lebih agresif. Webpack unggul di fitur aplikasi besar seperti code splitting per-route dan HMR yang lebih matang, tapi untuk library yang targetnya adalah node_modules konsumen, output Rollup lebih ramah. Esbuild diklaim 10 sampai 100 kali lebih cepat dalam transformasi mentah, namun Rollup menang dari sisi kompatibilitas plugin dan kualitas bundle akhir untuk library.

Parcel menawarkan zero-config sebagai nilai jualnya, tapi ekosistem plugin-nya masih di bawah Rollup untuk kasus distribusi library JavaScript. Untuk aplikasi web, Vite menggabungkan dev server cepat berbasis Esbuild untuk development dengan build production Rollup, kombinasi yang membuat keduanya saling melengkapi, bukan saling menggantikan.

Memilih Jenis Rollup yang Tepat untuk Proyek Anda

Keputusan memilih format dan plugin paling masuk akal bila dilihat dari target konsumsi bundle. Tiga skenario umum muncul di hampir semua proyek:

• Library modern dengan target Node 14+ dan browser modern: prioritaskan ESM sebagai bundle utama, lalu tambahkan CJS sebagai fallback. Pola ini dipakai Vue dan Svelte.
• Aplikasi web: gunakan Rollup lewat Vite untuk mendapat dev server cepat dan HMR, dengan build production tetap dijalankan oleh Rollup.
• Skrip sederhana yang dipasang via tag script: pilih IIFE atau UMD dengan satu variabel global agar mudah di-include dari CDN.

Untuk semua skenario, pasang minimal @rollup/plugin-node-resolve dan @rollup/plugin-commonjs. Dua plugin ini memungkinkan Rollup membaca paket CJS dari node_modules dan menerjemahkannya, menutupi sekitar 80% kebutuhan library pada umumnya.

Langkah Awal Memulai dengan Rollup

Memilih jenis rollup berarti memilih format output, plugin, dan konteks proyek sekaligus. Untuk eksperimen pertama, buat rollup.config.js minimal dengan output.format: ‘es’ dan pasang @rollup/plugin-node-resolve, lalu tambahkan satu modul CJS dari node_modules untuk melihat tree-shaking bekerja langsung.