Importe

Astro unterst├╝tzt die meisten statischen Elemente, ohne dass eine Konfiguration erforderlich ist. Du kannst die Anweisung import an beliebiger Stelle in deinem Projekt-JavaScript verwenden (einschlie├člich Astro-Frontmatter) und Astro wird eine optimierte Kopie dieses statischen Elements in deinem endg├╝ltigen Build einf├╝gen. @import wird auch innerhalb von CSS & <style> Tags unterst├╝tzt.

Die folgenden Dateitypen werden von Astro standardm├Ą├čig unterst├╝tzt:

  • Astro-Komponenten (.astro)
  • Markdown (.md, .markdown, etc.)
  • JavaScript (.js, .mjs)
  • TypeScript (.ts, .tsx)
  • NPM-Pakete
  • JSON (.json)
  • JSX (.jsx, .tsx)
  • CSS (.css)
  • CSS-Module (.module.css)
  • Bilder & Assets (.svg, .jpg, .png, etc.)

Darüber hinaus kannst du Astro erweitern, um Unterstützung für verschiedene UI-Frameworks wie React, Svelte und Vue-Komponenten hinzuzufügen. Du kannst auch die Astro MDX Integration (EN) installieren und .mdx Dateien in deinem Projekt verwenden.

Du kannst jedes statische Asset in das Verzeichnis public/ deines Projekts legen und Astro kopiert es direkt und unver├Ąndert in deinen endg├╝ltigen Build. public/-Dateien werden von Astro nicht gebaut oder geb├╝ndelt, was bedeutet, dass jede Art von Datei unterst├╝tzt wird. Du kannst eine public/-Datei ├╝ber einen URL-Pfad direkt in deinem HTML-Vorlagen referenzieren.

Astro verwendet ESM, die gleiche import und export Syntax, die auch im Browser unterst├╝tzt wird.

import { getUser } from './user.js';

JavaScript kann mit der normalen ESM-Syntax import und export importiert werden.

import { getUser } from './user';
import type { UserType } from './user';

Astro bietet eine integrierte Unterst├╝tzung f├╝r TypeScript. Du kannst ÔÇťtsÔÇŁ- und ÔÇťtsxÔÇŁ-Dateien direkt in dein Astro-Projekt importieren und sogar TypeScript-Code direkt in dein Astro-Komponentenskript und alle hoisted script tags schreiben.

Astro f├╝hrt selbst keine Typ├╝berpr├╝fung durch. Die Typ├╝berpr├╝fung sollte au├čerhalb von Astro erfolgen, entweder durch deine IDE oder durch ein separates Skript. F├╝r die Typ├╝berpr├╝fung von Astro-Dateien steht der Befehl astro check┬á(EN) zur Verf├╝gung.

­čôÜ Lies mehr ├╝ber TypeScript-Unterst├╝tzung in Astro.

import { MyComponent } from './MyComponent.jsx';

Astro bietet integrierte Unterst├╝tzung f├╝r JSX-Dateien (*.jsx und *.tsx) in deinem Projekt. Die JSX-Syntax wird automatisch in JavaScript umgewandelt.

Auch wenn Astro JSX-Syntax versteht, musst du eine Framework-Integration einbinden, um Frameworks wie React, Preact und Solid korrekt zu rendern. In unserem Leitfaden Integrationen nutzen erf├Ąhrst du mehr.

Wenn du ein NPM-Paket installierst hast, kannst du es in Astro importieren.

---
import { Icon } from 'astro-icon';
---

Wenn ein Paket in einem ├Ąlteren Format ver├Âffentlicht wurde, wird Astro versuchen, das Paket in ESM zu konvertieren, damit die ÔÇťimportÔÇŁ-Anweisungen funktionieren. In einigen F├Ąllen muss du deine vite config┬á(EN) anpassen, damit es funktioniert.

// Laden des JSON-Objekts ├╝ber den Standardexport
import json from './data.json';

Astro unterst├╝tzt den Import von JSON-Dateien direkt in deine Anwendung. Importierte Dateien geben das vollst├Ąndige JSON-Objekt im Standardimport zur├╝ck.

// Laden und Einf├╝gen von 'style.css' in die Seite
import './style.css';

Astro unterst├╝tzt den Import von CSS-Dateien direkt in deine Anwendung. Importierte Styles werden nicht exportiert, aber wenn du einen importierst, werden diese Styles automatisch in die Seite eingef├╝gt. Dies funktioniert standardm├Ą├čig f├╝r alle CSS-Dateien und kann Compile-to-CSS-Sprachen wie Sass und Less ├╝ber Plugins unterst├╝tzen.

// 1. Konvertiert die Klassennamen aus './style.module.css' in eindeutige Werte (scoped).
// 2. Gibt ein Objekt zur├╝ck, das die urspr├╝nglichen Klassennamen auf ihren endg├╝ltigen, zugewiesenen Wert abbildet.
import styles from './style.module.css';
// Dieses Beispiel verwendet JSX, aber du kannst CSS-Module mit jedem Framework verwenden.
return <div className={styles.error}>Deine Fehlermeldung</div>;

Astro unterst├╝tzt CSS-Module unter Verwendung der Namenskonvention [name].module.css. Wie bei jeder CSS-Datei wird beim Importieren einer solchen Datei das CSS automatisch auf die Seite angewendet. CSS-Module exportieren jedoch ein spezielles Standardobjekt ÔÇťstylesÔÇŁ, das deine urspr├╝nglichen Klassennamen auf eindeutige Bezeichner abbildet.

CSS-Module helfen dir dabei, das Scoping und die Isolierung von Komponenten auf dem Frontend mit eindeutig generierten Klassennamen f├╝r deine Stylesheets durchzusetzen.

import imgReference from './image.png'; // imgReference === '/src/image.png'
import svgReference from './image.svg'; // svgReference === '/src/image.svg'
import txtReference from './words.txt'; // txtReference === '/src/words.txt'
// This example uses JSX, but you can use import references with any framework.
<img src={imgReference} alt="image description" />;

Alle anderen, oben nicht explizit erw├Ąhnten Assets k├Ânnen ├╝ber ESM import importiert werden und geben einen URL-Verweis auf das fertige Asset zur├╝ck. Dies kann n├╝tzlich sein, um Nicht-JS-Assets per URL zu referenzieren, z.B. um ein Bildelement mit einem ÔÇťsrcÔÇŁ-Attribut zu erstellen, das auf dieses Bild zeigt.

Es kann auch n├╝tzlich sein, Bilder in den Ordner public/ zu legen, wie auf der Projektstruktur-Seite erkl├Ąrt.

Mit Astro.glob() kannst du viele Dateien auf einmal importieren.

Astro.glob() erlaubt nur einen Parameter: ein relatives Glob-Pattern, das zu den lokalen Dateien passt, die du importieren m├Âchtest. Es ist asynchron und gibt ein Array mit den Exporten jeder passenden Datei zur├╝ck.

src/components/my-component.astro
---
// importiert alle Dateien, die mit `.md` enden in `./src/pages/post/`
const posts = await Astro.glob('../pages/post/*.md');
---
<!-- Rendert einen <Artikel> f├╝r die ersten 5 Blogbeitr├Ąge -->
<div>
{posts.slice(0, 4).map((post) => (
<article>
<h1>{post.frontmatter.title}</h1>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>

Astro-Komponenten, die mit Astro.glob importiert werden, sind vom Typ AstroInstance. Du kannst jede Komponenteninstanz mit ihrer Eigenschaft default darstellen:

src/pages/component-library.astro
---
// importiert alle Dateien, die mit `.astro` enden in `./src/components/`
const components = await Astro.glob('../components/*.astro');
---
<!-- Alle Komponenten anzeigen -->
{components.map((component) => (
<div>
<component.default size={24} />
</div>
))}

Ein Glob-Pattern ist ein Dateipfad, der spezielle Platzhalterzeichen unterst├╝tzt. Es wird verwendet, um auf mehrere Dateien in deinem Projekt gleichzeitig zu verweisen.

Das Glob-Pattern ./pages/**/*.{md,mdx} beginnt beispielsweise im Unterverzeichnis pages, durchsucht alle Unterverzeichnisse (/**) und erfasst jeden Dateinamen (/*), der entweder auf .md oder .mdx (.{md,mdx}) endet.

Um mit Astro.glob() verwendet zu werden, muss das Glob-Pattern ein String-Literal sein und darf keine Variablen enthalten. Siehe die Anleitung zur Fehlerbehebung f├╝r eine andere L├Âsung.

Au├čerdem m├╝ssen Glob-Pattern mit einem der folgenden Zeichen beginnen:

  • ./ (um im aktuellen Verzeichnis zu beginnen)
  • ../ (um im ├╝bergeordneten Verzeichnis zu beginnen)
  • / (um im Stammverzeichnis des Projekts zu beginnen)

Lies mehr ├╝ber die Syntax des Glob-Pattern.

// L├Ądt und initialisiert die angeforderte WASM-Datei
const wasm = await WebAssembly.instantiateStreaming(fetch('/example.wasm'));

Astro unterst├╝tzt das Laden von WASM-Dateien direkt in deine Anwendung unter Verwendung der WebAssembly API des Browsers.

Wir empfehlen Astro-Benutzern, Node.js-Builtins (fs, path, etc.) wann immer m├Âglich zu vermeiden. Astro soll in Zukunft mit mehreren JavaScript-Laufzeiten kompatibel sein. Dazu geh├Âren Deno und Cloudflare Workers, die keine Node-Builtins wie fs unterst├╝tzen.

Unser Ziel ist es, Astro-Alternativen zu g├Ąngigen Node.js-Builtins anzubieten. Allerdings gibt es davon bisher keine. Wenn du also wirklich diese eingebauten Module verwenden musst, halten wir dich nicht auf. Astro unterst├╝tzt Node.js-Builtins, die das neuere node:-Pr├Ąfix von Node verwenden. Wenn du z.B. eine Datei lesen willst, kannst du das folgenderma├čen tun:

---
// Beispiel: Import des builtins "fs/promises" aus Node.js
import fs from 'node:fs/promises';
const url = new URL('../../package.json', import.meta.url);
const json = await fs.readFile(url, 'utf-8');
const data = JSON.parse(json);
---
<span>Version: {data.version}</span>

Erweiterung der Unterst├╝tzung von Dateitypen

Abschnitt betitelt Erweiterung der Unterst├╝tzung von Dateitypen

Mit Vite und kompatiblen Rollup-Plugins kannst du Dateitypen importieren, die von Astro nicht nativ unterst├╝tzt werden. Wo du die ben├Âtigten Plugins findest erf├Ąhrst du im Abschnitt Finding Plugins der Vite-Dokumentation.

Das Datenformat YAML (.yml) wird von Astro nicht von Haus aus unterst├╝tzt, aber du kannst es mit einem kompatiblen Rollup-Plugin wie @rollup/plugin-yaml hinzuf├╝gen:

  1. Installiere @rollup/plugin-yaml:

    Terminal-Fenster
    npm install @rollup/plugin-yaml --save-dev
  2. Importiere das Plugin in deine ÔÇťastro.config.mjsÔÇŁ und f├╝ge es zum Array ÔÇťVite pluginsÔÇŁ hinzu:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import yaml from '@rollup/plugin-yaml';
    export default defineConfig({
    vite: {
    plugins: [yaml()]
    }
    });
  3. Zuletzt kannst du YAML-Daten mit einer Import-Anweisung importieren:

    import yml from './data.yml';