PricingLoginStart free
Frontend Academy · Oppitunti

Moduulit: import ja export

Jaa koodi ES-moduuleihin nimetyillä ja oletusviennillä, tuo vain tarvitsemasi ja ymmärrä, miten moduulipaketointityökalut selvittävät riippuvuusgraafin

Oppitunti 4/413 vaihetta

Moduulit: import ja export on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Miksi moduuleja?

Ennen moduuleja kaikki JavaScript suoritettiin globaalissa näkyvyysalueessa. Muuttujat törmäsivät toisiinsa. Koodin järjestyksellä oli merkitystä. Tiedostot oli ladattava järjestyksessä. ES Modules antaa jokaiselle tiedostolle oman näkyvyysalueen, eksplisiittiset tuonnit ja tree-shakettavat viennit.

Nimetyt viennit

Viekää tietyt arvot export-avainsanalla. Tiedostolla voi olla useita nimettyjä vientiä. Moduulin käyttäjät tuovat täsmälleen tarvitsemansa.

// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Nimetyt tuonnit

Tuokaa nimetyt viennit aaltosulkeiden avulla. Voitte tuoda useita vientiarvoja yhdestä moduulista yhdellä lausekkeella.

import { PI, add, Vector } from './utils.js';

console.log(PI);        // 3.14159
console.log(add(2, 3)); // 5

Oletusviennit

Jokaisella moduulilla voi olla yksi oletusvienti — yleensä moduulin tarjoama pääasia. Tuokaa se ilman aaltosulkeita ja antakaa sille mikä tahansa nimi.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Uudelleenvienti

Moduuli voi viedä uudelleen muiden moduulien sisältöä ja muodostaa barrel-tiedoston — yhden sisääntulopisteen, joka vie uudelleen useita asioita.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

Nimiavaruustuonnit

Tuokaa kaikki moduulin sisältö nimiavaruusobjektiin käyttämällä rakennetta import * as name. Tämä on hyödyllistä, kun tarvitsette useita vientiarvoja tai haluatte tehdä alkuperän näkyväksi.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Vain sivuvaikutuksen vuoksi tehtävät tuonnit

Jotkin moduulit tuodaan yksinomaan sivuvaikutustensa vuoksi (polyfillit, tapahtumankäsittelijöiden rekisteröinti). Tuokaa ne ilman sidosta.

import './polyfills.js'; // runs the code, imports nothing

Dynaaminen import() — koodin jakaminen

Dynaaminen import()-funktio palauttaa Promisen. Käyttäkää sitä moduulin laiskaan lataamiseen — vain tarvittaessa. Koontityökalut luovat dynaamisesti tuoduille moduuleille automaattisesti erillisen chunkin.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta on moduulien sisällä käytettävissä oleva erityinen objekti. import.meta.url on moduulin URL-osoite. Vite käyttää ympäristömuuttujiin rakennetta import.meta.env.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Moduulien ratkaiseminen

Viten kaltaiset koontityökalut ratkaisevat moduulit tiedostojärjestelmästä (suhteelliset polut, kuten './utils'), node_modules-hakemistosta ('lodash') tai polkualiasista ('@/components'), jotka on määritetty vite.config.js-tiedostossa.

CommonJS vs ES Modules

Node.js käytti alun perin CommonJS:ää (require / module.exports). Selain käyttää ES Modules -moduuleja (import / export). Myös nykyaikainen Node.js tukee ES Modules -moduuleja, kun package.jsonissa on type: "module".

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Pikatarkistus

Mikä on dynamic import()-rakenteen tärkein etu staattiseen tuontiin verrattuna?

Vastaa interaktiivisessa oppitunnissa

Kertaus: ES Modules

Nimetyt viennit ja tuonnit useille arvoille. Oletusvienti ja -tuonti moduulin pääasialliselle sisällölle. Uudelleenviennit muodostavat barrel-tiedostoja. Dynaaminen import() mahdollistaa laiskan lataamisen ja koodin jakamisen. import.meta tarjoaa moduulin metatiedot. Koontityökalut ratkaisevat aliakset, node_modules-moduulit ja suhteelliset polut.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit
41
Oppitunnit
163
Aloita opiskelu maksuttaNäytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Moduulit: import ja export” ilmainen?

Kyllä – oppitunnin ”Moduulit: import ja export” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Moduulit: import ja export”?

Jaa koodi ES-moduuleihin nimetyillä ja oletusviennillä, tuo vain tarvitsemasi ja ymmärrä, miten moduulipaketointityökalut selvittävät riippuvuusgraafin Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Moduulit: import ja export”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

  1. Taulukkometodit: map, filter, reduce ja find
  2. Objektien destrukturointi ja spread
  3. Template literalit ja optional chaining
  4. Moduulit: import ja export
← Takaisin: Frontend Academy