Tentang CommonJS dan ECMAScript Modules (ESM)

IQBAL FARHAN SYUHADA

17 Jun 2024

CommonJS dan ECMAScript Modules (ESM) adalah dua standar untuk modularisasi kode JavaScript yang digunakan dalam pengembangan aplikasi. Meskipun keduanya bertujuan untuk memfasilitasi manajemen dan penggunaan kembali kode, mereka memiliki beberapa perbedaan mendasar. Artikel ini akan membahas perbedaan antara CommonJS dan ECMAScript Modules.

CommonJS

CommonJS adalah spesifikasi untuk modularisasi JavaScript yang awalnya dirancang untuk lingkungan server-side seperti Node.js. Beberapa karakteristik utama CommonJS adalah:

1. Penggunaan require: CommonJS menggunakan fungsi require untuk mengimpor modul. Contoh:

   const moduleA = require('./moduleA');
   

2. Ekspor dengan module.exports atau exports: Untuk mengekspor fungsi, objek, atau variabel dari sebuah modul, CommonJS menggunakan module.exports atau exports. Contoh:

   module.exports = function() {
       console.log("Hello from moduleA");
   };
   

3. Sinkron: Impor di CommonJS bersifat sinkron, yang berarti modul diimpor saat runtime.

4. Lingkungan: CommonJS banyak digunakan di Node.js dan kurang umum di lingkungan browser tanpa bantuan bundler seperti Browserify atau Webpack.

ECMAScript Modules (ESM)

ECMAScript Modules, atau sering disebut ES Modules (ESM), adalah standar modulasi yang diadopsi secara resmi dalam spesifikasi ECMAScript 2015 (ES6). Beberapa karakteristik utama ESM adalah:

1. Penggunaan import dan export: ESM menggunakan sintaks import untuk mengimpor dan export untuk mengekspor modul. Contoh:

   import { myFunction } from './moduleB.js';
   
   export function myFunction() {
       console.log("Hello from moduleB");
   }
   

2. Ekspor Named dan Default: ESM mendukung dua jenis ekspor, yaitu named exports dan default exports. Contoh:

   // Named export
   export const variable = 'value';
   
   // Default export
   export default function() {
       console.log("Default export function");
   }
   

3. Asinkron: Impor di ESM bersifat asinkron, yang memungkinkan optimasi seperti code-splitting dan penggabungan modul secara dinamis.

4. Lingkungan: ESM didukung secara native di browser modern dan Node.js (dengan beberapa konfigurasi).

Perbandingan

Kapan Menggunakan yang Mana?

• CommonJS: Jika Anda bekerja dalam ekosistem Node.js yang legacy atau menggunakan tool yang hanya mendukung CommonJS, maka CommonJS adalah pilihan yang tepat.
• ECMAScript Modules: Jika Anda menargetkan browser modern atau ingin memanfaatkan fitur terbaru dari JavaScript, ESM adalah pilihan yang lebih baik. Ini juga memudahkan transisi ke ekosistem yang lebih modular dan kompatibel dengan berbagai alat build modern seperti Webpack dan Rollup.

Kesimpulan

Memahami perbedaan antara CommonJS dan ECMAScript Modules adalah penting bagi pengembang JavaScript modern. Keduanya memiliki kelebihan dan kekurangan masing-masing, serta aplikasi yang lebih sesuai berdasarkan konteks proyek. Dengan semakin banyaknya dukungan native untuk ESM, transisi dari CommonJS ke ESM menjadi lebih menguntungkan untuk proyek-proyek baru dan pengembangan di masa depan.