| title | description | i18nReady |
|---|---|---|
Importe Referenz |
Erfahre, wie du verschiedene Dateitypen in Astro importieren kannst. |
true |
import RecipeLinks from "/components/RecipeLinks.astro";
import ReadMore from '/components/ReadMore.astro';
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) - 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 oder die Astro Markdoc-Integration installieren und .mdx oder .mdoc 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.
// Link zu /public/reports/annual/2024.pdf
Lade den <a href="/reports/annual/2024.pdf">Jahresbericht 2024 als PDF herunter</a>.
// Um /public/assets/cats/ginger.jpg anzuzeigen
<img src="/assets/cats/ginger.jpg" alt="Eine orangefarbene Katze, die auf einem Bett schläft.">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.
:::note[JSX-Dateien importieren]
Ein geeignetes UI-Framework (React, Preact, oder Solid) ist erforderlich, um JSX/TSX-Dateien zu rendern.
Verwende gegebenenfalls die Erweiterungen .jsx/.tsx, da Astro JSX in .js/.ts-Dateien nicht unterstützt.
:::
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 Skript-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 zur Verfügung.
:::note[TypeScript und Dateierweiterungen]
Gemäß TypeScripts Regeln zur Modulauflösung sollten die Dateierweiterungen .ts und .tsx beim Import von TypeScript-Dateien nicht verwendet werden. Verwende stattdessen entweder die Dateierweiterungen .js/.jsx oder lasse die Dateierweiterung ganz weg.
import { getUser } from './user.js'; // user.ts
import MyComponent from "./MyComponent"; // MyComponent.tsx:::
Lies mehr über TypeScript-Unterstützung in Astro.
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 musst du deine vite config anpassen, damit es funktioniert.
:::caution Einige Pakete sind auf eine Browser-Umgebung angewiesen. Astro-Komponenten laufen auf dem Server, daher kann der Import dieser Pakete im Frontmatter zu Fehlern führen. :::
// 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.
Lies mehr über fortgeschrittene Anwendungsfälle für den CSS-Import, wie z.B. eine direkte URL-Referenz für eine CSS-Datei oder den Import von CSS als String im Styling-Leitfaden.
// 1. Konvertiert die Klassennamen aus './style.module.css' in eindeutige Werte, welche für diesen Bereich verfügbar sind (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.src} alt="Bildbeschreibung" />;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.
Lies mehr über das Anhängen von Vite-Importparametern (z.B. ?url, ?raw) in Vite's Leitfaden für den Umgang mit statischen Assets.
:::note
Das Hinzufügen von Alt-Text zu <img>-Tags wird aus Gründen der Zugänglichkeit empfohlen! Vergiss nicht, deinen Bildelementen das Attribut alt="eine hilfreiche Beschreibung" hinzuzufügen. Du kannst das Attribut einfach leer lassen, wenn das Bild rein dekorativ ist.
:::
Ein Aliasname (kurz Alias) ist eine Möglichkeit, um Abkürzungen für Importpfade zu erstellen.
Aliasnamen können dabei helfen, die Entwicklungserfahrung in Codebasen mit vielen Verzeichnissen oder relativen Importpfaden zu verbessern.
---
import Button from '../../components/controls/Button.astro';
import logoUrl from '../../assets/logo.png?url';
---In diesem Beispiel müsste man bei der Entwicklung die Baumbeziehung zwischen src/pages/about/company.astro, src/components/controls/Button.astro und src/assets/logo.png berücksichtigen, um die richtigen relativen Importpfade definieren zu können. Und falls die Datei company.astro jemals verschoben werden sollte, müssten diese Importpfade ebenfalls aktualisiert werden.
Du kannst Import-Aliase in tsconfig.json hinzufügen
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@assets/*": ["src/assets/*"]
}
}
}:::note
Stelle sicher, dass compilerOptions.baseUrl gesetzt ist, damit die Pfade mit Aliasnamen aufgelöst werden können.
:::
Der Entwicklungsserver wird nach dieser Konfigurationsänderung automatisch neu gestartet. Du kannst jetzt die Aliase überall in deinem Projekt importieren:
---
import Button from '@components/controls/Button.astro';
import logoUrl from '@assets/logo.png?url';
---Die von dir definierten Aliasnamen werden auch automatisch in VS Code und andere Editoren integriert.
Mit Vite's import.meta.glob() kannst du viele Dateien auf einmal importieren, indem du Glob-Muster verwendest, um passende Dateipfade zu finden.
Die Funktion import.meta.glob() nimmt als Parameter ein relatives Glob-Muster, das den lokalen Dateien entspricht, die du importieren möchtest. Sie gibt ein Array mit den Exporten jeder passenden Datei zurück. Um alle übereinstimmenden Module im Voraus zu laden, gibst du als zweites Argument { eager: true } an:
---
// importiert alle Dateien, die mit `.md` in `./src/pages/post/` enden
const matches = import.meta.glob('../pages/post/*.md', { eager: true });
const posts = Object.values(matches);
---
<!-- Erzeugt einen <Artikel> für die ersten 5 Blogbeiträge -->
<div>
{posts.slice(0, 4).map((post) => (
<article>
<h2>{post.frontmatter.title}</h2>
<p>{post.frontmatter.description}</p>
<a href={post.url}>Read more</a>
</article>
))}
</div>Astro-Komponenten, die mit import.meta.glob importiert werden, sind vom Typ AstroInstance. Du kannst jede Komponenteninstanz mit ihrer Eigenschaft default darstellen:
---
// importiert alle Dateien, die mit `.astro` in `./src/components/` enden
const components = Object.values(import.meta.glob('../components/*.astro', { eager: true }));
---
<!-- Alle unsere Komponenten anzeigen -->
{components.map((component) => (
<div>
<component.default size={24} />
</div>
))}Die Funktion import.meta.glob() von Vite unterstützt nur statische String-Literale. Sie unterstützt keine dynamischen Variablen und keine String-Interpolation.
Eine gängige Lösung ist es, stattdessen eine größere Menge an Dateien zu importieren, die alle benötigten Dateien enthält, und diese dann zu filtern:
---
// src/components/featured.astro
const { postSlug } = Astro.props;
const pathToMyFeaturedPost = `src/pages/blog/${postSlug}.md`;
const posts = Object.values(import.meta.glob("../pages/blog/*.md", { eager: true }));
const myFeaturedPost = posts.find(post => post.file.includes(pathToMyFeaturedPost));
---
<p>
Schau dir meinen Lieblingspost, <a href={myFeaturedPost.url}>{myFeaturedPost.frontmatter.title}</a>, an!
</p>Markdown-Dateien, die mit import.meta.glob() geladen werden, geben die folgende MarkdownInstance-Schnittstelle zurück.
export interface MarkdownInstance<T extends Record<string, any>> {
/* Alle im YAML-Frontmatter dieser Datei angegebenen Daten */
frontmatter: T;
/* Der absolute Dateipfad für diese Datei */
file: string;
/* Der gerenderte Pfad zu dieser Datei */
url: string | undefined;
/* Astro-Komponente, die den Inhalt dieser Datei wiedergibt */
Content: AstroComponentFactory;
/** (nur Markdown) Roher Inhalt der Markdown-Datei, ohne Layout-HTML und YAML-Frontmatter */
rawContent(): string;
/** (nur Markdown) Markdown-Datei, die zu HTML kompiliert wurde, ohne Layout-HTML */
compiledContent(): string;
/* Funktion, die ein Array mit den h1...h6-Elementen in dieser Datei zurückgibt */
getHeadings(): Promise<{ depth: number; slug: string; text: string }[]>;
default: AstroComponentFactory;
}Du kannst optional einen Typ für die Variable frontmatter angeben, indem du eine TypeScript-Generik verwendest.
---
import type { MarkdownInstance } from 'astro';
interface Frontmatter {
title: string;
description?: string;
}
const posts = Object.values(import.meta.glob<MarkdownInstance<Frontmatter>>('./posts/**/*.md', { eager: true }));
---
<ul>
{posts.map(post => <li>{post.frontmatter.title}</li>)}
</ul>Astro-Dateien haben die folgende Schnittstelle:
export interface AstroInstance {
/* Der Dateipfad für diese Datei */
file: string;
/* Die URL für diese Datei (wenn sie sich im Seitenverzeichnis befindet) */
url: string | undefined;
default: AstroComponentFactory;
}Andere Dateien können verschiedene Schnittstellen haben, aber import.meta.glob() akzeptiert eine TypeScript-Generik, wenn du genau weißt, was ein nicht erkannter Dateityp enthält.
---
interface CustomDataFile {
default: Record<string, any>;
}
const data = import.meta.glob<CustomDataFile>('../data/**/*.js');
---Ein Glob-Muster ist ein Dateipfad, der spezielle Platzhalterzeichen unterstützt. Es wird verwendet, um mehrere Dateien in deinem Projekt gleichzeitig zu referenzieren.
Das globale Muster ./pages/**/*.{md,mdx} beginnt zum Beispiel im Unterverzeichnis pages, durchsucht alle Unterverzeichnisse (/**) und passt auf jeden Dateinamen (/*), der entweder auf .md oder .mdx (.{md,mdx}) endet.
Um mit import.meta.glob() verwendet zu werden, muss das Glob-Muster ein String-Literal sein und darf keine Variablen enthalten.
Außerdem müssen die Glob-Muster 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-Musters] (https://github.com/mrmlnc/fast-glob#pattern-syntax).
Inhaltssammlungen bieten eine getCollection() API zum Laden mehrerer Dateien anstelle von import.meta.glob(). Wenn deine Inhaltsdateien (z.B. Markdown, MDX, Markdoc) in Sammlungen innerhalb des Verzeichnisses src/content/ liegen, verwende getCollection(), um eine Sammlung abzufragen und Inhaltseinträge zurückzugeben.
// 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.) zu vermeiden, wann immer es möglich ist. Astro ist mit mehreren Laufzeiten kompatibel, die Adapter verwenden. 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>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 „Plugins finden“ der Vite-Dokumentation.
:::note[Pluginkonfiguration] In der Dokumentation deines Plugins findest du Informationen zu den Konfigurationsoptionen und zur korrekten Installation. :::
<RecipeLinks slugs={["de/recipes/add-yaml-support"]} />