13 September 2025Bahasa Indonesia

Panduan komprehensif peta impor JavaScript, fokus pada fitur 'lingkup' yang kuat, pewarisan lingkup, dan hierarki resolusi modul untuk pengembangan web modern.

Membuka Era Baru Pengembangan Web: Pendalaman Mendalam tentang Pewarisan Lingkup Peta Impor JavaScript

Perjalanan modul JavaScript telah melalui jalan yang panjang dan berliku. Dari kekacauan ruang nama global web awal hingga pola canggih seperti CommonJS untuk Node.js dan AMD untuk browser, pengembang terus mencari cara yang lebih baik untuk mengorganisir dan berbagi kode. Kedatangan ES Modules (ESM) asli menandai pergeseran monumental, menstandardisasi sistem modul langsung di dalam bahasa JavaScript dan browser.

Namun, standar baru ini datang dengan hambatan yang signifikan untuk pengembangan berbasis browser. Pernyataan impor yang sederhana dan elegan yang biasa kita gunakan di Node.js, seperti import _ from 'lodash';, akan menimbulkan kesalahan di browser. Ini karena browser, tidak seperti Node.js dengan algoritma `node_modules`-nya, tidak memiliki mekanisme asli untuk menyelesaikan "penentu modul kosong" ini menjadi URL yang valid.

Selama bertahun-tahun, solusinya adalah langkah build yang wajib. Alat seperti Webpack, Rollup, dan Parcel akan menggabungkan kode kita, mengubah penentu kosong ini menjadi jalur yang dapat dipahami browser. Meskipun kuat, alat-alat ini menambah kerumitan, overhead konfigurasi, dan memperlambat siklus umpan balik dalam proses pengembangan. Bagaimana jika ada cara asli, tanpa alat build, untuk menyelesaikan ini? Perkenalkan Peta Impor JavaScript.

Peta impor adalah standar W3C yang menyediakan mekanisme asli untuk mengontrol perilaku impor JavaScript. Mereka bertindak sebagai tabel pencarian, memberi tahu browser persis cara menyelesaikan penentu modul menjadi URL konkret. Namun, kekuatan mereka jauh melampaui alianasing sederhana. Pengubah permainan yang sebenarnya terletak pada fitur yang kurang dikenal tetapi sangat kuat: `scopes`. Lingkup memungkinkan resolusi modul kontekstual, memungkinkan bagian-bagian berbeda dari aplikasi Anda mengimpor penentu yang sama tetapi menyelesaikannya ke modul yang berbeda. Ini membuka kemungkinan arsitektur baru untuk mikro-frontend, pengujian A/B, dan manajemen dependensi yang kompleks tanpa satu baris konfigurasi bundler.

Panduan komprehensif ini akan membawa Anda mendalami dunia peta impor, dengan fokus khusus pada penjelasan hierarki resolusi modul yang diatur oleh `scopes`. Kami akan menjelajahi cara kerja pewarisan lingkup (atau, lebih akurat, mekanisme fallback), membedah algoritma resolusi, dan mengungkap pola praktis untuk merevolusi alur kerja pengembangan web modern Anda.

Apa Itu Peta Impor JavaScript? Tinjauan Dasar

Pada intinya, peta impor adalah objek JSON yang menyediakan pemetaan antara nama modul yang ingin diimpor oleh pengembang dan URL file modul yang sesuai. Ini memungkinkan Anda untuk menggunakan penentu modul kosong yang bersih dalam kode Anda, sama seperti di lingkungan Node.js, dan membiarkan browser menangani resolusinya.

Sintaks Dasar

Anda mendeklarasikan peta impor menggunakan tag <script> dengan atribut type="importmap". Tag ini harus ditempatkan di dokumen HTML sebelum tag <script type="module"> apa pun yang menggunakan impor yang dipetakan.

Berikut adalah contoh sederhana:

            <!DOCTYPE html>
<html>
  <head>
    <!-- Peta Impor -->
    <script type="importmap">
    {
      "imports": {
        "moment": "https://cdn.skypack.dev/moment",
        "lodash": "/js/vendor/lodash-4.17.21.min.js",
        "app/": "/js/app/"
      }
    }
    </script>

    <!-- Kode Aplikasi Anda -->
    <script type="module" src="/js/main.js"></script>
  </head>
  <body>
    <h1>Selamat Datang di Peta Impor!</h1>
  </body>
</html>

Di dalam file /js/main.js kami, kita sekarang dapat menulis kode seperti ini:

            // Ini berfungsi karena "moment" dipetakan dalam peta impor.
import moment from 'moment';

// Ini berfungsi karena "lodash" dipetakan.
import { debounce } from 'lodash';

// Ini adalah impor mirip paket untuk kode Anda sendiri.
// Ini menyelesaikan ke /js/app/utils.js karena pemetaan "app/".
import { helper } from 'app/utils.js';

console.log('Hari ini adalah:', moment().format('MMMM Do YYYY'));

Mari kita bedah objek `imports`:

"moment": "https://cdn.skypack.dev/moment": Ini adalah pemetaan langsung. Kapan pun browser melihat import ... from 'moment', ia akan mengambil modul dari URL CDN yang ditentukan.
"lodash": "/js/vendor/lodash-4.17.21.min.js": Ini memetakan penentu `lodash` ke file yang di-host secara lokal.
"app/": "/js/app/": Ini adalah pemetaan berbasis jalur. Perhatikan garis miring di akhir pada kunci dan nilai. Ini memberi tahu browser bahwa penentu impor apa pun yang dimulai dengan `app/` harus diselesaikan relatif terhadap `/js/app/`. Misalnya, `import ... from 'app/auth/user.js'` akan diselesaikan menjadi `/js/app/auth/user.js`. Ini sangat berguna untuk menstrukturkan kode aplikasi Anda sendiri tanpa menggunakan jalur relatif yang berantakan seperti `../../`.

Manfaat Inti

Bahkan dengan penggunaan sederhana ini, keuntungannya sudah jelas:

Pengembangan Tanpa Build: Anda dapat menulis JavaScript modular modern dan menjalankannya langsung di browser tanpa bundler. Ini mengarah pada penyegaran yang lebih cepat dan pengaturan pengembangan yang lebih sederhana.
Dependensi yang Terdekopel: Kode aplikasi Anda merujuk pada penentu abstrak (`'moment'`) alih-alih URL yang di-hardcode. Ini membuat pertukaran versi, penyedia CDN, atau perpindahan dari file lokal ke CDN menjadi mudah hanya dengan mengubah JSON peta impor.
Penyimpanan Cache yang Ditingkatkan: Karena modul dimuat sebagai file individual, browser dapat menyimpannya secara independen. Perubahan pada satu modul kecil tidak memerlukan pengunduhan ulang bundel besar.

Melampaui Dasar-dasar: Memperkenalkan `scopes` untuk Kontrol Granular

Kunci `imports` tingkat atas menyediakan pemetaan global untuk seluruh aplikasi Anda. Tetapi apa yang terjadi ketika aplikasi Anda tumbuh dalam kompleksitas? Pertimbangkan skenario di mana Anda membangun aplikasi web besar yang mengintegrasikan widget obrolan pihak ketiga. Aplikasi utama menggunakan versi 5 dari pustaka charting, tetapi widget obrolan lama hanya kompatibel dengan versi 4.

Tanpa `scopes`, Anda akan menghadapi pilihan yang sulit: mencoba merefaktor widget, mencari widget lain, atau menerima bahwa Anda tidak dapat menggunakan pustaka charting yang lebih baru. Inilah tepatnya masalah yang dirancang untuk dipecahkan oleh `scopes`.

Kunci `scopes` dalam peta impor memungkinkan Anda mendefinisikan pemetaan yang berbeda untuk penentu yang sama berdasarkan di mana impor dibuat. Ini menyediakan resolusi modul kontekstual, atau terlingkup.

Struktur `scopes`

Nilai `scopes` adalah objek di mana setiap kunci adalah awalan URL, mewakili "jalur lingkup." Nilai untuk setiap jalur lingkup adalah objek seperti `imports` yang mendefinisikan pemetaan yang berlaku khusus dalam lingkup tersebut.

Mari kita selesaikan masalah pustaka charting kita dengan sebuah contoh:

            <script type="importmap">
{
  "imports": {
    "charting-lib": "/libs/charting-lib/v5/main.js",
    "api-client": "/js/api/v2/client.js"
  },
  "scopes": {
    "/widgets/chat/": {
      "charting-lib": "/libs/charting-lib/v4/legacy.js"
    }
  }
}
</script>

<script type="module" src="/js/app.js"></script>
<script type="module" src="/widgets/chat/init.js"></script>

Berikut cara browser menafsirkannya:

Skrip yang terletak di `/js/app.js` ingin mengimpor `charting-lib`. Browser memeriksa apakah jalur skrip (`/js/app.js`) cocok dengan salah satu jalur lingkup. Itu tidak cocok dengan `/widgets/chat/`. Oleh karena itu, browser menggunakan pemetaan `imports` tingkat atas, dan `charting-lib` diselesaikan menjadi `/libs/charting-lib/v5/main.js`.
Skrip yang terletak di `/widgets/chat/init.js` juga ingin mengimpor `charting-lib`. Browser melihat bahwa jalur skrip ini (`/widgets/chat/init.js`) termasuk dalam lingkup `/widgets/chat/`. Ia mencari di dalam lingkup ini untuk pemetaan `charting-lib` dan menemukannya. Jadi, untuk skrip ini dan modul apa pun yang diimpornya dari dalam jalur tersebut, `charting-lib` diselesaikan menjadi `/libs/charting-lib/v4/legacy.js`.

Dengan `scopes`, kita berhasil memungkinkan dua bagian aplikasi kita untuk menggunakan versi dependensi yang sama, hidup berdampingan dengan damai tanpa konflik. Ini adalah tingkat kontrol yang sebelumnya hanya dapat dicapai dengan konfigurasi bundler yang rumit atau isolasi berbasis iframe.

Konsep Inti: Memahami Pewarisan Lingkup dan Hierarki Resolusi Modul

Sekarang kita sampai pada inti masalahnya. Bagaimana browser memutuskan lingkup mana yang akan digunakan ketika beberapa lingkup berpotensi cocok dengan jalur file? Dan apa yang terjadi pada pemetaan di `imports` tingkat atas? Ini diatur oleh hierarki yang jelas dan dapat diprediksi.

Aturan Emas: Lingkup Paling Spesifik Menang

Prinsip fundamental resolusi lingkup adalah kekhususan. Ketika sebuah modul pada URL tertentu meminta modul lain, browser melihat semua kunci dalam objek `scopes`. Ia menemukan kunci terpanjang yang merupakan awalan dari URL modul yang meminta. Lingkup yang "paling spesifik" ini adalah satu-satunya yang akan digunakan untuk menyelesaikan impor. Semua lingkup lain diabaikan untuk resolusi tertentu ini.

Mari kita ilustrasikan ini dengan struktur file dan peta impor yang lebih kompleks.

Struktur File:

`/index.html` (berisi peta impor)
`/js/main.js`
`/js/feature-a/index.js`
`/js/feature-a/core/logic.js`

Peta Impor di `index.html`:

            {
  "imports": {
    "api": "/js/api/v1/api.js",
    "ui-kit": "/js/ui/v2/kit.js"
  },
  "scopes": {
    "/js/feature-a/": {
      "api": "/js/api/v2-beta/api.js"
    },
    "/js/feature-a/core/": {
      "api": "/js/api/v3-experimental/api.js",
      "ui-kit": "/js/ui/v1/legacy-kit.js"
    }
  }
}

Sekarang mari kita lacak resolusi `import api from 'api';` dan `import ui from 'ui-kit';` dari file yang berbeda:

Di `/js/main.js`:
- Jalur `/js/main.js` tidak cocok dengan `/js/feature-a/` atau `/js/feature-a/core/`.
- Tidak ada lingkup yang cocok. Resolusi kembali ke `imports` tingkat atas.
- `api` diselesaikan menjadi `/js/api/v1/api.js`.
- `ui-kit` diselesaikan menjadi `/js/ui/v2/kit.js`.
Di `/js/feature-a/index.js`:
- Jalur `/js/feature-a/index.js` diawali oleh `/js/feature-a/`. Ia tidak diawali oleh `/js/feature-a/core/`.
- Lingkup yang paling spesifik yang cocok adalah `/js/feature-a/`.
- Lingkup ini berisi pemetaan untuk `api`. Oleh karena itu, `api` diselesaikan menjadi `/js/api/v2-beta/api.js`.
- Lingkup ini tidak berisi pemetaan untuk `ui-kit`. Resolusi untuk penentu ini kembali ke `imports` tingkat atas. `ui-kit` diselesaikan menjadi `/js/ui/v2/kit.js`.
Di `/js/feature-a/core/logic.js`:
- Jalur `/js/feature-a/core/logic.js` diawali oleh `/js/feature-a/` dan `/js/feature-a/core/`.
- Karena `/js/feature-a/core/` lebih panjang dan oleh karena itu lebih spesifik, ia dipilih sebagai lingkup pemenang. Lingkup `/js/feature-a/` sepenuhnya diabaikan untuk file ini.
- Lingkup ini berisi pemetaan untuk `api`. `api` diselesaikan menjadi `/js/api/v3-experimental/api.js`.
- Lingkup ini juga berisi pemetaan untuk `ui-kit`. `ui-kit` diselesaikan menjadi `/js/ui/v1/legacy-kit.js`.

Kebenaran tentang "Pewarisan": Ini adalah Fallback, Bukan Penggabungan

Penting untuk memahami titik kebingungan umum. Istilah "pewarisan lingkup" bisa menyesatkan. Lingkup yang lebih spesifik tidak mewarisi atau menggabungkan dengan lingkup yang kurang spesifik (induk). Proses resolusi lebih sederhana dan lebih langsung:

Temukan satu lingkup yang paling spesifik yang cocok untuk URL skrip pengimpor.
Jika lingkup tersebut berisi pemetaan untuk penentu yang diminta, gunakanlah. Proses berakhir di sini.
Jika lingkup pemenang tidak berisi pemetaan untuk penentu, browser segera memeriksa objek `imports` tingkat atas untuk pemetaan. Ia tidak melihat lingkup lain yang kurang spesifik.
Jika pemetaan ditemukan di lingkup pemenang atau di `imports` tingkat atas, pemetaan tersebut digunakan.
Jika tidak ada pemetaan yang ditemukan di lingkup pemenang maupun di `imports` tingkat atas, `TypeError` akan dilemparkan.

Mari kita tinjau kembali contoh terakhir kita untuk memantapkan ini. Saat menyelesaikan `ui-kit` dari `/js/feature-a/index.js`, lingkup pemenang adalah `/js/feature-a/`. Lingkup ini tidak mendefinisikan `ui-kit`, jadi browser tidak memeriksa lingkup `/` (yang tidak ada sebagai kunci) atau lingkup induk lainnya. Ia langsung ke `imports` global dan menemukan pemetaan di sana. Ini adalah mekanisme fallback, bukan pewarisan bertingkat atau penggabungan seperti CSS.

Aplikasi Praktis dan Skenario Lanjutan

Kekuatan peta impor terlingkup benar-benar bersinar dalam aplikasi yang kompleks dan dunia nyata. Berikut adalah beberapa pola arsitektur yang mereka aktifkan.

Mikro-Frontend

Ini mungkin kasus penggunaan utama untuk lingkup peta impor. Bayangkan sebuah situs e-commerce di mana pencarian produk, keranjang belanja, dan checkout semuanya adalah aplikasi terpisah (mikro-frontend) yang dikembangkan oleh tim yang berbeda. Mereka semua diintegrasikan ke dalam satu halaman host.

Tim Pencarian dapat menggunakan versi React terbaru.
Tim Keranjang mungkin menggunakan versi React yang lebih lama dan stabil karena dependensi lama.
Aplikasi host mungkin menggunakan Preact untuk shell-nya agar ringan.

Sebuah peta impor dapat mengoordinasikan ini dengan mulus:

            {
  "imports": {
    "react": "/libs/preact/v10/preact.js",
    "react-dom": "/libs/preact/v10/preact-dom.js",
    "shared-state": "/js/state-manager.js"
  },
  "scopes": {
    "/apps/search/": {
      "react": "/libs/react/v18/react.js",
      "react-dom": "/libs/react/v18/react-dom.js"
    },
    "/apps/cart/": {
      "react": "/libs/react/v17/react.js",
      "react-dom": "/libs/react/v17/react-dom.js"
    }
  }
}

Di sini, setiap mikro-frontend, yang diidentifikasi oleh jalur URL-nya, mendapatkan versi React yang terisolasi. Mereka masih dapat mengimpor modul `shared-state` dari `imports` tingkat atas untuk berkomunikasi satu sama lain. Ini memberikan enkapsulasi yang kuat sambil tetap memungkinkan interoperabilitas yang terkontrol, semua tanpa pengaturan federasi bundler yang rumit.

Pengujian A/B dan Penandaan Fitur

Ingin menguji versi baru dari alur checkout untuk sebagian pengguna Anda? Anda dapat menyajikan grup uji dengan `index.html` yang sedikit berbeda dengan peta impor yang dimodifikasi.

Peta Impor Grup Kontrol:

            {
  "imports": {
    "checkout-flow": "/js/checkout/v1/flow.js"
  }
}

Peta Impor Grup Uji:

            {
  "imports": {
    "checkout-flow": "/js/checkout/v2-beta/flow.js"
  }
}

Kode aplikasi Anda tetap identik: `import start from 'checkout-flow';`. Perutean modul mana yang akan dimuat sepenuhnya ditangani di tingkat peta impor, yang dapat dihasilkan secara dinamis di server berdasarkan cookie pengguna atau kriteria lain.

Mengelola Monorepo

Dalam monorepo besar, Anda mungkin memiliki banyak paket internal yang saling bergantung. Lingkup dapat membantu mengelola dependensi ini dengan bersih. Anda dapat memetakan nama setiap paket ke kode sumbernya selama pengembangan.

            {
  "imports": {
    "@my-corp/design-system": "/packages/design-system/src/index.js",
    "@my-corp/utils": "/packages/utils/src/index.js"
  },
  "scopes": {
    "/packages/design-system/": {
      "@my-corp/utils": "/packages/design-system/src/vendor/utils-shim.js"
    }
  }
}

Dalam contoh ini, sebagian besar paket mendapatkan pustaka `utils` utama. Namun, paket `design-system`, mungkin karena alasan tertentu, mendapatkan `utils` yang di-shim atau versi yang berbeda yang ditentukan di dalam lingkupnya sendiri.

Dukungan Browser, Perkakas, dan Pertimbangan Penerapan

Dukungan Browser

Hingga akhir 2023, dukungan asli untuk peta impor tersedia di semua browser modern utama, termasuk Chrome, Edge, Safari, dan Firefox. Ini berarti Anda dapat mulai menggunakannya dalam produksi untuk sebagian besar basis pengguna Anda tanpa polyfill apa pun.

Fallback untuk Browser Lama

Untuk aplikasi yang harus mendukung browser lama yang tidak memiliki dukungan peta impor asli, komunitas memiliki solusi yang kuat: polyfill `es-module-shims.js`. Skrip tunggal ini, ketika disertakan sebelum peta impor Anda, menambahkan kembali dukungan untuk peta impor dan fitur modul modern lainnya (seperti `import()` dinamis) ke lingkungan yang lebih lama. Ini ringan, teruji dalam pertempuran, dan merupakan pendekatan yang direkomendasikan untuk memastikan kompatibilitas yang luas.

            <!-- Polyfill untuk browser lama -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js"></script>

<!-- Peta Impor Anda -->
<script type="importmap">
  ...
</script>

Peta Dinamis yang Dihasilkan Server

Salah satu pola penerapan paling kuat adalah tidak memiliki peta impor statis sama sekali di file HTML Anda. Sebaliknya, server Anda dapat menghasilkan JSON secara dinamis berdasarkan permintaan. Ini memungkinkan untuk:

Pergantian Lingkungan: Sajikan modul yang tidak diminifikasi dan memiliki pemetaan sumber di lingkungan `development` dan modul yang diminifikasi dan siap produksi di `production`.
Modul Berbasis Peran Pengguna: Pengguna admin bisa mendapatkan peta impor yang menyertakan pemetaan untuk alat khusus admin.
Lokalisasi: Petakan modul `translations` ke file yang berbeda berdasarkan header `Accept-Language` pengguna.

Praktik Terbaik dan Potensi Perangkap

Sama seperti alat yang kuat lainnya, ada praktik terbaik yang harus diikuti dan jebakan yang harus dihindari.

Jaga Keterbacaan: Meskipun Anda dapat membuat hierarki lingkup yang sangat dalam dan kompleks, itu bisa menjadi sulit untuk di-debug. Berusahalah untuk struktur lingkup sesederhana mungkin yang memenuhi kebutuhan Anda. Beri komentar pada JSON peta impor Anda jika menjadi kompleks.
Selalu Gunakan Garis Miring di Akhir untuk Jalur: Saat memetakan awalan jalur (seperti direktori), pastikan kunci dalam peta impor dan nilai URL diakhiri dengan `/`. Ini sangat penting agar algoritma pencocokan berfungsi dengan benar untuk semua file dalam direktori tersebut. Melupakan ini adalah sumber bug yang umum.
Perangkap: Perangkap Non-Pewarisan: Ingat, lingkup tertentu tidak mewarisi dari yang kurang spesifik. Ia hanya kembali ke `imports` global. Jika Anda men-debug masalah resolusi, selalu identifikasi satu lingkup pemenang terlebih dahulu.
Perangkap: Penyimpanan Cache Peta Impor: Peta impor Anda adalah titik masuk untuk seluruh grafik modul Anda. Jika Anda memperbarui URL modul dalam peta, Anda perlu memastikan pengguna mendapatkan peta baru. Strategi umum adalah tidak menyimpan cache file `index.html` utama secara berlebihan, atau memuat peta impor secara dinamis dari URL yang berisi hash konten, meskipun yang pertama lebih umum.
Debugging adalah Teman Anda: Alat pengembang browser modern sangat baik untuk men-debug masalah modul. Di tab Network, Anda dapat melihat URL mana yang diminta untuk setiap modul. Di Console, kesalahan resolusi akan dengan jelas menyatakan penentu mana yang gagal diselesaikan dari skrip pengimpor mana.

Kesimpulan: Masa Depan Pengembangan Web Tanpa Build

Peta Impor JavaScript, dan khususnya fitur `scopes`-nya, mewakili pergeseran paradigma dalam pengembangan frontend. Mereka memindahkan sebagian besar logika—resolusi modul—dari langkah build pra-kompilasi langsung ke standar asli browser. Ini bukan hanya tentang kenyamanan; ini tentang membangun aplikasi web yang lebih fleksibel, dinamis, dan tangguh.

Kita telah melihat cara kerja hierarki resolusi modul: jalur lingkup yang paling spesifik selalu menang, dan ia kembali ke objek `imports` global, bukan ke lingkup induk. Aturan yang sederhana namun kuat ini memungkinkan penciptaan arsitektur aplikasi canggih seperti mikro-frontend dan memungkinkan perilaku dinamis seperti pengujian A/B dengan mudah yang mengejutkan.

Seiring platform web terus matang, ketergantungan pada alat build yang berat dan kompleks untuk pengembangan semakin berkurang. Peta impor adalah landasan dari masa depan "tanpa build" ini, menawarkan cara yang lebih sederhana, lebih cepat, dan lebih terstandarisasi untuk mengelola dependensi. Dengan menguasai konsep lingkup dan hierarki resolusi, Anda tidak hanya mempelajari API browser baru; Anda melengkapi diri Anda dengan alat untuk membangun generasi aplikasi berikutnya untuk web global.