Modul ES: import export dan dynamic import
Gunakan export bernama, export lalai, import ruang nama, dan muatkan kod secara malas dengan dynamic import() untuk prestasi yang lebih baik.
Modul ES: import export dan dynamic import ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Ulasan: Asas Modul ES
Modul ES memberikan setiap fail skopnya sendiri. Eksport bernama berkongsi nilai tertentu; eksport lalai berkongsi nilai utama. Penghimpun atau pelayar menyelesaikan import semasa pemuatan.
// Named exports
export const API_BASE = '/api/v1';
export function formatDate(d) { return d.toISOString().slice(0, 10); }
// Default export
export default class ApiClient {
constructor(base = API_BASE) { this.base = base; }
}Pembuangan Kod Tidak Digunakan — Mengapa Eksport Bernama Penting
Penghimpun (Rollup, esbuild, Vite) membuang eksport yang tidak digunakan. Jika anda hanya mengimport { formatDate }, penghimpun membuang segala yang lain daripada himpunan. Eksport bernama membolehkan pembersihan ini; import * as utils boleh menghalangnya.
// consumers/report.js — only needs formatDate
import { formatDate } from './utils.js';
// Bundler omits API_BASE and ApiClient from this chunkimport() Dinamik — Pemuatan Lewat
import() dinamik mengembalikan Promise. Modul hanya diambil apabila kod berjalan. Penghimpun membahagikannya kepada bahagian berasingan secara automatik.
// Only load the heavy charting library when needed:
const showChart = async () => {
const { Chart } = await import('./Chart.js');
new Chart(canvas, config);
};
btn.addEventListener('click', showChart);import Dinamik dengan Pengendalian Ralat
Bungkus import dinamik dalam try/catch untuk mengendalikan kegagalan rangkaian atau modul yang tiada dengan baik.
try {
const module = await import('./optional-feature.js');
module.activate();
} catch (err) {
console.warn('Optional feature unavailable:', err.message);
}import.meta
import.meta mengandungi metadata tentang modul semasa. Sifat utama: import.meta.url (URL mutlak), import.meta.env (pemboleh ubah persekitaran Vite), import.meta.resolve().
// Get the directory of this module:
const dir = new URL('.', import.meta.url).pathname;
// Vite env vars:
const API_URL = import.meta.env.VITE_API_URL;
const isProd = import.meta.env.PROD;Pelaksanaan Modul — Sekali
Modul ES dinilai sekali sahaja tanpa mengira berapa kali modul tersebut diimport. Semua import bagi modul yang sama berkongsi tika yang sama. Ini menjadikan modul sangat sesuai untuk singleton (stor, bas peristiwa).
// store.js — evaluated once
const state = { count: 0 };
export const increment = () => state.count++;
export const getCount = () => state.count;
// Any file that imports from store.js gets the same state instanceKebergantungan Pekeliling
Dua modul boleh mengimport satu sama lain. JavaScript mengendalikannya, tetapi nilai mungkin tidak ditakrifkan pada penggunaan pertama kerana urutan penilaian. Susun semula kod untuk mengelakkan kitaran dalam kebanyakan keadaan.
Import Jenis Sahaja dalam TypeScript
Gunakan import type { ... } untuk mengimport jenis sahaja. Import ini dipadamkan semasa penyusunan dan tidak pernah muncul dalam himpunan keluaran. Gunakannya untuk mengelakkan kebergantungan pekeliling yang disebabkan oleh rujukan jenis sahaja.
import type { User } from './types.js';
function greet(user: User): string {
return `Hello, ${user.name}`;
}Mengeksport Semula dan Fail Barrel
Fail barrel mengeksport semula daripada beberapa modul, lalu mewujudkan satu titik import yang mudah. Berhati-hati dengan fail barrel dalam aplikasi besar — fail ini boleh menghalang pembersihan eksport yang tidak digunakan.
// components/index.ts
export { Button } from './Button';
export { Input } from './Input';
export type { ButtonProps } from './Button';
// Consumer:
import { Button, Input } from '@/components';Skrip type=module dalam Pelayar
Tambahkan type="module" pada tag skrip untuk membolehkan sintaks modul ES secara langsung dalam pelayar — tanpa penghimpun. Modul ditangguhkan secara lalai dan mempunyai skop sendiri.
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>Kebolehoperasian CommonJS dengan ESM
Node.js menyokong kedua-duanya. Fail ESM menggunakan .mjs atau menetapkan "type": "module" dalam package.json. Apabila menggunakan pakej CommonJS daripada ESM, eksport lalai ialah nilai module.exports. Penghimpun mengendalikan perkara ini secara telus.
Semakan Pantas
Apakah manfaat prestasi utama menggunakan eksport bernama berbanding satu objek eksport lalai?
Imbas Kembali: Modul ES Secara Mendalam
Modul dilaksanakan sekali; semua pengimport berkongsi tika yang sama. Pembersihan eksport membuang eksport bernama yang tidak digunakan. import() dinamik membolehkan pemuatan lewat dan pembahagian kod. import.meta memberikan konteks modul. Fail barrel mudah digunakan tetapi boleh menjejaskan pembersihan eksport. Import jenis sahaja dalam TypeScript tidak menghasilkan keluaran.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Modul ES: import export dan dynamic import” percuma?
Ya — teks penuh “Modul ES: import export dan dynamic import” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Modul ES: import export dan dynamic import”?
Gunakan export bernama, export lalai, import ruang nama, dan muatkan kod secara malas dengan dynamic import() untuk prestasi yang lebih baik. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Modul ES: import export dan dynamic import” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Modul ES: import export dan dynamic import
- npm dan package.json: kebergantungan skrip
- Vite: pelayan pembangunan dan binaan
- Konsep Pembundlean: tree shaking dan pemisahan kod