Skrip Modul ES type=module
Muat JavaScript sebagai modul ES dengan type=module.
Skrip Modul ES type=module adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.
Apa Itu Modul ES
Modul ES adalah berkas JavaScript yang menggunakan deklarasi import dan export. Modul memiliki cakupan sendiri (tanpa mencemari cakupan global), mode ketat secara bawaan, dan dependensi eksplisit—sehingga memperbaiki masalah pengurutan tag skrip selama puluhan tahun.
Tag Skrip Modul
<script type="module" src="app.js"> memberi tahu peramban bahwa berkas tersebut adalah modul. Peramban mengurai impor, mengambil dependensi secara paralel, dan hanya mengeksekusi titik masuk setelah seluruh graf dependensi diunduh dan dikompilasi.
<script type="module" src="app.js"></script>Modul Ditunda
Skrip modul berperilaku seolah-olah memiliki defer: skrip tersebut diunduh secara paralel dengan penguraian HTML dan dieksekusi setelah penguraian selesai, sesuai urutan deklarasi. Anda dapat menempatkan <script type="module"> di mana saja (bahkan di dalam <head>) tanpa memblokir halaman.
Impor Menggunakan Penentu
Pernyataan impor menggunakan penentu—baik URL relatif (./utils.js), URL absolut (https://cdn.example.com/lib.js), maupun nama polos (lodash). Nama polos memerlukan peta impor (yang akan dibahas berikutnya) karena peramban tidak tahu ke berkas mana nama tersebut dipetakan.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Ekstensi Berkas Wajib Dicantumkan
Peramban tidak menambahkan .js secara otomatis ke penentu impor. import "./utils" gagal; import "./utils.js" berhasil. Pengemas dan Node mungkin lebih toleran; peramban bersifat ketat, jadi tulislah ekstensi secara eksplisit.
CORS Diperlukan
Modul selalu diambil dengan CORS, bahkan saat berasal dari asal yang sama. Berkas modul lintas asal harus menyajikan header Access-Control-Allow-Origin yang sesuai, atau impor akan gagal. Sebagian besar CDN (esm.sh, jsdelivr, unpkg) telah mengonfigurasinya dengan benar sejak awal.
Await Tingkat Atas
Modul mendukung await di tingkat atas—tidak memerlukan pembungkus fungsi asinkron: const data = await fetch("/api").then(r => r.json()). Konsumen modul menunggu hingga await tingkat atas selesai sebelum mereka dieksekusi.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);Modul Berupa Instans Tunggal
Sebuah modul dievaluasi tepat satu kali per sesi, terlepas dari berapa banyak modul lain yang mengimpornya. Objek ekspor digunakan bersama—setiap konsumen melihat instans yang sama, sehingga modul menjadi cara yang rapi untuk berbagi instans tunggal seperti objek konfigurasi atau penyimpanan status.
Modul Sebaris
Anda juga dapat menulis modul secara sebaris: <script type="module">import x from "./y.js"; ...</script>. Cara ini berguna untuk kode bootstrap atau eksperimen, meskipun berkas eksternal lebih mudah ditelusuri dan disimpan dalam tembolok.
nomodule untuk Cadangan Lama
Pasangkan <script type="module"> dengan <script nomodule src="legacy.js">. Peramban modern menjalankan modul dan mengabaikan skrip nomodule; peramban lama menjalankan skrip nomodule dan mengabaikan modul. Cara ini digunakan selama migrasi menuju aplikasi serba-ESM.
Kesalahan dan Kegagalan Impor
Impor yang gagal (404, CORS, kesalahan sintaks) menimbulkan kesalahan dan mencegah seluruh graf modul dieksekusi. Gunakan panel Jaringan untuk menemukan permintaan modul yang gagal dan Konsol untuk membaca pesan kesalahan impor yang sebenarnya.
Pemeriksaan Pemahaman
Mengapa skrip modul berperilaku seolah-olah defer ditetapkan, padahal Anda tidak menentukannya?
Ringkasan
<script type="module"> memuat modul ES—berkas mode ketat dengan deklarasi import/export yang menyelesaikan graf dependensi. Modul ditunda secara bawaan, memerlukan ekstensi berkas yang dicantumkan secara eksplisit, diambil melalui CORS, dievaluasi sebagai instans tunggal, dan mendukung await tingkat atas. Gunakan nomodule sebagai cadangan untuk peramban lama dan perhatikan ekstensi berkas yang hilang saat impor gagal tanpa terlihat.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Skrip Modul ES type=module” gratis?
Ya — teks lengkap “Skrip Modul ES type=module” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Skrip Modul ES type=module”?
Muat JavaScript sebagai modul ES dengan type=module. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai HTML Academy?
Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Skrip Modul ES type=module” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?
Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Skrip Modul ES type=module
- Peta Impor importmap
- Import() Dinamis dalam Modul
- Dasar-Dasar Federasi Modul