CINXE.COM

<!doctype html><html lang="en-US" prefix="og: https://ogp.me/ns#"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://developer.mozilla.org/favicon-48x48.bc390275e955dacb2e65.png"/><link rel="apple-touch-icon" href="https://developer.mozilla.org/apple-touch-icon.528534bba673c38049c2.png"/><meta name="theme-color" content="#ffffff"/><link rel="manifest" href="https://developer.mozilla.org/manifest.f42880861b394dd4dc9b.json"/><link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="MDN Web Docs"/><title>JavaScript-Module - JavaScript | MDN</title><link rel="alternate" title="JavaScript modules" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules" hrefLang="en"/><link rel="alternate" title="Módulos JavaScript" href="https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules" hrefLang="es"/><link rel="alternate" title="Les modules JavaScript" href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules" hrefLang="fr"/><link rel="alternate" title="JavaScript モジュール" href="https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules" hrefLang="ja"/><link rel="alternate" title="JavaScript modules" href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules" hrefLang="ko"/><link rel="alternate" title="Módulos JavaScript" href="https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Modules" hrefLang="pt"/><link rel="alternate" title="Модули JavaScript" href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Modules" hrefLang="ru"/><link rel="alternate" title="JavaScript 模块" href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Modules" hrefLang="zh"/><link rel="alternate" title="JavaScript-Module" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Modules" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modulsyntax zu beginnen."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Modules"/><meta property="og:title" content="JavaScript-Module - JavaScript | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modulsyntax zu beginnen."/><meta property="og:image" content="https://developer.mozilla.org/mdn-social-share.d893525a4fb5fb1f67a2.png"/><meta property="og:image:type" content="image/png"/><meta property="og:image:height" content="1080"/><meta property="og:image:width" content="1920"/><meta property="og:image:alt" content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."/><meta property="og:site_name" content="MDN Web Docs"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="MozDevNet"/><link rel="canonical" href="https://developer.mozilla.org/de/docs/Web/JavaScript/Guide/Modules"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-javascript document-page"><div class="top-banner loading"><section class="place top container"></section></div><div class="sticky-header-container"><header class="top-navigation "><div class="container "><div class="top-navigation-wrap"><a href="/de/" class="logo" aria-label="MDN homepage"><svg id="mdn-docs-logo" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 694.9 104.4" style="enable-background:new 0 0 694.9 104.4" xml:space="preserve" role="img"><title>MDN Web Docs</title><path d="M40.3 0 11.7 92.1H0L28.5 0h11.8zm10.4 0v92.1H40.3V0h10.4zM91 0 62.5 92.1H50.8L79.3 0H91zm10.4 0v92.1H91V0h10.4z" class="logo-m"></path><path d="M627.9 95.6h67v8.8h-67v-8.8z" class="logo-_"></path><path d="M367 42h-4l-10.7 30.8h-5.5l-10.8-26h-.4l-10.5 26h-5.2L308.7 42h-3.8v-5.6H323V42h-6.5l6.8 20.4h.4l10.3-26h4.7l11.2 26h.5l5.7-20.3h-6.2v-5.6H367V42zm34.9 20c-.4 3.2-2 5.9-4.7 8.2-2.8 2.3-6.5 3.4-11.3 3.4-5.4 0-9.7-1.6-13.1-4.7-3.3-3.2-5-7.7-5-13.7 0-5.7 1.6-10.3 4.7-14s7.4-5.5 12.9-5.5c5.1 0 9.1 1.6 11.9 4.7s4.3 6.9 4.3 11.3c0 1.5-.2 3-.5 4.7h-25.6c.3 7.7 4 11.6 10.9 11.6 2.9 0 5.1-.7 6.5-2 1.5-1.4 2.5-3 3-4.9l6 .9zM394 51.3c.2-2.4-.4-4.7-1.8-6.9s-3.8-3.3-7-3.3c-3.1 0-5.3 1-6.9 3-1.5 2-2.5 4.4-2.8 7.2H394zm51 2.4c0 5-1.3 9.5-4 13.7s-6.9 6.2-12.7 6.2c-6 0-10.3-2.2-12.7-6.7-.1.4-.2 1.4-.4 2.9s-.3 2.5-.4 2.9h-7.3c.3-1.7.6-3.5.8-5.3.3-1.8.4-3.7.4-5.5V22.3h-6v-5.6H416v27c1.1-2.2 2.7-4.1 4.7-5.7 2-1.6 4.8-2.4 8.4-2.4 4.6 0 8.4 1.6 11.4 4.7 3 3.2 4.5 7.6 4.5 13.4zm-7.7.6c0-4.2-1-7.4-3-9.5-2-2.2-4.4-3.3-7.4-3.3-3.4 0-6 1.2-8 3.7-1.9 2.4-2.9 5-3 7.7V57c0 3 1 5.6 3 7.7s4.5 3.1 7.6 3.1c3.6 0 6.3-1.3 8.1-3.9 1.8-2.7 2.7-5.9 2.7-9.6zm69.2 18.5h-13.2v-7.2c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2 5.7 0 9.8 2.2 12.3 6.5V22.3h-8.6v-5.6h15.8v50.6h6v5.5zM493.2 56v-4.4c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm53.1-1.4c0 5.6-1.8 10.2-5.3 13.7s-8.2 5.3-13.9 5.3-10.1-1.7-13.4-5.1c-3.3-3.4-5-7.9-5-13.5 0-5.3 1.6-9.9 4.7-13.7 3.2-3.8 7.9-5.7 14.2-5.7s11 1.9 14.1 5.7c3 3.7 4.6 8.1 4.6 13.3zm-7.7-.2c0-4-1-7.2-3-9.5s-4.8-3.5-8.2-3.5c-3.6 0-6.4 1.2-8.3 3.7s-2.9 5.6-2.9 9.5c0 3.7.9 6.8 2.8 9.4 1.9 2.6 4.6 3.9 8.3 3.9 3.6 0 6.4-1.3 8.4-3.8 1.9-2.6 2.9-5.8 2.9-9.7zm45 5.8c-.4 3.2-1.9 6.3-4.4 9.1-2.5 2.9-6.4 4.3-11.8 4.3-5.2 0-9.4-1.6-12.6-4.8-3.2-3.2-4.8-7.7-4.8-13.7 0-5.5 1.6-10.1 4.7-13.9 3.2-3.8 7.6-5.7 13.2-5.7 2.3 0 4.6.3 6.7.8 2.2.5 4.2 1.5 6.2 2.9l1.5 9.5-5.9.7-1.3-6.1c-2.1-1.2-4.5-1.8-7.2-1.8-3.5 0-6.1 1.2-7.7 3.7-1.7 2.5-2.5 5.7-2.5 9.6 0 4.1.9 7.3 2.7 9.5 1.8 2.3 4.4 3.4 7.8 3.4 5.2 0 8.2-2.9 9.2-8.8l6.2 1.3zm34.7 1.9c0 3.6-1.5 6.5-4.6 8.5s-7 3-11.7 3c-5.7 0-10.6-1.2-14.6-3.6l1.2-8.8 5.7.6-.2 4.7c1.1.5 2.3.9 3.6 1.1s2.6.3 3.9.3c2.4 0 4.5-.4 6.5-1.3 1.9-.9 2.9-2.2 2.9-4.1 0-1.8-.8-3.1-2.3-3.8s-3.5-1.3-5.8-1.7-4.6-.9-6.9-1.4c-2.3-.6-4.2-1.6-5.7-2.9-1.6-1.4-2.3-3.5-2.3-6.3 0-4.1 1.5-6.9 4.6-8.5s6.4-2.4 9.9-2.4c2.6 0 5 .3 7.2.9 2.2.6 4.3 1.4 6.1 2.4l.8 8.8-5.8.7-.8-5.7c-2.3-1-4.7-1.6-7.2-1.6-2.1 0-3.7.4-5.1 1.1-1.3.8-2 2-2 3.8 0 1.7.8 2.9 2.3 3.6 1.5.7 3.4 1.2 5.7 1.6 2.2.4 4.5.8 6.7 1.4 2.2.6 4.1 1.6 5.7 3 1.4 1.6 2.2 3.7 2.2 6.6zM197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" class="logo-text"></path></svg></a><button title="Open main menu" type="button" class="button action has-icon main-menu-toggle" aria-haspopup="menu" aria-label="Open main menu" aria-expanded="false"><span class="button-wrap"><span class="icon icon-menu "></span><span class="visually-hidden">Open main menu</span></span></button></div><div class="top-navigation-main"><nav class="main-nav" aria-label="Main menu"><ul class="main-menu nojs"><li class="top-level-entry-container active"><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FModules" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FModules" target="_self" rel="nofollow" class="button primary mdn-plus-subscribe-link"><span class="button-wrap">Sign up for free</span></a></li></ul></div></div></header><div class="article-actions-container"><div class="container"><button type="button" class="button action has-icon sidebar-button" aria-label="Expand sidebar" aria-expanded="false" aria-controls="sidebar-quicklinks"><span class="button-wrap"><span class="icon icon-sidebar "></span></span></button><nav class="breadcrumbs-container" aria-label="Breadcrumb"><ol typeof="BreadcrumbList" vocab="https://schema.org/" aria-label="breadcrumbs"><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Webtechnologie für Entwickler</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/JavaScript" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/JavaScript/Guide" class="breadcrumb" property="item" typeof="WebPage"><span property="name">JavaScript-Leitfaden</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Web/JavaScript/Guide/Modules" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">JavaScript-Module</span></a><meta property="position" content="4"/></li></ol></nav><div class="article-actions"><button type="button" class="button action has-icon article-actions-toggle" aria-label="Article actions"><span class="button-wrap"><span class="icon icon-ellipses "></span><span class="article-actions-dialog-heading">Article Actions</span></span></button><ul class="article-actions-entries"><li class="article-actions-entry"><div class="languages-switcher-menu open-on-focus-within"><button id="languages-switcher-button" type="button" class="button action small has-icon languages-switcher-menu" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-language "></span>Deutsch<span title="Diese Übersetzung ist Teil eines Experiments."><span class="icon icon-experimental "></span></span></span></button><div class="hidden"><ul class="submenu language-menu " aria-labelledby="language-menu-button"><li class=" "><form class="submenu-item locale-redirect-setting"><div class="group"><label class="switch"><input type="checkbox" name="locale-redirect"/><span class="slider"></span><span class="label">Remember language</span></label><a href="https://github.com/orgs/mdn/discussions/739" rel="external noopener noreferrer" target="_blank" title="Enable this setting to automatically switch to this language when it's available. (Click to learn more.)"><span class="icon icon-question-mark "></span></a></div></form></li><li class=" "><a data-locale="en-US" href="/en-US/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="es" href="/es/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>Español</span></a></li><li class=" "><a data-locale="fr" href="/fr/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>Français</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="ko" href="/ko/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>한국어</span></a></li><li class=" "><a data-locale="pt-BR" href="/pt-BR/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>Português (do Brasil)</span></a></li><li class=" "><a data-locale="ru" href="/ru/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>Русский</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Web/JavaScript/Guide/Modules" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#hintergrund_zu_modulen">Hintergrund zu Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einführung_eines_beispiels">Einführung eines Beispiels</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grundlegende_beispielstruktur">Grundlegende Beispielstruktur</a></li><li class="document-toc-item "><a class="document-toc-link" href="#exportieren_von_modulfunktionen">Exportieren von Modulfunktionen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#funktionen_in_ihr_skript_importieren">Funktionen in Ihr Skript importieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#module_mit_importkarten_importieren">Module mit Importkarten importieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#laden_von_nicht-javascript-ressourcen">Laden von Nicht-JavaScript-Ressourcen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#anwenden_des_moduls_auf_ihr_html">Anwenden des Moduls auf Ihr HTML</a></li><li class="document-toc-item "><a class="document-toc-link" href="#weitere_unterschiede_zwischen_modulen_und_klassischen_skripten">Weitere Unterschiede zwischen Modulen und klassischen Skripten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#standardexporte_versus_benannte_exporte">Standardexporte versus benannte Exporte</a></li><li class="document-toc-item "><a class="document-toc-link" href="#vermeidung_von_namenskonflikten">Vermeidung von Namenskonflikten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#umbenennen_von_importen_und_exporten">Umbenennen von Importen und Exporten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_eines_modulobjekts">Erstellen eines Modulobjekts</a></li><li class="document-toc-item "><a class="document-toc-link" href="#module_und_klassen">Module und Klassen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#aggregieren_von_modulen">Aggregieren von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamisches_laden_von_modulen">Dynamisches Laden von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#top-level-await">Top-Level-Await</a></li><li class="document-toc-item "><a class="document-toc-link" href="#import-deklarationen_werden_gehoben">Import-Deklarationen werden gehoben</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zyklische_importe">Zyklische Importe</a></li><li class="document-toc-item "><a class="document-toc-link" href="#isomorphe_module_erstellen">Isomorphe Module erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#fehlerbehebung">Fehlerbehebung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Web/JavaScript">JavaScript</a></li><li class="section">Tutorials und Anleitungen</li><li class="toggle"><details><summary>Tutorials für Anfänger</summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">Ihre erste Webseite: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></li></ol></details></li><li class="toggle"><details open=""><summary>JavaScript-Handbuch</summary><ol><li><a href="/de/docs/Web/JavaScript/Guide/Introduction">Einführung</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Grammar_and_types">Grammatik und Typen</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Steuerfluss und Fehlerbehandlung</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Loops_and_iteration">Schleifen und Iteration</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Functions">Funktionen</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Expressions_and_operators">Ausdrücke und Operatoren</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Numbers_and_strings">Zahlen und Zeichenketten</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Representing_dates_times">Darstellung von Daten und Uhrzeiten</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Regular_expressions">Reguläre Ausdrücke</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Indexed_collections">Indexierte Sammlungen</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Keyed_collections">Schlüsselbasierte Sammlungen</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Working_with_objects">Arbeiten mit Objekten</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Using_classes">Verwendung von Klassen</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Using_promises">Verwendung von Promises</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Typed_arrays">Typisierte Arrays in JavaScript</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Iterators_and_generators">Iteratoren und Generatoren</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Internationalization">Internationalisierung</a></li><li><a href="/de/docs/Web/JavaScript/Guide/Meta_programming">Metaprogrammierung</a></li><li><em><a href="/de/docs/Web/JavaScript/Guide/Modules" aria-current="page">JavaScript-Module</a></em></li></ol></details></li><li class="toggle"><details><summary>Mittelstufe</summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Clientseitige Web-APIs</a></li><li><a href="/de/docs/Web/JavaScript/Language_overview">Sprachübersicht</a></li><li><a href="/de/docs/Web/JavaScript/Data_structures">JavaScript-Datenstrukturen</a></li><li><a href="/de/docs/Web/JavaScript/Equality_comparisons_and_sameness">Gleichheitsvergleiche und Gleichheit</a></li><li><a href="/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Aufzählbarkeit und Eigentum von Eigenschaften</a></li><li><a href="/de/docs/Web/JavaScript/Closures">Closures</a></li></ol></details></li><li class="toggle"><details><summary>Fortgeschritten</summary><ol><li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und die Prototypenkette</a></li><li><a href="/de/docs/Web/JavaScript/Memory_management">Speicherverwaltung</a></li><li><a href="/de/docs/Web/JavaScript/Event_loop">Konkurrenzmodell und Ereignisschleife</a></li></ol></details></li><li class="section"><a href="/de/docs/Web/JavaScript/Reference">Referenzen</a></li><li class="toggle"><details><summary>Eingebaute Objekte</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/AggregateError">AggregateError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction">AsyncFunction</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator">AsyncGenerator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncGeneratorFunction">AsyncGeneratorFunction</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator">AsyncIterator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics">Atomics</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array">BigInt64Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array">BigUint64Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean">Boolean</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/DataView">DataView</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date">Datum</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/decodeURI">decodeURI()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent">decodeURIComponent()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/encodeURI">encodeURI()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent">encodeURIComponent()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Error">Error</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/escape">escape()</a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError">EvalError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry">FinalizationRegistry</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Float16Array">Float16Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Float32Array">Float32Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Float64Array">Float64Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Generator">Generator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction">GeneratorFunction</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis">globalThis</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Int16Array">Int16Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Int32Array">Int32Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Int8Array">Int8Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError">InternalError</a><abbr class="icon icon-nonstandard" title="Nicht standardisiert. Überprüfen Sie vor der Verwendung die Browser-Kompatibilität."> <span class="visually-hidden">Nicht standardisiert</span> </abbr></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Intl">Intl</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/isFinite">isFinite()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Iterator">Iterator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Map">Map</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat">parseFloat()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/parseInt">parseInt()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy">Proxy</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RangeError">RangeError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Reflect">Reflect</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp">RegExp</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Set">Set</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer">SharedArrayBuffer</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Symbol">Symbol</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Temporal">Temporal</a><abbr class="icon icon-experimental" title="Experimentell. Das Verhalten könnte sich in Zukunft ändern."> <span class="visually-hidden">Experimentell</span> </abbr></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">TypedArray</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError">TypeError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array">Uint16Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array">Uint32Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array">Uint8Array</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray">Uint8ClampedArray</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/unescape">unescape()</a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/URIError">URIError</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/WeakMap">WeakMap</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/WeakRef">WeakRef</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/WeakSet">WeakSet</a></li></ol></details></li><li class="toggle"><details><summary>Ausdrücke und Operatoren</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Operators">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Addition">Addition (+)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Addition_assignment">Addition Assignment (+=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment">Zuweisung (=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/async_function*">async function* Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/await">await</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_AND">Bitweises UND (&)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment">Bitweise UND-Zuweisung (&=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT">Bitweise NOT (~)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_OR">Bitweises Oder (|)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment">Bitweises OR-Zuweisung (|=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR">Bitweises XOR (^)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment">Bitweises XOR-Zuweisung (^=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/class">Klassenausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Comma_operator">Komma-Operator (,)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Conditional_operator">Bedingungsoperator (Ternärer Operator)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Decrement">Decrement (--)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/delete">delete</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Destructuring-Zuweisung</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Division">Division (/)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Division_assignment">Division assignment (/=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Equality">Gleichheit (==)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Exponentiation">Potenzierung (**)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment">Exponentiation-Zuweisung (**=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/function">function expression</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/function*">function* Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Greater_than">Greater than (>)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal">Greater than or equal (>=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Grouping">Gruppierungsoperator ( )</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/import.meta">import.meta</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/import">import()</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/in">in</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Increment">Increment (++)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Inequality">Inequality (!=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Left_shift">Left shift (<<)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment">Left shift assignment (<<=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Less_than">Less than (<)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal">Less than or equal (<=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_AND">Logisches UND (&&)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment">Logical AND assignment (&&=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_NOT">Logisches NICHT (!)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_OR">Logical OR (||)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment">Logische ODER-Zuweisung (||=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Multiplication">Multiplication (*)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment">Multiplikationszuweisung (*=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/new">new</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/null">null</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment">Nullish coalescing assignment (??=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing">Nullish coalescing-Operator (??)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer">Objekt Initializer</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Operator_precedence">Operatorpriorität</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional Chaining (?.)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Property_accessors">Property accessors</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Remainder">Remainder (%)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Remainder_assignment">Remainder-Zuweisung (%=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Right_shift">Rechtsschiebung (>>)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment">Right shift assignment (>>=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread-Syntax (...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Strict_equality">Strikte Gleichheit (===)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Strict_inequality">Strikte Ungleichheit (!==)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Subtraction">Subtraction (-)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment">Subtraction assignment (-=)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/super">super</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/this">this</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Unary_negation">Unäre Negation (-)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Unary_plus">Unary plus (+)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift">Unsigned right shift (>>>)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment">Unsigned right shift assignment (`>>>=`)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/void">void operator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/yield">yield</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Operators/yield*">yield*</a></li></ol></details></li><li class="toggle"><details><summary>Anweisungen und Deklarationen</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Statements">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/async_function">async function</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/async_function*">async function*</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/block">Block Statement</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/break">break</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/class">class</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/const">const</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/continue">continue</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/debugger">debugger</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/Empty">Empty Statement</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/export">export</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/Expression_statement">Expression statement</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/for">for</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/for-await...of">for await...of</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/function">function</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/function*">function*</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/import">import</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/label">Labelierte Anweisung</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/let">let</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/return">return</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/switch">switch</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/throw">throw</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/var">var</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/while">while</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Statements/with">with</a><abbr class="icon icon-deprecated" title="Veraltet. Nicht empfohlen für neue Webseiten."> <span class="visually-hidden">Veraltet</span> </abbr></li></ol></details></li><li class="toggle"><details><summary>Funktionen</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Functions">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Pfeilfunktionen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/get">get</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/Method_definitions">Methodendefinitionen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-Parameter</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/set">set</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Functions/arguments">Das arguments Objekt</a></li></ol></details></li><li class="toggle"><details><summary>Klassen</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Classes">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/extends">extends</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/Private_properties">Private properties</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/Public_class_fields">Öffentliche Klassenfelder</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/static">static</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks">Statische Initialisierungsblöcke</a></li></ol></details></li><li class="toggle"><details><summary>Reguläre Ausdrücke</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Backreference">Backreference: \1, \2</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Capturing_group">Capturing group: (...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape">Zeichenklassen-Escape: \d, \D, \w, \W, \s, \S</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_class">Zeichenklasse: [...], [^...]</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape">Zeichen-Escape: \n, \u{...}</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Disjunction">Disjunktion: |</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Input_boundary_assertion">Input-Bereichs-Assertion: ^, $</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character">Literalzeichen: a, b</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion">Lookahead-Assertion: (?=...), (?!...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion">Lookbehind Assertion: (?<=...), (?<!...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Modifier">Modifikator: (?ims-ims:...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference">Benannte Rückreferenz: \k<name></a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group">Named capturing group: (?<name>...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Non-capturing_group">Nicht erfassende Gruppe: (?:...)</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier">Quantifier: *, +, ?, {n}, {n,}, {n,m}</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape">Unicode-Zeichenklassenescapes: \p{...}, \P{...}</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard">Wildcard: .</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Regular_expressions/Word_boundary_assertion">Wortgrenzen-Assertion: \b, \B</a></li></ol></details></li><li class="toggle"><details><summary>Fehler</summary><ol><li><a href="/de/docs/Web/JavaScript/Reference/Errors">Übersicht</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Promise_any_all_rejected">AggregateError: Kein Promise in Promise.any wurde aufgelöst</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Property_access_denied">Fehler: Zugriff verweigert auf Eigenschaft "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Too_much_recursion">InternalError: zu viel Rekursion</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point">RangeError: argument ist kein gültiger Codepunkt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/BigInt_division_by_zero">RangeError: BigInt-Division durch Null</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/BigInt_negative_exponent">RangeError: BigInt negative exponent</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Form_must_be_one_of">RangeError: form muss einer von 'NFC', 'NFD', 'NFKC' oder 'NFKD' sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_array_length">RangeError: invalid array length</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_date">RangeError: invalid date</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Precision_range">RangeError: precision liegt außerhalb des zulässigen Bereichs</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_radix">RangeError: radix muss eine ganze Zahl sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large">RangeError: repeat count muss kleiner als unendlich sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count">RangeError: repeat count must be non-negative</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_be_converted_to_BigInt_because_it_isnt_an_integer">RangeError: x kann nicht in BigInt konvertiert werden, da es keine ganze Zahl ist</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" ist nicht definiert</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Undeclared_var">ReferenceError: Zuordnung zu einer nicht deklarierten Variable "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init">ReferenceError: kann auf lexikalische Deklaration 'X' vor der Initialisierung nicht zugreifen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage">ReferenceError: veraltete Verwendung von caller oder arguments</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Super_not_called">ReferenceError: 'super' Konstruktor muss vor der Verwendung von 'this' im Konstruktor der abgeleiteten Klasse aufgerufen werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Super_called_twice">ReferenceError: super() zweimal im abgeleiteten Klassenkonstruktor aufgerufen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_strict_arguments_eval">SyntaxError: 'arguments'/'eval' können im Strict-Mode-Code nicht definiert oder zugewiesen werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal">SyntaxError: "0"-präfixierte Oktalliterale sind veraltet</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params">SyntaxError: "use strict" nicht erlaubt in Funktion mit nicht einfachen Parametern</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Reserved_identifier">SyntaxError: "x" ist ein reservierter Bezeichner</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_backslash_at_end_of_pattern">SyntaxError: \ am Ende des Musters</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer">SyntaxError: Eine Deklaration im Kopf einer for-of-Schleife darf keinen Initialisierer haben</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode">SyntaxError: Die Anwendung des 'delete'-Operators auf einen unqualifizierten Namen ist veraltet</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Arguments_not_allowed">SyntaxError: arguments ist in Feldern nicht gültig</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_await">SyntaxError: await ist nur in async Funktionen, async Generatoren und Modulen gültig</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/await_yield_in_parameter">SyntaxError: await/yield expression kann nicht im Parameter verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized">SyntaxError: `??` kann nicht ohne Klammern innerhalb von `||` und `&&`-Ausdrücken verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_character_class_escape_in_class_range">SyntaxError: Zeichenklassen-Escape kann nicht im Klassenbereich im regulären Ausdruck verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_continue">SyntaxError: continue muss innerhalb einer Schleife sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_duplicate_capture_group_name">SyntaxError: doppelter Name der Erfassungsgruppe im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Duplicate_parameter">SyntaxError: doppeltes formales Argument x</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">SyntaxError: Deklarationen im Kopf einer for-in-Schleife dürfen keine Initialisierer enthalten</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement">SyntaxError: Funktionsanweisung erfordert einen Namen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Function_label">SyntaxError: Funktionen können nicht beschriftet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Either_be_both_static_or_non-static">SyntaxError: Getter und Setter für privaten Namen #x sollten entweder beide statisch oder nicht statisch sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Getter_no_arguments">SyntaxError: Getter-Funktionen dürfen keine Argumente haben</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Identifier_after_number">SyntaxError: identifier starts immediately after numeric literal</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Illegal_character">SyntaxError: illegales Zeichen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/import_decl_module_top_level">SyntaxError: import-Deklarationen dürfen nur auf der obersten Ebene eines Moduls erscheinen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_incomplete_quantifier">SyntaxError: unvollständiger Quantifizierer im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side">SyntaxError: invalid assignment left-hand side</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_BigInt_syntax">SyntaxError: Ungültige BigInt-Syntax</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_capture_group_name">SyntaxError: ungültiger Name der Erfassungsgruppe im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_char_in_class">SyntaxError: ungültiges Zeichen in Klasse in regulärem Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_class_set_operation">SyntaxError: Ungültige Klassenmengenoperation im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_decimal_escape">SyntaxError: ungültiger Dezimal-Escape in regulärem Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_identity_escape">SyntaxError: ungültige Identitätsflucht in regulärem Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_named_capture_reference">SyntaxError: ungültige benannte Referenz in regulärem Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_property_name">SyntaxError: ungültiger Eigenschaftsname im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_range_in_character_class">SyntaxError: invalid range in character class</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_group">SyntaxError: invalid regexp group</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag">SyntaxError: invalid regular expression flag "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_unicode_escape">SyntaxError: ungültiger Unicode-Escape in regulärem Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse">SyntaxError: JSON.parse: Fehlerhaftes Parsing</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Label_not_found">SyntaxError: label not found</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id">SyntaxError: missing : after property id</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition">SyntaxError: missing ) after condition</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list">SyntaxError: missing ] after element list</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body">SyntaxError: fehlende } nach Funktionskörper</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list">SyntaxError: missing } after property list</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const">SyntaxError: missing = in const declaration</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter">SyntaxError: missing formal parameter</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator">SyntaxError: missing name after . operator</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/No_variable_name">SyntaxError: missing variable name</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_negated_char_class_with_strings">SyntaxError: Negierte Zeichenklasse mit Strings im regulären Ausdruck</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_new_optional">SyntaxError: new-Schlüsselwort kann nicht mit einer Optionalen Kette verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_nothing_to_repeat">SyntaxError: nothing to repeat</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_numbers_out_of_order_in_quantifier">SyntaxError: numbers out of order in {} quantifier.</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_escape_sequence">SyntaxError: Oktale Escape-Sequenzen können nicht in nicht-getaggten Vorlagenliteralen oder im Strict Mode-Code verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Parameter_after_rest_parameter">SyntaxError: parameter nach Rest-Parameter</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_delete_private_fields">SyntaxError: private fields können nicht gelöscht werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Duplicate_proto">SyntaxError: Eigenschaftenname __proto__ erscheint mehr als einmal im Objektliteral</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Regex_raw_bracket">SyntaxError: Raw-Klammern sind im regulären Ausdruck mit Unicode-Flag nicht erlaubt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter">SyntaxError: redeclaration of formal parameter "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Undeclared_private_field_or_method">SyntaxError: Verweis auf nicht deklariertes privates Feld oder Methode #x</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Rest_with_default">SyntaxError: Restparameter darf keinen Standardwert haben</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_return">SyntaxError: return not in function</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Setter_one_argument">SyntaxError: Setter-Funktionen müssen ein Argument haben</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/String_literal_EOL">SyntaxError: string literal enthält einen nicht-escaped Zeilenumbruch</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_super_call">SyntaxError: super() ist nur in Konstruktoren abgeleiteter Klassen gültig</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_optional_template">SyntaxError: getaggtes Template kann nicht mit optionaler Verkettung verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Hash_outside_class">SyntaxError: Unerwartetes '#' außerhalb des Klassenkörpers verwendet</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Unerwartetes Token</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_break">SyntaxError: unlabeled break muss innerhalb einer Schleife oder eines Switch sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Unparenthesized_unary_expr_lhs_exponentiation">SyntaxError: unverklammerter unärer Ausdruck kann nicht auf der linken Seite von '**' erscheinen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Bad_super_prop">SyntaxError: Verwendung von Super-Eigenschaften/-mitgliedern ist nur innerhalb von Methoden oder eval-Code innerhalb von Methoden gültig</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma">SyntaxError: Die Verwendung von //@ zur Angabe von sourceURL-Pragmas ist veraltet. Verwenden Sie stattdessen //#</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/is_not_iterable">TypeError: 'x' ist nicht iterierbar</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" ist (nicht) "y"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Not_a_constructor">TypeError: "x" ist kein Konstruktor</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: "x" ist keine Funktion</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/No_non-null_object">TypeError: "x" ist kein nicht-null-Objekt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Read-only">TypeError: "x" ist schreibgeschützt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/BigInt_not_serializable">TypeError: BigInt-Wert kann nicht in JSON serialisiert werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Builtin_ctor_no_new">TypeError: Der Aufruf eines eingebauten X-Konstruktors ohne new ist verboten</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Get_set_missing_private">TypeError: kann nicht auf privates Feld oder Methode zugreifen/setzen: Objekt ist nicht die richtige Klasse</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property">TypeError: kann Eigenschaft „x“ auf „y“ nicht zuweisen: kein Objekt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_convert_BigInt_to_number">TypeError: can't convert BigInt to number</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_convert_x_to_BigInt">TypeError: kann x nicht in BigInt konvertieren</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible">TypeError: kann Eigenschaft "x" nicht definieren: "obj" ist nicht erweiterbar</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element">TypeError: can't delete non-configurable array element</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property">TypeError: kann nicht konfigurierbare Eigenschaft "x" neu definieren</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_set_prototype">TypeError: kann das Prototyp dieses Objekts nicht festlegen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cyclic_prototype">TypeError: kann Prototyp nicht setzen: würde einen Prototyp-Kettenzyklus verursachen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/in_operator_no_object">TypeError: kann den 'in'-Operator nicht verwenden, um nach 'x' in 'y' zu suchen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Class_ctor_no_new">TypeError: Klassenkonstruktoren müssen mit 'new' aufgerufen werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value">TypeError: cyclic object value</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_derived_return">TypeError: abgeleiteter Klassenkonstruktor hat einen ungültigen Wert x zurückgegeben</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Private_setter_only">TypeError: getting private setter-only property</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Private_double_initialization">TypeError: Initialisierung eines Objekts zweimal ist ein Fehler bei privaten Feldern/Methoden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand">TypeError: ungültiger 'instanceof'-Operand 'x'</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Array_sort_argument">TypeError: invalides Array.prototype.sort Argument</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment">TypeError: ungültige Zuweisung zu const "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Constructor_cant_be_used_directly">TypeError: Iterator/AsyncIterator-Konstruktor kann nicht direkt verwendet werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Requires_global_RegExp">TypeError: matchAll/replaceAll muss mit einem globalen RegExp aufgerufen werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/More_arguments_needed">TypeError: Mehr Argumente benötigt</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/No_properties">TypeError: null/undefined hat keine Eigenschaften</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_delete">TypeError: Eigenschaft "x" ist nicht konfigurierbar und kann nicht gelöscht werden</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value">TypeError: Reduce eines leeren Arrays ohne initialen Wert</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Getter_only">TypeError: Einstellung der nur-Getter-Eigenschaft "x"</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Key_not_weakly_held">TypeError: WeakSet-Schlüssel/WeakMap-Wert 'x' muss ein Objekt oder ein nicht registriertes Symbol sein</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type">TypeError: X.prototype.y auf inkompatiblen Typ aufgerufen</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Malformed_URI">URIError: malformed URI sequence</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Already_has_pragma">Warnung: -file- wird ein //# sourceMappingURL zugewiesen, hat aber bereits eines</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Errors/Stmt_after_return">Warnung: unerreichbarer Code nach return-Anweisung</a></li></ol></details></li><li class="toggle"><details><summary>Sonstiges</summary><ol><li><a href="/de/docs/Web/JavaScript/JavaScript_technologies_overview">Übersicht über JavaScript-Technologien</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Lexical_grammar">Lexikalische Grammatik</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Iteration_protocols">Iterationsprotokolle</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strenger Modus</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Template_literals">Template-Literale</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Trailing_commas">Abschließende Kommas</a></li><li><a href="/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Veraltete Funktionen</a></li></ol></details></li></ol></div></div><section class="place side"></section></nav></aside><div class="toc-container"><aside class="toc"><nav><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#hintergrund_zu_modulen">Hintergrund zu Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einführung_eines_beispiels">Einführung eines Beispiels</a></li><li class="document-toc-item "><a class="document-toc-link" href="#grundlegende_beispielstruktur">Grundlegende Beispielstruktur</a></li><li class="document-toc-item "><a class="document-toc-link" href="#exportieren_von_modulfunktionen">Exportieren von Modulfunktionen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#funktionen_in_ihr_skript_importieren">Funktionen in Ihr Skript importieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#module_mit_importkarten_importieren">Module mit Importkarten importieren</a></li><li class="document-toc-item "><a class="document-toc-link" href="#laden_von_nicht-javascript-ressourcen">Laden von Nicht-JavaScript-Ressourcen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#anwenden_des_moduls_auf_ihr_html">Anwenden des Moduls auf Ihr HTML</a></li><li class="document-toc-item "><a class="document-toc-link" href="#weitere_unterschiede_zwischen_modulen_und_klassischen_skripten">Weitere Unterschiede zwischen Modulen und klassischen Skripten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#standardexporte_versus_benannte_exporte">Standardexporte versus benannte Exporte</a></li><li class="document-toc-item "><a class="document-toc-link" href="#vermeidung_von_namenskonflikten">Vermeidung von Namenskonflikten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#umbenennen_von_importen_und_exporten">Umbenennen von Importen und Exporten</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_eines_modulobjekts">Erstellen eines Modulobjekts</a></li><li class="document-toc-item "><a class="document-toc-link" href="#module_und_klassen">Module und Klassen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#aggregieren_von_modulen">Aggregieren von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamisches_laden_von_modulen">Dynamisches Laden von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#top-level-await">Top-Level-Await</a></li><li class="document-toc-item "><a class="document-toc-link" href="#import-deklarationen_werden_gehoben">Import-Deklarationen werden gehoben</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zyklische_importe">Zyklische Importe</a></li><li class="document-toc-item "><a class="document-toc-link" href="#isomorphe_module_erstellen">Isomorphe Module erstellen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#fehlerbehebung">Fehlerbehebung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#siehe_auch">Siehe auch</a></li></ul></section></div></nav></aside><section class="place side"></section></div></div><main id="content" class="main-content "><article class="main-page-content" lang="de"><header><h1>JavaScript-Module</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Web/JavaScript/Guide/Meta_programming"><span class="button-wrap"> Zurück </span></a></li></ul> <p>Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modulsyntax zu beginnen.</p></div><section aria-labelledby="hintergrund_zu_modulen"><h2 id="hintergrund_zu_modulen"><a href="#hintergrund_zu_modulen">Hintergrund zu Modulen</a></h2><div class="section-content"><p>JavaScript-Programme begannen ziemlich klein — die meisten ihrer Nutzungen in den Anfangstagen waren auf isolierte Skriptaufgaben beschränkt, die ein wenig Interaktivität zu Ihren Webseiten hinzufügten, wo nötig, sodass große Skripte im Allgemeinen nicht benötigt wurden. Spulen Sie einige Jahre vor und wir haben nun vollständige Anwendungen, die in Browsern mit einer Menge JavaScript ausgeführt werden, sowie JavaScript, das in anderen Kontexten verwendet wird (z. B. <a href="/de/docs/Glossary/Node.js">Node.js</a>).</p> <p>Komplexe Projekte erfordern einen Mechanismus, um JavaScript-Programme in separate Module zu unterteilen, die bei Bedarf importiert werden können. Node.js verfügt schon lange über diese Fähigkeit, und es gibt eine Reihe von JavaScript-Bibliotheken und -Frameworks, die die Nutzung von Modulen ermöglichen (zum Beispiel andere auf <a href="https://en.wikipedia.org/wiki/CommonJS" class="external" target="_blank">CommonJS</a> und <a href="https://github.com/amdjs/amdjs-api/blob/master/AMD.md" class="external" target="_blank">AMD</a> basierende Modulsysteme wie <a href="https://requirejs.org/" class="external" target="_blank">RequireJS</a>, <a href="https://webpack.js.org/" class="external" target="_blank">webpack</a> und <a href="https://babeljs.io/" class="external" target="_blank">Babel</a>).</p> <p>Alle modernen Browser unterstützen Modulfunktionen nativ, ohne dass eine Transpilation erforderlich ist. Dies kann nur von Vorteil sein — Browser können das Laden von Modulen optimieren und es effizienter gestalten, als eine Bibliothek zu verwenden und all diese zusätzlichen Client-seitigen Verarbeitungen und zusätzlichen Rundreisen zu tun. Es macht Bundler wie webpack jedoch nicht obsolet — Bundler leisten immer noch gute Arbeit, indem sie Code in angemessen große Stücke aufteilen und andere Optimierungen wie Minifizierung, Codebereinigung und Tree-Shaking durchführen.</p></div></section><section aria-labelledby="einführung_eines_beispiels"><h2 id="einführung_eines_beispiels"><a href="#einführung_eines_beispiels">Einführung eines Beispiels</a></h2><div class="section-content"><p>Um die Nutzung von Modulen zu demonstrieren, haben wir eine <a href="https://github.com/mdn/js-examples/tree/main/module-examples" class="external" target="_blank">Reihe von Beispielen</a> erstellt, die Sie auf GitHub finden können. Diese Beispiele demonstrieren eine Reihe von Modulen, die ein <a href="/de/docs/Web/HTML/Element/canvas"><code><canvas></code></a>-Element auf einer Webseite erstellen und dann verschiedene Formen auf der Leinwand zeichnen (und Informationen darüber anzeigen).</p> <p>Diese sind recht trivial, wurden jedoch bewusst einfach gehalten, um Module klar zu demonstrieren.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Wenn Sie die Beispiele herunterladen und lokal ausführen möchten, müssen Sie sie über einen lokalen Webserver betreiben.</p> </div></div></section><section aria-labelledby="grundlegende_beispielstruktur"><h2 id="grundlegende_beispielstruktur"><a href="#grundlegende_beispielstruktur">Grundlegende Beispielstruktur</a></h2><div class="section-content"><p>In unserem ersten Beispiel (siehe <a href="https://github.com/mdn/js-examples/tree/main/module-examples/basic-modules" class="external" target="_blank">basic-modules</a>) haben wir folgende Dateistruktur:</p> <pre class="brush: plain notranslate">index.html main.js modules/ canvas.js square.js </pre> <div class="notecard note"> <p><strong>Hinweis:</strong> Alle Beispiele in diesem Leitfaden haben im Wesentlichen die gleiche Struktur; das obige sollte ziemlich vertraut werden.</p> </div> <p>Die zwei Module des Verzeichnisses "modules" werden unten beschrieben:</p> <ul> <li> <p><code>canvas.js</code> — enthält Funktionen im Zusammenhang mit der Einrichtung der Leinwand:</p> <ul> <li><code>create()</code> — erstellt eine Leinwand mit einer angegebenen <code>width</code> und <code>height</code> innerhalb eines umschließenden <a href="/de/docs/Web/HTML/Element/div"><code><div></code></a> mit einer angegebenen ID, die selbst in ein angegebenes übergeordnetes Element eingefügt wird. Gibt ein Objekt zurück, das den 2D-Kontext der Leinwand und die ID des Wrappers enthält.</li> <li><code>createReportList()</code> — erstellt eine ungeordnete Liste, die in ein angegebenes Wrapper-Element eingefügt wird und zur Ausgabe von Berichterstellungsdaten verwendet werden kann. Gibt die ID der Liste zurück.</li> </ul> </li> <li> <p><code>square.js</code> — enthält:</p> <ul> <li><code>name</code> — eine Konstante, die den String 'square' enthält.</li> <li><code>draw()</code> — zeichnet ein Quadrat auf einer angegebenen Leinwand mit einer angegebenen Größe, Position und Farbe. Gibt ein Objekt zurück, das die Größe, Position und Farbe des Quadrats enthält.</li> <li><code>reportArea()</code> — schreibt die Fläche eines Quadrats in eine spezifische Berichterstellungsliste, gegebenenfalls mit ihrer Länge.</li> <li><code>reportPerimeter()</code> — schreibt den Umfang eines Quadrats in eine spezifische Berichterstellungsliste, gegebenenfalls mit ihrer Länge.</li> </ul> </li> </ul></div></section><section aria-labelledby="nebenbemerkung_—_.mjs_versus_.js"><h3 id="nebenbemerkung_—_.mjs_versus_.js"><a href="#nebenbemerkung_—_.mjs_versus_.js">Nebenbemerkung — .mjs versus .js</a></h3><div class="section-content"><p>In diesem Artikel haben wir <code>.js</code>-Erweiterungen für unsere Moduldaten verwendet, aber in anderen Ressourcen sehen Sie möglicherweise die <code>.mjs</code>-Erweiterung verwendet. <a href="https://v8.dev/features/modules#mjs" class="external" target="_blank">V8's Dokumentation empfiehlt dies</a>, zum Beispiel. Die angegebenen Gründe sind:</p> <ul> <li>Es ist für die Klarheit gut, d. h. es macht deutlich, welche Dateien Module sind und welche normale JavaScript-Dateien sind.</li> <li>Es stellt sicher, dass Ihre Moduldaten von Laufzeitumgebungen wie <a href="https://nodejs.org/api/esm.html#esm_enabling" class="external" target="_blank">Node.js</a> und Build-Tools wie <a href="https://babeljs.io/docs/options#sourcetype" class="external" target="_blank">Babel</a> als Modul geparst werden.</li> </ul> <p>Wir haben jedoch entschieden, weiterhin <code>.js</code> zu verwenden, zumindest im Moment. Um Module korrekt in einem Browser zum Laufen zu bringen, müssen Sie sicherstellen, dass Ihr Server sie mit einem <code>Content-Type</code>-Header bereitstellt, der einen JavaScript-MIME-Typ wie <code>text/javascript</code> enthält. Wenn Sie dies nicht tun, erhalten Sie einen strengen MIME-Typ-Überprüfungsfehler in der Art von "Der Server antwortete mit einem Nicht-JavaScript-MIME-Typ" und der Browser wird Ihr JavaScript nicht ausführen. Die meisten Server setzen bereits den korrekten Typ für <code>.js</code>-Dateien, aber noch nicht für <code>.mjs</code>-Dateien. Server, die bereits <code>.mjs</code>-Dateien korrekt bereitstellen, umfassen <a href="https://pages.github.com/" class="external" target="_blank">GitHub Pages</a> und <a href="https://github.com/http-party/http-server#readme" class="external" target="_blank"><code>http-server</code></a> für Node.js.</p> <p>Dies ist in Ordnung, wenn Sie bereits eine solche Umgebung verwenden, oder wenn Sie dies nicht tun, aber wissen, was Sie tun, und Zugang haben (d. h. Sie können Ihren Server so konfigurieren, dass er den korrekten <a href="/de/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> für <code>.mjs</code>-Dateien setzt). Es könnte jedoch Verwirrung stiften, wenn Sie den Server, von dem Sie Dateien bereitstellen, nicht selbst kontrollieren, oder wenn Sie Dateien zur öffentlichen Verwendung bereitstellen, wie wir hier tun.</p> <p>Zu Lern- und Portabilitätszwecken haben wir uns entschieden, bei <code>.js</code> zu bleiben.</p> <p>Wenn Ihnen die Klarheit des Einsatzes von <code>.mjs</code> für Module im Vergleich zur Verwendung von <code>.js</code> für "normale" JavaScript-Dateien wirklich wichtig ist, Sie jedoch nicht auf das oben beschriebene Problem stoßen möchten, können Sie immer <code>.mjs</code> während der Entwicklung verwenden und sie während Ihres Build-Schritts in <code>.js</code> konvertieren.</p> <p>Es ist auch erwähnenswert, dass:</p> <ul> <li>Einige Tools möglicherweise nie <code>.mjs</code> unterstützen.</li> <li>Das Attribut <code><script type="module"></code> wird verwendet, um anzugeben, wann auf ein Modul verwiesen wird, wie unten zu sehen ist.</li> </ul></div></section><section aria-labelledby="exportieren_von_modulfunktionen"><h2 id="exportieren_von_modulfunktionen"><a href="#exportieren_von_modulfunktionen">Exportieren von Modulfunktionen</a></h2><div class="section-content"><p>Das erste, was Sie tun müssen, um auf Modulfunktionen zuzugreifen, ist, sie zu exportieren. Das erfolgt mit dem <a href="/de/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a>-Statement.</p> <p>Der einfachste Weg, es zu verwenden, besteht darin, es vor jedes Element zu setzen, das Sie aus dem Modul exportieren möchten, zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export const name = "square"; export function draw(ctx, length, x, y, color) { ctx.fillStyle = color; ctx.fillRect(x, y, length, length); return { length, x, y, color }; } </code></pre></div> <p>Sie können Funktionen, <code>var</code>, <code>let</code>, <code>const</code> und — wie wir später sehen werden — Klassen exportieren. Sie müssen Top-Level-Elemente sein: zum Beispiel können Sie <code>export</code> nicht innerhalb einer Funktion verwenden.</p> <p>Eine bequemere Möglichkeit, alle Elemente, die Sie exportieren möchten, zu exportieren, besteht darin, eine einzelne Exportanweisung am Ende Ihrer Moduldaten zu verwenden, gefolgt von einer durch Komma getrennten Liste der Funktionen, die Sie exportieren möchten, eingeklammert in geschweifte Klammern. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { name, draw, reportArea, reportPerimeter }; </code></pre></div></div></section><section aria-labelledby="funktionen_in_ihr_skript_importieren"><h2 id="funktionen_in_ihr_skript_importieren"><a href="#funktionen_in_ihr_skript_importieren">Funktionen in Ihr Skript importieren</a></h2><div class="section-content"><p>Sobald Sie einige Funktionen aus Ihrem Modul exportiert haben, müssen Sie sie in Ihr Skript importieren, um sie verwenden zu können. Der einfachste Weg, dies zu tun, sieht wie folgt aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name, draw, reportArea, reportPerimeter } from "./modules/square.js"; </code></pre></div> <p>Sie verwenden die <a href="/de/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a>-Anweisung, gefolgt von einer durch Komma getrennten Liste der Funktionen, die Sie importieren möchten, eingeschlossen in geschweifte Klammern, gefolgt vom Schlüsselwort <code>from</code>, gefolgt von dem <em>Modulspezifizierer</em>.</p> <p>Der <em>Modulspezifizierer</em> stellt eine Zeichenfolge bereit, die die JavaScript-Umgebung zu einem Pfad zur Moduldaten auflösen kann. In einem Browser könnte dies ein relativer Pfad zum Stamm des Standorts sein, was für unser <code>basic-modules</code>-Beispiel <code>/js-examples/module-examples/basic-modules</code> wäre. Hier verwenden wir jedoch stattdessen die Punkt (<code>.</code>)-Syntax, um "den aktuellen Speicherort" zu bedeuten, gefolgt vom relativen Pfad zu der Datei, die wir finden möchten. Dies ist viel besser, als jedes Mal den gesamten absoluten Pfad zu schreiben, da relative Pfade kürzer sind und die URL portabel machen — das Beispiel funktioniert immer noch, wenn Sie es an einen anderen Ort in der Verzeichnishierarchie der Website verschieben.</p> <p>Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>/js-examples/module-examples/basic-modules/modules/square.js </code></pre></div> <p>wird zu</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>./modules/square.js </code></pre></div> <p>Sie können solche Zeilen in Aktion in <a href="https://github.com/mdn/js-examples/blob/main/module-examples/basic-modules/main.js" class="external" target="_blank"><code>main.js</code></a> sehen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> In einigen Modulsystemen können Sie einen Modulspezifizierer wie <code>modules/square</code> verwenden, der kein relativer oder absoluter Pfad ist und keine Dateierweiterung hat. Diese Art von Spezifizierern kann in einer Browserumgebung verwendet werden, wenn Sie zuerst eine <a href="#module_mit_importkarten_importieren">Importkarte</a> definieren.</p> </div> <p>Sobald Sie die Funktionen in Ihr Skript importiert haben, können Sie sie verwenden, als wären sie im selben Modul definiert. Das folgende Beispiel wurde in <code>main.js</code> unter den Importzeilen gefunden:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const myCanvas = create("myCanvas", document.body, 480, 320); const reportList = createReportList(myCanvas.id); const square1 = draw(myCanvas.ctx, 50, 50, 100, "blue"); reportArea(square1.length, reportList); reportPerimeter(square1.length, reportList); </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Die importierten Werte sind schreibgeschützte Ansichten der exportierten Funktionen. Ähnlich wie bei <code>const</code>-Variablen können Sie die importierte Variable nicht neu zuweisen, aber Sie können Eigenschaften von Objektwerten ändern. Der Wert kann nur vom Modul, das ihn exportiert, neu zugewiesen werden. Siehe das <a href="/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter"><code>import</code>-Referenz</a> für ein Beispiel.</p> </div></div></section><section aria-labelledby="module_mit_importkarten_importieren"><h2 id="module_mit_importkarten_importieren"><a href="#module_mit_importkarten_importieren">Module mit Importkarten importieren</a></h2><div class="section-content"><p>Oben haben wir gesehen, wie ein Browser ein Modul mithilfe eines Modulspezifizierers importieren kann, der entweder eine absolute URL ist oder eine relative URL, die anhand der Basis-URL des Dokuments aufgelöst wurde:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name as squareName, draw } from "./shapes/square.js"; import { name as circleName } from "https://example.com/shapes/circle.js"; </code></pre></div> <p><a href="/de/docs/Web/HTML/Element/script/type/importmap">Importkarten</a> ermöglichen es Entwicklern, stattdessen fast jeden Text, den sie möchten, im Modulspezifizierer beim Importieren eines Moduls zu verwenden; die Karte liefert einen entsprechenden Wert, der den Text beim Auflösen der Modul-URL ersetzt.</p> <p>Zum Beispiel definiert der <code>imports</code>-Schlüssel in der folgenden Importkarte ein JSON-Objekt für die "Modulspezifiziererkarte", bei dem die Eigenschaftenamen als Modulspezifizierer verwendet werden können und die entsprechenden Werte ersetzt werden, wenn der Browser die Modul-URL auflöst. Die Werte müssen absolute oder relative URLs sein. Relative URLs werden zu absoluten URLs unter Verwendung der <a href="/de/docs/Web/HTML/Element/base">Basis-URL</a> des Dokuments, das die Importkarte enthält, aufgelöst.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><script type="importmap"> { "imports": { "shapes": "./shapes/square.js", "shapes/square": "./modules/shapes/square.js", "https://example.com/shapes/square.js": "./shapes/square.js", "https://example.com/shapes/": "/shapes/square/", "../shapes/square": "./shapes/square.js" } } </script> </code></pre></div> <p>Die Importkarte wird mithilfe eines <a href="/de/docs/Web/HTML/Element/script/type/importmap#import_map_json_representation">JSON-Objekts</a> innerhalb eines <code><script></code>-Elements mit dem <code>type</code>-Attribut, das auf <a href="/de/docs/Web/HTML/Element/script/type/importmap"><code>importmap</code></a> gesetzt ist, definiert. Beachten Sie, dass eine Importkarte nur auf das Dokument angewendet wird — die Spezifikation deckt nicht ab, wie eine Importkarte in einem Worker- oder Worklet-Kontext angewendet wird. </p> <p>Mit dieser Karte können Sie jetzt die obigen Eigenschaftsnamen als Modulspezifizierer verwenden. Wenn auf dem Modulspezifizierer-Schlüssel kein Schrägstrich folgt, wird der gesamte Modulspezifizierer-Schlüssel abgeglichen und ersetzt. Beispielsweise verwenden wir unten einfache Modulnamen und remappen eine URL zu einem anderen Pfad.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// Bare module names as module specifiers import { name as squareNameOne } from "shapes"; import { name as squareNameTwo } from "shapes/square"; // Remap a URL to another URL import { name as squareNameThree } from "https://example.com/shapes/square.js"; </code></pre></div> <p>Wenn der Modulspezifizierer einen nachgestellten Schrägstrich hat, muss der Wert ebenfalls einen haben, und der Schlüssel wird als "Pfadpräfix" abgeglichen. Dies ermöglicht die Neuzuordnung ganzer Klassen von URLs.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// Remap a URL as a prefix ( https://example.com/shapes/) import { name as squareNameFour } from "https://example.com/shapes/moduleshapes/square.js"; </code></pre></div> <p>Es ist möglich, dass mehrere Schlüssel in einer Importkarte gültige Übereinstimmungen für einen Modulspezifizierer darstellen. Ein Modulspezifizierer wie <code>shapes/circle/</code> könnte etwa mit den Modulspezifiziererschlüsseln <code>shapes/</code> und <code>shapes/circle/</code> übereinstimmen. In diesem Fall wählt der Browser den spezifischsten (längsten) übereinstimmenden Modulspezifiziererschlüssel.</p> <p>Importkarten ermöglichen es, Module mit einfachen Modulnamen zu importieren (wie in Node.js) und können auch das Importieren von Modulen aus Paketen simulieren, sowohl mit als auch ohne Dateierweiterungen. Obwohl es oben nicht gezeigt ist, ermöglichen sie es auch, bestimmte Versionen einer Bibliothek basierend auf dem Pfad des Skripts, das das Modul importiert, zu importieren. Im Allgemeinen ermöglichen sie es Entwicklern, ergonomischeren Importcode zu schreiben und die Verwaltung der verschiedenen Versionen und Abhängigkeiten der durch eine Seite verwendeten Module zu vereinfachen. Dies kann den Aufwand verringern, der erforderlich ist, um dieselben JavaScript-Bibliotheken sowohl im Browser als auch auf dem Server zu verwenden.</p> <p>Die folgenden Abschnitte erweitern die verschiedenen oben beschriebenen Funktionen.</p></div></section><section aria-labelledby="funktionsüberprüfung"><h3 id="funktionsüberprüfung"><a href="#funktionsüberprüfung">Funktionsüberprüfung</a></h3><div class="section-content"><p>Sie können die Unterstützung für Importkarten mithilfe der statischen Methode <a href="/de/docs/Web/API/HTMLScriptElement/supports_static"><code>HTMLScriptElement.supports()</code></a> überprüfen (die selbst weitgehend unterstützt wird):</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>if (HTMLScriptElement.supports?.("importmap")) { console.log("Browser supports import maps."); } </code></pre></div></div></section><section aria-labelledby="module_als_einfache_namen_importieren"><h3 id="module_als_einfache_namen_importieren"><a href="#module_als_einfache_namen_importieren">Module als einfache Namen importieren</a></h3><div class="section-content"><p>In einigen JavaScript-Umgebungen, wie Node.js, können Sie einfache Namen für den Modulspezifizierer verwenden. Dies funktioniert, weil die Umgebung Modulnamen in eine Standardposition im Dateisystem auflösen kann. Zum Beispiel könnten Sie die folgende Syntax verwenden, um das "square"-Modul zu importieren.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name, draw, reportArea, reportPerimeter } from "square"; </code></pre></div> <p>Um einfache Namen im Browser zu verwenden, benötigen Sie eine Importkarte, die die Informationen bereitstellt, die der Browser benötigt, um Modulspezifizierer in URLs aufzulösen (JavaScript wird einen <code>TypeError</code> werfen, wenn es versucht, einen Modulspezifizierer zu importieren, der nicht in eine Modulspeicherort aufgelöst werden kann).</p> <p>Im Folgenden sehen Sie eine Karte, die einen <code>square</code>-Modulspezifiziererschlüssel definiert, der in diesem Fall zu einem relativen Adresswert abgebildet wird.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><script type="importmap"> { "imports": { "square": "./shapes/square.js" } } </script> </code></pre></div> <p>Mit dieser Karte können wir jetzt einen einfachen Namen verwenden, wenn wir das Modul importieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name as squareName, draw } from "square"; </code></pre></div></div></section><section aria-labelledby="modulpfade_neu_zuordnen"><h3 id="modulpfade_neu_zuordnen"><a href="#modulpfade_neu_zuordnen">Modulpfade neu zuordnen</a></h3><div class="section-content"><p>Eingaben in Modulspezifiziererkarte, bei denen sowohl der Spezifiziererschlüssel als auch sein zugeordneter Wert einen nachgestellten Schrägstrich (<code>/</code>) haben, können als Pfadpräfix verwendet werden. Dies ermöglicht die Neuzuordnung eines ganzen Satzes von Import-URLs von einem Standort zu einem anderen. Es kann auch verwendet werden, um die Arbeit mit "Paketen und Modulen" zu emulieren, wie Sie es möglicherweise im Node-Ökosystem sehen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Der nachgestellte <code>/</code> zeigt an, dass der Modulspezifiziererschlüssel als <em>Teil</em> eines Modulspezifizierers ersetzt werden kann. Wenn dies nicht vorhanden ist, wird der Browser nur den gesamten Modulspezifiziererschlüssel abgleichen (und ihn ersetzen).</p> </div> <h4 id="modulpakete">Modulpakete</h4> <p>Die folgende JSON-Importkarten-Definition ordnet <code>lodash</code> als einfachen Namen zu und das Modulspezifiziererpräfix <code>lodash/</code> dem Pfad <code>/node_modules/lodash-es/</code> (aufgelöst zur Basis-URL des Dokuments):</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "imports": { "lodash": "/node_modules/lodash-es/lodash.js", "lodash/": "/node_modules/lodash-es/" } } </code></pre></div> <p>Mit dieser Zuordnung können Sie sowohl das gesamte "Paket" mithilfe des einfachen Namens als auch Module darin (mithilfe der Pfadzuordnung) importieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import _ from "lodash"; import fp from "lodash/fp.js"; </code></pre></div> <p>Es ist möglich, <code>fp</code> ohne die <code>.js</code>-Dateierweiterung zu importieren, aber Sie müssten dafür einen einfachen Modulspezifiziererschlüssel erstellen, wie <code>lodash/fp</code>, anstatt den Pfad zu verwenden. Dies kann für nur ein Modul vernünftig sein, skaliert jedoch schlecht, wenn Sie viele Module importieren möchten.</p> <h4 id="allgemeine_url-neuzuordnung">Allgemeine URL-Neuzuordnung</h4> <p>Ein Modulspezifiziererschlüssel muss kein Pfad sein — er kann auch eine absolute URL (oder ein URL-ähnlicher relativer Pfad wie <code>./</code>, <code>../</code>, <code>/</code>) sein. Dies kann nützlich sein, wenn Sie ein Modul, das absolute Pfade zu einem Ressourcen hat, mit Ihren eigenen lokalen Ressourcen neu zuordnen möchten.</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "imports": { "https://www.unpkg.com/moment/": "/node_modules/moment/" } } </code></pre></div></div></section><section aria-labelledby="gescopte_module_für_versionsverwaltung"><h3 id="gescopte_module_für_versionsverwaltung"><a href="#gescopte_module_für_versionsverwaltung">Gescopte Module für Versionsverwaltung</a></h3><div class="section-content"><p>Ökosysteme wie Node verwenden Paketmanager wie npm, um Module und deren Abhängigkeiten zu verwalten. Der Paketmanager stellt sicher, dass jedes Modul von anderen Modulen und deren Abhängigkeiten getrennt ist. Infolgedessen kann eine komplexe Anwendung dasselbe Modul unter mehreren verschiedenen Versionen importieren, in verschiedenen Bereichen des Modulgraphen, aber Benutzer brauchen sich darüber nicht den Kopf zu zerbrechen.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Sie können auch Versionsverwaltung mithilfe von relativen Pfaden erreichen, aber dies ist suboptimal, weil dies unter anderem eine bestimmte Struktur auf Ihr Projekt erzwingt und Sie daran hindert, einfache Modulnamen zu verwenden.</p> </div> <p>Mit Importkarten können Sie ähnlich mehrere Versionen von Abhängigkeiten in Ihrer Anwendung haben und auf sie unter demselben Modulspezifizierer verweisen. Sie implementieren dies mit dem <code>scopes</code>-Schlüssel, der es Ihnen ermöglicht, Modulspezifizierer-Karten bereitzustellen, die je nach dem Pfad des Skripts verwendet werden, das den Import durchführt. Das folgende Beispiel demonstriert dies.</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "imports": { "cool-module": "/node_modules/cool-module/index.js" }, "scopes": { "/node_modules/dependency/": { "cool-module": "/node_modules/some/other/location/cool-module/index.js" } } } </code></pre></div> <p>Mit dieser Zuordnung wird die Version in <code>/node_modules/some/other/location/cool-module/index.js</code> verwendet, wenn ein Skript mit einer URL, die <code>/node_modules/dependency/</code> enthält, <code>cool-module</code> importiert. Die Karte in <code>imports</code> wird als Fallback verwendet, wenn es keine passende Scoper in der gescopten Karte gibt oder die passenden Scopes keinen passenden Spezifizierer enthalten. Zum Beispiel, wenn <code>cool-module</code> von einem Skript mit einem nicht übereinstimmenden Scope-Pfad importiert wird, dann wird die Modulspezifizierer-Karte in <code>imports</code> stattdessen verwendet, das passend auf die Version in <code>/node_modules/cool-module/index.js</code> abbildet.</p> <p>Beachtest, dass der Pfad, der verwendet wird, um einen Scope zu wählen, die Art und Weise, wie die Adresse aufgelöst wird, nicht beeinflusst. Der Wert im angegebenen Pfad muss nicht mit dem Scopes-Pfad übereinstimmen, und relative Pfade werden weiterhin zur Basis-URL des Skripts aufgelöst, das die Importkarte enthält.</p> <p>Gerade bei Modulspezifizierer-Karten können Sie viele Scope-Schlüssel haben, und diese können sich überschneidende Pfade enthalten. Wenn mehrere Scopes mit dem Referrer-URL übereinstimmen, wird zuerst der spezifischste Scope-Pfad auf Übereinstimmung überprüft (der längste Scopes-Schlüssel). Wenn es dafür keinen passenden Spezifizierer gibt, fällt der Browser auf den nächsten spezifischsten zutreffenden gescopten Pfad zurück und so weiter. Wenn es in keinem der passenden Scopes einen passenden Spezifizierer gibt, überprüft der Browser die Modulspezifizierer-Karte im <code>imports</code>-Schlüssel auf eine Übereinstimmung.</p></div></section><section aria-labelledby="verbesserung_des_cachings_durch_entfernen_von_hashes_in_dateinamen"><h3 id="verbesserung_des_cachings_durch_entfernen_von_hashes_in_dateinamen"><a href="#verbesserung_des_cachings_durch_entfernen_von_hashes_in_dateinamen">Verbesserung des Cachings durch Entfernen von Hashes in Dateinamen</a></h3><div class="section-content"><p>Skriptdateien, die von Websites verwendet werden, haben häufig Hash-Namen, um das Caching zu erleichtern. Der Nachteil dieses Ansatzes besteht darin, dass, wenn sich ein Modul ändert, alle Module, die es mit seinem Hash-Dateinamen importieren, ebenfalls aktualisiert/neu generiert werden müssen. Dies führt möglicherweise zu einer Kaskade von Aktualisierungen, was ressourcenverschwendend ist.</p> <p>Importkarten bieten eine bequeme Lösung für dieses Problem. Statt sich auf spezifische Hash-Dateinamen zu verlassen, greifen Anwendungen und Skripte stattdessen auf eine nicht-gehashte Version des Modulnamens (Adresse) zurück. Eine Importkarte wie die unten bereitgestellte bietet dann eine Zuordnung zu der tatsächlichen Skriptdatendatei.</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "imports": { "main_script": "/node/srcs/application-fg7744e1b.js", "dependency_script": "/node/srcs/dependency-3qn7e4b1q.js" } } </code></pre></div> <p>Wenn sich <code>dependency_script</code> ändert, ändert sich der nach dem Hash im Dateinamen ebenfalls. In diesem Fall müssen wir nur die Importkarte aktualisieren, um den geänderten Namen des Moduls widerzuspiegeln. Wir müssen keine Source des JavaScript-Codes, der davon abhängt, aktualisieren, weil der Spezifizierer im Import-Statement sich nicht ändert.</p></div></section><section aria-labelledby="laden_von_nicht-javascript-ressourcen"><h2 id="laden_von_nicht-javascript-ressourcen"><a href="#laden_von_nicht-javascript-ressourcen">Laden von Nicht-JavaScript-Ressourcen</a></h2><div class="section-content"><p>Eine aufregende Funktion, die eine vereinheitlichte Modularchitektur mit sich bringt, ist die Fähigkeit, Nicht-JavaScript-Ressourcen als Module zu laden. Zum Beispiel können Sie JSON als JavaScript-Objekt importieren oder CSS als <a href="/de/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a>-Objekt importieren.</p> <p>Sie müssen explizit angeben, welche Art von Ressource Sie importieren. Standardmäßig nimmt der Browser an, dass die Ressource JavaScript ist, und wird einen Fehler auslösen, wenn die aufgelöste Ressource etwas anderes ist. Um JSON, CSS oder andere Arten von Ressourcen zu importieren, verwenden Sie die <a href="/de/docs/Web/JavaScript/Reference/Statements/import/with">Import-Attribute</a> Syntax:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import colors from "./colors.json" with { type: "json" }; import styles from "./styles.css" with { type: "css" }; </code></pre></div> <p>Browser führen auch eine Validierung des Modultyps durch und werden fehlschlagen, wenn beispielsweise <code>./data.json</code> keine JSON-Datei ist. Dies stellt sicher, dass Sie nicht versehentlich Code ausführen, wenn Sie lediglich Daten importieren möchten. Sobald erfolgreich importiert, können Sie den importierten Wert jetzt als normales JavaScript-Objekt oder <code>CSSStyleSheet</code>-Objekt verwenden.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>console.log(colors.map((color) => color.value)); document.adoptedStyleSheets = [styles]; </code></pre></div></div></section><section aria-labelledby="anwenden_des_moduls_auf_ihr_html"><h2 id="anwenden_des_moduls_auf_ihr_html"><a href="#anwenden_des_moduls_auf_ihr_html">Anwenden des Moduls auf Ihr HTML</a></h2><div class="section-content"><p>Jetzt müssen wir das <code>main.js</code>-Modul auf unsere HTML-Seite anwenden. Dies ist sehr ähnlich wie das Anwenden eines regulären Skripts auf eine Seite, mit einigen bemerkenswerten Unterschieden.</p> <p>Zuerst müssen Sie <code>type="module"</code> im <a href="/de/docs/Web/HTML/Element/script"><code><script></code></a>-Element einschließen, um dieses Skript als Modul zu deklarieren. Um das <code>main.js</code>-Skript zu importieren, verwenden wir dies:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><script type="module" src="main.js"></script> </code></pre></div> <p>Sie können das Modulskript auch direkt in die HTML-Datei einbetten, indem Sie den JavaScript-Code in den Hauptteil des <code><script></code>-Elements einfügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><script type="module"> /* JavaScript module code here */ </script> </code></pre></div> <p>Sie können <code>import</code>- und <code>export</code>-Anweisungen nur in Modulen verwenden, nicht in regulären Skripten. Ein Fehler wird ausgelöst, wenn Ihr <code><script></code>-Element nicht das <code>type="module"</code>-Attribut hat und versucht, andere Module zu importieren. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html example-bad notranslate"><code><script> import _ from "lodash"; // SyntaxError: import declarations may only appear at top level of a module // ... </script> <script src="a-module-using-import-statements.js"></script>  </code></pre></div> <p>Sie sollten alle Ihre Module im Allgemeinen in separaten Dateien definieren. Inline in HTML deklarierte Module können nur andere Module importieren, aber alles, was sie exportieren, wird nicht von anderen Modulen zugänglich sein (weil sie keine URL haben).</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Module und ihre Abhängigkeiten können vorab geladen werden, indem sie in <a href="/de/docs/Web/HTML/Element/link"><code><link></code></a>-Elementen mit <a href="/de/docs/Web/HTML/Attributes/rel/modulepreload"><code>rel="modulepreload"</code></a> angegeben werden. Dies kann die Ladezeit erheblich reduzieren, wenn die Module verwendet werden.</p> </div></div></section><section aria-labelledby="weitere_unterschiede_zwischen_modulen_und_klassischen_skripten"><h2 id="weitere_unterschiede_zwischen_modulen_und_klassischen_skripten"><a href="#weitere_unterschiede_zwischen_modulen_und_klassischen_skripten">Weitere Unterschiede zwischen Modulen und klassischen Skripten</a></h2><div class="section-content"><ul> <li>Sie müssen auf lokale Tests achten — wenn Sie versuchen, die HTML-Datei lokal zu laden (d. h. mit einer <code>file://</code>-URL), stoßen Sie auf CORS-Fehler aufgrund der Sicherheitsanforderungen von JavaScript-Modulen. Sie müssen Ihre Tests über einen Server durchführen.</li> <li>Beachten Sie auch, dass Sie möglicherweise unterschiedliches Verhalten von Skriptabschnitten sehen, die in Modulen im Gegensatz zu klassischen Skripten definiert sind. Dies liegt daran, dass Module automatisch in <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Striktem Modus</a> laufen.</li> <li>Es besteht keine Notwendigkeit, das <code>defer</code>-Attribut (siehe <a href="/de/docs/Web/HTML/Element/script#attributes"><code><script></code>-Attribute</a>) beim Laden eines Modulskripts zu verwenden; Module werden automatisch verzögert.</li> <li>Module werden nur einmal ausgeführt, auch wenn sie in mehreren <code><script></code>-Tags referenziert wurden.</li> <li>Zu guter Letzt, um das klarzustellen — Modulfunktionen werden in den Gültigkeitsbereich eines einzelnen Skripts importiert — sie stehen nicht im globalen Gültigkeitsbereich zur Verfügung. Daher können Sie auf importierte Funktionen nur im Skript, in das sie importiert wurden, zugreifen, und sie werden nicht verfügbar sein von der JavaScript-Konsole aus. Sie erhalten dennoch Syntaxfehler, die in den DevTools angezeigt werden, aber Sie werden nicht in der Lage sein, einige der erwarteten Debugging-Techniken zu verwenden.</li> </ul> <p>Moduldefinierte Variablen sind im Modul-Umfang, es sei denn, sie werden explizit auf das globale Objekt angewendet. Andererseits sind global definierte Variablen innerhalb des Moduls verfügbar. Zum Beispiel, gegeben den folgenden Code:</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title></title> <link rel="stylesheet" href="" /> </head> <body> <div id="main"></div> <script> // A var statement creates a global variable. var text = "Hello"; </script> <script type="module" src="./render.js"></script> </body> </html> </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>/* render.js */ document.getElementById("main").innerText = text; </code></pre></div> <p>Die Seite würde dennoch <code>Hello</code> darstellen, da die globalen Variablen <code>text</code> und <code>document</code> im Modul verfügbar sind. (Beachten Sie auch aus diesem Beispiel, dass ein Modul nicht notwendigerweise eine Import-/Exportanweisung benötigt — das einzige, was benötigt wird, ist, dass der Einstiegspunkt <code>type="module"</code> hat.)</p></div></section><section aria-labelledby="standardexporte_versus_benannte_exporte"><h2 id="standardexporte_versus_benannte_exporte"><a href="#standardexporte_versus_benannte_exporte">Standardexporte versus benannte Exporte</a></h2><div class="section-content"><p>Die Funktionalität, die wir bisher exportiert haben, bestand aus <strong>benannten Exporten</strong> — jedes Element (sei es eine Funktion, <code>const</code>, etc.) wurde beim Export mit seinem Namen bezeichnet, und dieser Name wurde beim Import verwendet.</p> <p>Es gibt auch einen Exporttyp namens <strong>Standardexport</strong> — dieser wurde entwickelt, um es einfach zu machen, eine Standardfunktion bereitzustellen, die von einem Modul bereitgestellt wird, und hilft auch, dass JavaScript-Module mit bestehenden CommonJS- und AMD-Modulsystemen interoperieren (wie es in <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/" class="external" target="_blank">ES6 In Depth: Modules</a> von Jason Orendorff schön erklärt wird; suchen Sie nach "Standardexporte").</p> <p>Lassen Sie uns ein Beispiel betrachten, während wir erklären, wie es funktioniert. In unserem basic-modules <code>square.js</code> finden Sie eine Funktion namens <code>randomSquare()</code>, die ein Quadrat mit einer zufälligen Farbe, Größe und Position erstellt. Wir möchten dies als unseren Standard exportieren, also schreiben wir am Ende der Datei dies:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export default randomSquare; </code></pre></div> <p>Beachten Sie das Fehlen von geschweiften Klammern.</p> <p>Wir könnten stattdessen <code>export default</code> der Funktion voranstellen und es als anonyme Funktion definieren, wie dies:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export default function (ctx) { // … } </code></pre></div> <p>In unserer <code>main.js</code>-Datei importieren wir die Standardfunktion mit dieser Zeile:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import randomSquare from "./modules/square.js"; </code></pre></div> <p>Wiederum beachten Sie das Fehlen von geschweiften Klammern. Dies liegt daran, dass nur ein Standardexport pro Modul erlaubt ist, und wir wissen, dass <code>randomSquare</code> dieser ist. Die obige Zeile ist im Grunde ein Kürzel für:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { default as randomSquare } from "./modules/square.js"; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Die as-Syntax zum Umbenennen exportierter Elemente wird unten im Abschnitt <a href="#umbenennen_von_importen_und_exporten">Umbenennen von Importen und Exporten</a> erklärt.</p> </div></div></section><section aria-labelledby="vermeidung_von_namenskonflikten"><h2 id="vermeidung_von_namenskonflikten"><a href="#vermeidung_von_namenskonflikten">Vermeidung von Namenskonflikten</a></h2><div class="section-content"><p>Bisher scheinen unsere Canvas-Form-Zeichenmodule gut zu funktionieren. Aber was passiert, wenn wir ein Modul hinzufügen, das sich mit dem Zeichnen einer anderen Form wie einem Kreis oder Dreieck befasst? Diese Formen würden wahrscheinlich auch assoziierte Funktionen wie <code>draw()</code>, <code>reportArea()</code> usw. haben; wenn wir versuchen würden, verschiedene Funktionen mit demselben Namen in dieselbe oberste Modulebene zu importieren, hätten wir Konflikte und Fehler.</p> <p>Zum Glück gibt es eine Reihe von Möglichkeiten, dies zu umgehen. Wir werden uns diese in den folgenden Abschnitten ansehen.</p></div></section><section aria-labelledby="umbenennen_von_importen_und_exporten"><h2 id="umbenennen_von_importen_und_exporten"><a href="#umbenennen_von_importen_und_exporten">Umbenennen von Importen und Exporten</a></h2><div class="section-content"><p>Innerhalb der geschweiften Klammern Ihrer <code>import</code>- und <code>export</code>-Anweisung können Sie das Schlüsselwort <code>as</code> zusammen mit einem neuen Funktionsnamen verwenden, um den Namen zu ändern, den Sie für eine Funktion innerhalb des obersten Moduls verwenden werden.</p> <p>Zum Beispiel würden beide der folgenden das Gleiche tun, wenn auch auf leicht unterschiedliche Weise:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// inside module.js export { function1 as newFunctionName, function2 as anotherNewFunctionName }; // inside main.js import { newFunctionName, anotherNewFunctionName } from "./modules/module.js"; </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// inside module.js export { function1, function2 }; // inside main.js import { function1 as newFunctionName, function2 as anotherNewFunctionName, } from "./modules/module.js"; </code></pre></div> <p>Schauen wir uns ein echtes Beispiel an. In unserem <a href="https://github.com/mdn/js-examples/tree/main/module-examples/renaming" class="external" target="_blank">renaming</a>-Verzeichnis sehen Sie dasselbe Modulsystem wie im vorherigen Beispiel, außer dass wir die <code>circle.js</code>- und <code>triangle.js</code>-Module hinzugefügt haben, um Kreise und Dreiecke zu zeichnen und zu berichten.</p> <p>Innerhalb jedes dieser Module haben wir Funktionen mit denselben Namen, die exportiert werden, und somit hat jeder dieselbe <code>export</code>-Anweisung am Ende:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { name, draw, reportArea, reportPerimeter }; </code></pre></div> <p>Beim Import in <code>main.js</code>, wenn wir versuchen würden, zu verwenden</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name, draw, reportArea, reportPerimeter } from "./modules/square.js"; import { name, draw, reportArea, reportPerimeter } from "./modules/circle.js"; import { name, draw, reportArea, reportPerimeter } from "./modules/triangle.js"; </code></pre></div> <p>Würde der Browser einen Fehler wie "SyntaxError: redeclaration of import name" (Firefox) werfen.</p> <p>Stattdessen müssen wir die Importe so umbenennen, dass sie eindeutig sind:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter, } from "./modules/square.js"; import { name as circleName, draw as drawCircle, reportArea as reportCircleArea, reportPerimeter as reportCirclePerimeter, } from "./modules/circle.js"; import { name as triangleName, draw as drawTriangle, reportArea as reportTriangleArea, reportPerimeter as reportTrianglePerimeter, } from "./modules/triangle.js"; </code></pre></div> <p>Beachten Sie, dass Sie das Problem auch in den Moduldaten beheben könnten, z. B.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// in square.js export { name as squareName, draw as drawSquare, reportArea as reportSquareArea, reportPerimeter as reportSquarePerimeter, }; </code></pre></div> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// in main.js import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter, } from "./modules/square.js"; </code></pre></div> <p>Und es würde genauso funktionieren. Welche Stilrichtung Sie wählen, liegt an Ihnen; es macht jedoch mehr Sinn, Ihren Modulcode unverändert zu lassen und die Änderungen in den Imports vorzunehmen. Dies ist besonders sinnvoll, wenn Sie aus Drittanbieter-Modulen importieren, über die Sie keine Kontrolle haben.</p></div></section><section aria-labelledby="erstellen_eines_modulobjekts"><h2 id="erstellen_eines_modulobjekts"><a href="#erstellen_eines_modulobjekts">Erstellen eines Modulobjekts</a></h2><div class="section-content"><p>Die oben beschriebene Methode funktioniert gut, ist aber etwas unordentlich und umständlich. Eine noch bessere Lösung ist es, die Funktionen jedes Moduls in einem Modulobjekt zu importieren. Die folgende Syntaxform macht das:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import * as Module from "./modules/module.js"; </code></pre></div> <p>Dies erfasst alle Exporte, die innerhalb von <code>module.js</code> verfügbar sind, und macht sie als Mitglieder eines Objektes <code>Module</code> verfügbar, wodurch es effektiv seinen eigenen Namensraum erhält. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>Module.function1(); Module.function2(); </code></pre></div> <p>Wieder einmal schauen wir uns ein echtes Beispiel an. Wenn Sie zu unserem <a href="https://github.com/mdn/js-examples/tree/main/module-examples/module-objects" class="external" target="_blank">module-objects</a>-Verzeichnis gehen, sehen Sie dasselbe Beispiel erneut, aber umgeschrieben, um diese neue Syntax zu nutzen. In den Modulen sind die Exporte alle in der folgenden einfachen Form:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { name, draw, reportArea, reportPerimeter }; </code></pre></div> <p>Die Importe hingegen sehen so aus:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import * as Canvas from "./modules/canvas.js"; import * as Square from "./modules/square.js"; import * as Circle from "./modules/circle.js"; import * as Triangle from "./modules/triangle.js"; </code></pre></div> <p>In jedem Fall können Sie jetzt auf die Importe des Moduls unterhalb des angegebenen Namen des Objektes zugreifen, zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const square1 = Square.draw(myCanvas.ctx, 50, 50, 100, "blue"); Square.reportArea(square1.length, reportList); Square.reportPerimeter(square1.length, reportList); </code></pre></div> <p>Also können Sie nun den Code genauso wie zuvor schreiben (solange Sie die Objektnamen dort hinzufügen, wo nötig), und die Importe sind viel ordentlicher.</p></div></section><section aria-labelledby="module_und_klassen"><h2 id="module_und_klassen"><a href="#module_und_klassen">Module und Klassen</a></h2><div class="section-content"><p>Wie wir bereits angedeutet haben, können Sie auch Klassen exportieren und importieren; dies ist eine weitere Option, um Konflikte in Ihrem Code zu vermeiden, und besonders nützlich, wenn Ihr Modulkode bereits in einem objektorientierten Stil geschrieben wurde.</p> <p>Sie können ein Beispiel für unser Form-Zeichen-Modul, das mit ES-Klassen neu geschrieben wurde, in unserem <a href="https://github.com/mdn/js-examples/tree/main/module-examples/classes" class="external" target="_blank">classes</a>-Verzeichnis sehen. Zum Beispiel enthält die Datei <a href="https://github.com/mdn/js-examples/blob/main/module-examples/classes/modules/square.js" class="external" target="_blank"><code>square.js</code></a> jetzt all ihre Funktionalität in einer einzigen Klasse:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>class Square { constructor(ctx, listId, length, x, y, color) { // … } draw() { // … } // … } </code></pre></div> <p>die wir dann exportieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { Square }; </code></pre></div> <p>In <a href="https://github.com/mdn/js-examples/blob/main/module-examples/classes/main.js" class="external" target="_blank"><code>main.js</code></a> importieren wir es auf diese Weise:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { Square } from "./modules/square.js"; </code></pre></div> <p>Und dann verwenden wir die Klasse, um unser Quadrat zu zeichnen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue"); square1.draw(); square1.reportArea(); square1.reportPerimeter(); </code></pre></div></div></section><section aria-labelledby="aggregieren_von_modulen"><h2 id="aggregieren_von_modulen"><a href="#aggregieren_von_modulen">Aggregieren von Modulen</a></h2><div class="section-content"><p>Es wird Zeiten geben, in denen Sie Module zusammenfassen möchten. Sie könnten mehrere Ebenen von Abhängigkeiten haben, bei denen Sie die Dinge vereinfachen möchten, indem Sie mehrere Untermodule in ein übergeordnetes Modul kombinieren. Dies ist mit der Export-Syntax der folgenden Formen im übergeordneten Modul möglich:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export * from "x.js"; export { name } from "x.js"; </code></pre></div> <p>Ein Beispiel hierfür finden Sie in unserem <a href="https://github.com/mdn/js-examples/tree/main/module-examples/module-aggregation" class="external" target="_blank">module-aggregation</a>-Verzeichnis. In diesem Beispiel (basierend auf unserem vorherigen Klassenbeispiel) haben wir ein zusätzliches Modul namens <code>shapes.js</code>, das die gesamte Funktionalität von <code>circle.js</code>, <code>square.js</code> und <code>triangle.js</code> zusammenfasst. Wir haben auch unsere Untermodule in ein Unterverzeichnis innerhalb des <code>modules</code>-Verzeichnisses mit dem Namen <code>shapes</code> verschoben. Die Modulstruktur in diesem Beispiel ist:</p> <pre class="brush: plain notranslate">modules/ canvas.js shapes.js shapes/ circle.js square.js triangle.js </pre> <p>In jedem der Untermodule ist der Export von der gleichen Form, z. B.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { Square }; </code></pre></div> <p>Als nächstes folgt der Aggregationsteil. Innerhalb von <a href="https://github.com/mdn/js-examples/blob/main/module-examples/module-aggregation/modules/shapes.js" class="external" target="_blank"><code>shapes.js</code></a> schließen wir die folgenden Zeilen ein:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>export { Square } from "./shapes/square.js"; export { Triangle } from "./shapes/triangle.js"; export { Circle } from "./shapes/circle.js"; </code></pre></div> <p>Diese erfassen die Exporte aus den einzelnen Untermodule und machen sie effektiv vom Modul <code>shapes.js</code> aus verfügbar.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Die Exporte, die in <code>shapes.js</code> referenziert werden, werden im Grunde genommen durch die Datei umgeleitet und existieren dort nicht wirklich, sodass Sie dort keinen nützlichen verwandten Code schreiben können.</p> </div> <p>Also können wir im <code>main.js</code>-Skript auf alle drei Modulklassen zugreifen, indem wir</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { Square } from "./modules/square.js"; import { Circle } from "./modules/circle.js"; import { Triangle } from "./modules/triangle.js"; </code></pre></div> <p>durch die folgende einzelne Zeile ersetzen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { Square, Circle, Triangle } from "./modules/shapes.js"; </code></pre></div></div></section><section aria-labelledby="dynamisches_laden_von_modulen"><h2 id="dynamisches_laden_von_modulen"><a href="#dynamisches_laden_von_modulen">Dynamisches Laden von Modulen</a></h2><div class="section-content"><p>Eine neue Ergänzung zur Funktionalität von JavaScript-Modulen ist das dynamische Laden von Modulen. Dies ermöglicht Ihnen, Module nur dann dynamisch zu laden, wenn sie benötigt werden, anstatt alles im Voraus laden zu müssen. Dies hat offensichtliche Leistungsvorteile; lesen Sie weiter und sehen Sie, wie es funktioniert.</p> <p>Diese neue Funktionalität ermöglicht Ihnen, <a href="/de/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code></a> als Funktion aufzurufen, den Pfad zum Modul als Parameter übergebend. Es gibt ein <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> zurück, das mit einem Modulobjekt (siehe <a href="#erstellen_eines_modulobjekts">Erstellen eines Modulobjekts</a>) erfüllt wird und Ihnen Zugang zu den Exporten dieses Objekts gibt. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import("./modules/myModule.js").then((module) => { // Do something with the module. }); </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Dynamischer Import ist im Hauptthread des Browsers sowie in Shared und Dedicated Workern erlaubt. Allerdings wird <code>import()</code> eine Ausnahme werfen, wenn es in einem Service Worker oder Worklet aufgerufen wird.</p> </div>  <p>Schauen wir uns ein Beispiel an. Im <a href="https://github.com/mdn/js-examples/tree/main/module-examples/dynamic-module-imports" class="external" target="_blank">dynamic-module-imports</a>-Verzeichnis haben wir ein weiteres Beispiel, das auf unserem Klassenbeispiel basiert. Dieses Mal zeichnen wir jedoch nichts auf der Leinwand, wenn das Beispiel lädt. Stattdessen beinhalten wir drei Buttons — "Circle", "Square" und "Triangle" — die, wenn sie gedrückt werden, das erforderliche Modul dynamisch laden und dann verwenden, um die zugehörige Form zu zeichnen.</p> <p>In diesem Beispiel haben wir nur Änderungen an unseren <a href="https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/index.html" class="external" target="_blank"><code>index.html</code></a> und <a href="https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/main.js" class="external" target="_blank"><code>main.js</code></a> Dateien vorgenommen — die Modulexporte bleiben wie zuvor.</p> <p>In <code>main.js</code> haben wir eine Referenz auf jeden Button mit einer <a href="/de/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a>-Aufruf erfasst, z. B.:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const squareBtn = document.querySelector(".square"); </code></pre></div> <p>Dann hängen wir jedem Button einen Ereignis-Listener an, sodass, wenn er gedrückt wird, das relevante Modul dynamisch geladen und verwendet wird, um die Form zu zeichnen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>squareBtn.addEventListener("click", () => { import("./modules/square.js").then((Module) => { const square1 = new Module.Square( myCanvas.ctx, myCanvas.listId, 50, 50, 100, "blue", ); square1.draw(); square1.reportArea(); square1.reportPerimeter(); }); }); </code></pre></div> <p>Beachten Sie, dass, weil die Erfüllung des Versprechens ein Modulobjekt zurückgibt, die Klasse dann ein Unterfeature des Objekts ist, daher müssen wir nun auf den Konstruktor mit <code>Module.</code> davor zugreifen, z. B. <code>Module.Square( /* … */ )</code>.</p> <p>Ein weiterer Vorteil von dynamischen Importen ist, dass sie immer verfügbar sind, selbst in Skriptumgebungen. Daher, wenn Sie einen bestehenden <code><script></code>-Tag in Ihrem HTML haben, der nicht <code>type="module"</code> hat, können Sie immer noch Code, der als Module verteilt ist, durch dynamisches Importieren wiederverwenden.</p> <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><script> import("./modules/square.js").then((module) => { // Do something with the module. }); // Other code that operates on the global scope and is not // ready to be refactored into modules yet. var btn = document.querySelector(".square"); </script> </code></pre></div></div></section><section aria-labelledby="top-level-await"><h2 id="top-level-await"><a href="#top-level-await">Top-Level-Await</a></h2><div class="section-content"><p>Top-Level-Await ist eine Funktion, die in Modulen verfügbar ist. Das bedeutet, dass das <code>await</code>-Schlüsselwort verwendet werden kann. Es ermöglicht Modulen, wie große <a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">asynchrone Funktionen</a> zu agieren, was bedeutet, dass Code bewertet werden kann, bevor er in übergeordneten Modulen verwendet wird, ohne jedoch Geschwistermodule am Laden zu hindern.</p> <p>Lassen Sie uns ein Beispiel betrachten. Sie finden alle im Folgenden beschriebenen Dateien und Codes im <a href="https://github.com/mdn/js-examples/tree/main/module-examples/top-level-await" class="external" target="_blank"><code>top-level-await</code></a>-Verzeichnis, das aus den vorherigen Beispielen erweitert wird.</p> <p>Zuerst deklarieren wir unsere Farbpalette in einer separaten <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json" class="external" target="_blank"><code>colors.json</code></a>-Datei:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "yellow": "#F4D03F", "green": "#52BE80", "blue": "#5499C7", "red": "#CD6155", "orange": "#F39C12" } </code></pre></div> <p>Dann erstellen wir ein Modul namens <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js" class="external" target="_blank"><code>getColors.js</code></a>, das eine Fetch-Anfrage verwendet, um die <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json" class="external" target="_blank"><code>colors.json</code></a>-Datei zu laden und die Daten als Objekt zurückzugeben.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// fetch request const colors = fetch("../data/colors.json").then((response) => response.json()); export default await colors; </code></pre></div> <p>Beachten Sie die letzte Exportzeile hier.</p> <p>Wir verwenden das <code>await</code>-Schlüsselwort, bevor wir die Konstante <code>colors</code> angeben, zum Exportieren. Das bedeutet, dass andere Module, die dieses Modul enthalten, warten, bis <code>colors</code> heruntergeladen und geparst wurde, bevor sie es verwenden.</p> <p>Lassen Sie uns dieses Modul in unserer <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js" class="external" target="_blank"><code>main.js</code></a>-Datei einfügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import colors from "./modules/getColors.js"; import { Canvas } from "./modules/canvas.js"; const circleBtn = document.querySelector(".circle"); // … </code></pre></div> <p>Wir verwenden <code>colors</code> statt der zuvor verwendeten Strings, wenn wir unsere Formfunktionen aufrufen:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>const square1 = new Module.Square( myCanvas.ctx, myCanvas.listId, 50, 50, 100, colors.blue, ); const circle1 = new Module.Circle( myCanvas.ctx, myCanvas.listId, 75, 200, 100, colors.green, ); const triangle1 = new Module.Triangle( myCanvas.ctx, myCanvas.listId, 100, 75, 190, colors.yellow, ); </code></pre></div> <p>Dies ist nützlich, weil der Code innerhalb von <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js" class="external" target="_blank"><code>main.js</code></a> nicht ausgeführt wird, bis der Code in <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js" class="external" target="_blank"><code>getColors.js</code></a> ausgeführt wurde. Es wird jedoch das Laden anderer Module nicht blockieren. Beispielsweise wird unser <a href="https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/canvas.js" class="external" target="_blank"><code>canvas.js</code></a> Modul weiterhin laden, während <code>colors</code> abgerufen wird.</p></div></section><section aria-labelledby="import-deklarationen_werden_gehoben"><h2 id="import-deklarationen_werden_gehoben"><a href="#import-deklarationen_werden_gehoben">Import-Deklarationen werden gehoben</a></h2><div class="section-content"><p>Import-Deklarationen werden <a href="/de/docs/Glossary/Hoisting">gehoben</a>. In diesem Fall bedeutet das, dass die importierten Werte im Modulcode verfügbar sind, noch bevor sie deklariert sind, und dass die Nebeneffekte des importierten Moduls produziert werden, bevor der Rest des Modulcodes beginnt zu laufen.</p> <p>Zum Beispiel würde das Importieren von <code>Canvas</code> in der Mitte des Codes in <code>main.js</code> trotzdem funktionieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// … const myCanvas = new Canvas("myCanvas", document.body, 480, 320); myCanvas.create(); import { Canvas } from "./modules/canvas.js"; myCanvas.createReportList(); // … </code></pre></div> <p>Dennoch wird es als gute Praxis angesehen, alle Ihre Imports am Anfang des Codes zu platzieren, was es einfacher macht, Abhängigkeiten zu analysieren.</p></div></section><section aria-labelledby="zyklische_importe"><h2 id="zyklische_importe"><a href="#zyklische_importe">Zyklische Importe</a></h2><div class="section-content"><p>Module können andere Module importieren, und diese Module können andere Module importieren und so weiter. Dies bildet einen <a href="https://de.wikipedia.org/wiki/Gerichteter_Graph" class="external" target="_blank">gerichteten Graphen</a>, der als "Abhängigkeitsgraph" bezeichnet wird. Idealweise ist dieser Graph <a href="https://de.wikipedia.org/wiki/Gerichteter_azyklischer_Graph" class="external" target="_blank">azyklisch</a>. In diesem Fall kann der Graph mithilfe einer Tiefensuche ausgewertet werden.</p> <p>Zyklen sind jedoch oft unvermeidlich. Zyklische Importe entstehen, wenn Modul <code>a</code> Modul <code>b</code> importiert, aber <code>b</code> direkt oder indirekt von <code>a</code> abhängt. Zum Beispiel:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// -- a.js -- import { b } from "./b.js"; // -- b.js -- import { a } from "./a.js"; // Cycle: // a.js ───> b.js // ^ │ // └─────────┘ </code></pre></div> <p>Zyklische Importe schlagen nicht immer fehl. Der Wert der importierten Variable wird nur abgerufen, wenn die Variable tatsächlich verwendet wird (was das <a href="/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter">Live-Binding</a> ermöglicht), und nur wenn die Variable zu diesem Zeitpunkt uninitialisiert bleibt, wird ein <a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init"><code>ReferenceError</code></a> geworfen.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// -- a.js -- import { b } from "./b.js"; setTimeout(() => { console.log(b); // 1 }, 10); export const a = 2; // -- b.js -- import { a } from "./a.js"; setTimeout(() => { console.log(a); // 2 }, 10); export const b = 1; </code></pre></div> <p>In diesem Beispiel werden sowohl <code>a</code> als auch <code>b</code> asynchron verwendet. Daher wird während der Auswertung des Moduls weder <code>b</code> noch <code>a</code> tatsächlich gelesen, sodass der restliche Code wie gewohnt ausgeführt wird und die beiden <code>export</code>-Deklarationen die Werte von <code>a</code> und <code>b</code> produzieren. Dann, nach dem Timeout, stehen sowohl <code>a</code> als auch <code>b</code> zur Verfügung, sodass auch die beiden <code>console.log</code>-Anweisungen wie gewohnt ausgeführt werden.</p> <p>Wenn Sie den Code so ändern, dass <code>a</code> synchron verwendet wird, schlägt die Modulauswertung fehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// -- a.js (entry module) -- import { b } from "./b.js"; export const a = 2; // -- b.js -- import { a } from "./a.js"; console.log(a); // ReferenceError: Cannot access 'a' before initialization export const b = 1; </code></pre></div> <p>Dies liegt daran, dass JavaScript bei der Auswertung von <code>a.js</code> zuerst <code>b.js</code>, die Abhängigkeit von <code>a.js</code>, auswerten muss. <code>b.js</code> verwendet jedoch <code>a</code>, das noch nicht verfügbar ist.</p> <p>Auf der anderen Seite verläuft die Modulauswertung erfolgreich, wenn Sie den Code so ändern, dass <code>b</code> synchron, aber <code>a</code> asynchron verwendet wird:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// -- a.js (entry module) -- import { b } from "./b.js"; console.log(b); // 1 export const a = 2; // -- b.js -- import { a } from "./a.js"; setTimeout(() => { console.log(a); // 2 }, 10); export const b = 1; </code></pre></div> <p>Dies liegt daran, dass die Auswertung von <code>b.js</code> normal abgeschlossen wird, sodass der Wert von <code>b</code> verfügbar ist, wenn <code>a.js</code> ausgewertet wird.</p> <p>Sie sollten normalerweise zyklische Importe in Ihrem Projekt vermeiden, weil sie Ihren Code fehleranfälliger machen. Einige gängige Zykleneliminationstechniken sind:</p> <ul> <li>Zusammenführen der beiden Module in ein Modul.</li> <li>Verschieben des gemeinsam genutzten Codes in ein drittes Modul.</li> <li>Verschieben von etwas Code von einem Modul zum anderen.</li> </ul> <p>Zyklische Importe können jedoch auch auftreten, wenn Bibliotheken voneinander abhängig sind, was schwerer zu beheben ist.</p></div></section><section aria-labelledby="isomorphe_module_erstellen"><h2 id="isomorphe_module_erstellen"><a href="#isomorphe_module_erstellen">Isomorphe Module erstellen</a></h2><div class="section-content"><p>Die Einführung von Modulen fördert das Javascript-Ökosystem, Code modular zu verteilen und wiederzuverwenden. Das bedeutet jedoch nicht unbedingt, dass ein Stück JavaScript-Code in jeder Umgebung ausgeführt werden kann. Angenommen, Sie haben ein Modul gefunden, das SHA-Hashes für die Passwörter Ihrer Benutzer generiert. Können Sie es im Browser-Frontend verwenden? Können Sie es auf Ihrem Node.js-Server verwenden? Die Antwort lautet: Es kommt darauf an.</p> <p>Module haben nach wie vor Zugriff auf globale Variablen, wie zuvor demonstriert. Wenn das Modul globale Variablen wie <code>window</code> referenziert, kann es im Browser ausgeführt werden, aber es wird auf Ihrem Node.js-Server einen Fehler auslösen, weil <code>window</code> dort nicht verfügbar ist. Wenn der Code zwingend auf <code>process</code> zugreifen muss, kann es nur in Node.js verwendet werden.</p> <p>Um die Wiederverwendbarkeit eines Moduls zu maximieren, wird häufig empfohlen, den Code "isomorph" zu machen — das heißt, dass er in jeder Laufzeitumgebung dasselbe Verhalten zeigt. Dies wird üblicherweise auf drei Arten erreicht:</p> <ul> <li> <p>Trennen Sie Ihre Module in "Kern" und "Bindung". Für den "Kern" konzentrieren Sie sich auf die reine JavaScript-Logik wie das Berechnen des Hashs, ohne DOM-, Netzwerke- oder Dateizugriff, und machen Sie Dienstprogramme zugänglich. Im "Bindung"-Teil können Sie aus dem globalen Kontext lesen und schreiben. Beispielsweise könnte die "Browser-Bindung" wählen, den Wert aus einem Eingabefeld zu lesen, während die "Node-Bindung" ihn von <code>process.env</code> liest, aber Werte, die von beiden Orten stammen, werden an dieselbe Kernfunktion weitergeleitet und auf die gleiche Weise behandelt. Der Kern kann in jeder Umgebung importiert und auf die gleiche Weise verwendet werden, während nur die Bindung, was normalerweise leichtgewichtig ist, platform-spezifisch sein muss.</p> </li> <li> <p>Überprüfen Sie, ob ein bestimmtes globales Objekt existiert, bevor Sie es verwenden. Beispielsweise, wenn Sie überprüfen, dass <code>typeof window === "undefined"</code> ist, wissen Sie, dass Sie sich wahrscheinlich in einer Node.js-Umgebung befinden und auf den DOM nicht zugreifen sollten.</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// myModule.js let password; if (typeof process !== "undefined") { // We are running in Node.js; read it from `process.env` password = process.env.PASSWORD; } else if (typeof window !== "undefined") { // We are running in the browser; read it from the input box password = document.getElementById("password").value; } </code></pre></div> <p>Dies ist vorzuziehen, wenn die beiden Zweige tatsächlich am Ende dasselbe Verhalten erreichen ("isomorph"). Wenn es unmöglich ist, die gleiche Funktionalität zur Verfügung zu stellen oder wenn dies dazu führt, dass signifikante Massen an Code geladen werden, während ein Großteil davon ungenutzt bleibt, verwenden Sie besser unterschiedliche "Bindings" stattdessen.</p> </li> <li> <p>Verwenden Sie ein Polyfill, um ein Back-up für fehlende Funktionen bereitzustellen. Wenn Sie die <a href="/de/docs/Web/API/Fetch_API"><code>fetch</code></a>-Funktion verwenden möchten, die in Node.js erst ab Version 18 unterstützt wird, können Sie eine ähnliche API verwenden, wie die, die von <a href="https://www.npmjs.com/package/node-fetch" class="external" target="_blank"><code>node-fetch</code></a> bereitgestellt wird. Sie können dies bedingt durch dynamische Importe tun:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>// myModule.js if (typeof fetch === "undefined") { // We are running in Node.js; use node-fetch globalThis.fetch = (await import("node-fetch")).default; } // … </code></pre></div> <p>Der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis"><code>globalThis</code></a> ist ein globales Objekt, das in jeder Umgebung verfügbar ist und nützlich ist, wenn Sie globale Variablen innerhalb von Modulen lesen oder erstellen möchten.</p> </li> </ul> <p>Diese Praktiken sind nicht einzigartig für Module. Angesichts des Trends zu Code-Wiederverwendbarkeit und Modularisierung werden Sie jedoch ermutigt, Ihren Code plattformübergreifend zu machen, damit er möglichst vielen Personen zugute kommen kann. Laufzeitumgebungen wie Node.js implementieren ebenfalls aktiv Web-APIs, wo dies möglich ist, um die Interoperabilität mit dem Web zu verbessern.</p></div></section><section aria-labelledby="fehlerbehebung"><h2 id="fehlerbehebung"><a href="#fehlerbehebung">Fehlerbehebung</a></h2><div class="section-content"><p>Hier sind einige Tipps, die Ihnen helfen könnten, wenn Sie Probleme haben, Ihre Module zum Laufen zu bringen. Fühlen Sie sich frei, der Liste hinzuzufügen, wenn Sie mehr herausfinden!</p> <ul> <li>Wir haben dies zuvor erwähnt, aber zur Wiederholung: <code>.mjs</code>-Dateien müssen mit einem MIME-Typ von <code>text/javascript</code> (oder einem anderen JavaScript-kompatiblen MIME-Typ, aber <code>text/javascript</code> ist empfohlen) geladen werden, andernfalls erhalten Sie einen strengen MIME-Typ-Überprüfungsfehler wie "Der Server antwortete mit einem Nicht-JavaScript MIME-Typ".</li> <li>Wenn Sie versuchen, die HTML-Datei lokal zu laden (d. h. mit einer <code>file://</code>-URL), werden Sie auf CORS-Fehler stoßen aufgrund der Sicherheitsanforderungen von JavaScript-Modulen. Sie müssen Ihre Tests über einen Server durchführen. GitHub Pages ist ideal, da es auch <code>.mjs</code>-Dateien mit dem richtigen MIME-Typ bereitstellt.</li> <li>Da <code>.mjs</code> eine nicht standardmäßige Dateierweiterung ist, könnten einige Betriebssysteme sie nicht erkennen oder versuchen, sie durch etwas anderes zu ersetzen. Beispielsweise haben wir festgestellt, dass macOS <code>.js</code> schweigend an <code>.mjs</code>-Dateien anhängt und dann die Dateierweiterung automatisch ausblendet. Alle .mjs-Dateien waren tatsächlich als <code>x.mjs.js</code> herausgekommen. Sobald wir die automatische Ausblendung von Dateierweiterungen deaktiviert und es darauf trainiert haben, <code>.mjs</code> zu akzeptieren, war es in Ordnung.</li> </ul></div></section><section aria-labelledby="siehe_auch"><h2 id="siehe_auch"><a href="#siehe_auch">Siehe auch</a></h2><div class="section-content"><ul> <li><a href="https://v8.dev/features/modules" class="external" target="_blank">JavaScript-Module</a> auf v8.dev (2018)</li> <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/" class="external" target="_blank">ES-Module: Ein Cartoon-Tiefen-Tauchgang</a> auf hacks.mozilla.org (2018)</li> <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/" class="external" target="_blank">ES6 in Depth: Module</a> auf hacks.mozilla.org (2015)</li> <li><a href="https://exploringjs.com/es6/ch_modules.html" class="external" target="_blank">Exploring JS, Ch.16: Modules</a> von Dr. Axel Rauschmayer</li> </ul> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Web/JavaScript/Guide/Meta_programming"><span class="button-wrap"> Zurück </span></a></li></ul></div></section></article><aside class="article-footer"><div class="article-footer-inner"><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" width="162" height="162" viewBox="0 0 162 162" fill="none" role="none"><mask id="b" fill="#fff"><path d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z"></path></mask><path stroke="url(#a)" stroke-dasharray="6, 6" stroke-width="2" d="M97.203 47.04c8.113-7.886 18.004-13.871 28.906-17.492a78 78 0 0 1 33.969-3.39c11.443 1.39 22.401 5.295 32.024 11.411s17.656 14.28 23.476 23.86c5.819 9.579 9.269 20.318 10.083 31.385a69.85 69.85 0 0 1-5.387 32.44c-4.358 10.272-11.115 19.443-19.747 26.801-8.632 7.359-18.908 12.709-30.034 15.637l-6.17-21.698c7.666-2.017 14.746-5.703 20.694-10.773 5.948-5.071 10.603-11.389 13.606-18.467a48.14 48.14 0 0 0 3.712-22.352c-.561-7.625-2.938-15.025-6.948-21.625s-9.544-12.226-16.175-16.44-14.181-6.904-22.065-7.863a53.75 53.75 0 0 0-23.405 2.336c-7.513 2.495-14.327 6.62-19.918 12.053z" mask="url(#b)" style="stroke:url(#a)" transform="translate(-63.992 -25.587)"></path><ellipse cx="8.066" cy="111.597" fill="var(--background-tertiary)" rx="53.677" ry="53.699" transform="matrix(.71707 -.697 .7243 .6895 0 0)"></ellipse><g clip-path="url(#c)" transform="translate(-63.992 -25.587)"><path fill="#9abff5" d="m144.256 137.379 32.906 12.434a4.41 4.41 0 0 1 2.559 5.667l-9.326 24.679a4.41 4.41 0 0 1-5.667 2.559l-8.226-3.108-2.332 6.17c-.466 1.233-.375 1.883-1.609 1.417l-2.253-.527c-.411-.155-.95-.594-1.206-1.161l-4.734-10.484-12.545-4.741a4.41 4.41 0 0 1-2.559-5.667l9.325-24.679a4.41 4.41 0 0 1 5.667-2.559m9.961 29.617 8.227 3.108 3.264-8.638-.498-6.768-4.113-1.555.548 7.258-4.319-1.632zm-12.339-4.663 8.226 3.108 3.264-8.637-.498-6.769-4.113-1.554.548 7.257-4.319-1.632z"></path></g><g clip-path="url(#d)" transform="translate(-63.992 -25.587)"><path fill="#81b0f3" d="M135.35 60.136 86.67 41.654c-3.346-1.27-7.124.428-8.394 3.775L64.414 81.938c-1.27 3.347.428 7.125 3.774 8.395l12.17 4.62-3.465 9.128c-.693 1.826-1.432 2.457.394 3.15l3.014 1.625c.609.231 1.637.274 2.477-.104l15.53-6.983 18.56 7.047c3.346 1.27 7.124-.428 8.395-3.775l13.862-36.51c1.27-3.346-.428-7.124-3.775-8.395M95.261 83.207l-12.17-4.62 4.852-12.779 7.19-7.017 6.085 2.31-7.725 7.51 6.389 2.426zm18.255 6.93-12.17-4.62 4.852-12.778 7.189-7.017 6.085 2.31-7.725 7.51 6.39 2.426z"></path></g><defs><clipPath id="c"><path fill="#fff" d="m198.638 146.586-65.056-24.583-24.583 65.057 65.056 24.582z"></path></clipPath><clipPath id="d"><path fill="#fff" d="m66.438 14.055 96.242 36.54-36.54 96.243-96.243-36.54z"></path></clipPath><linearGradient id="a" x1="97.203" x2="199.995" y1="47.04" y2="152.793" gradientUnits="userSpaceOnUse"><stop stop-color="#086DFC"></stop><stop offset="0.246" stop-color="#2C81FA"></stop><stop offset="0.516" stop-color="#5497F8"></stop><stop offset="0.821" stop-color="#80B0F6"></stop><stop offset="1" stop-color="#9ABFF5"></stop></linearGradient></defs></svg></div><h2>MDN-Feedback-Box</h2><fieldset class="feedback"><label>War diese Übersetzung hilfreich?</label><div class="button-container"><button type="button" class="button primary has-icon yes"><span class="button-wrap"><span class="icon icon-thumbs-up "></span>Ja</span></button><button type="button" class="button primary has-icon no"><span class="button-wrap"><span class="icon icon-thumbs-down "></span>Nein</span></button></div></fieldset><p class="last-modified-date">Diese Seite wurde automatisch aus dem Englischen übersetzt.</p><div id="on-github" class="on-github"><a href="https://github.com/mdn/translated-content-de/blob/main/files/de/web/javascript/guide/modules/index.md?plain=1" title="Folder: de/web/javascript/guide/modules (Opens in a new tab)" target="_blank" rel="noopener noreferrer">Übersetzung auf GitHub anzeigen</a> • <a href="https://github.com/mdn/translated-content-de/issues/new?template=page-report-de.yml&mdn-url=https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FModules&metadata=%3C%21--+Do+not+make+changes+below+this+line+--%3E%0A%3Cdetails%3E%0A%3Csummary%3EPage+report+details%3C%2Fsummary%3E%0A%0A*+Folder%3A+%60de%2Fweb%2Fjavascript%2Fguide%2Fmodules%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FWeb%2FJavaScript%2FGuide%2FModules%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Fweb%2Fjavascript%2Fguide%2Fmodules%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2F452fe502cfb4c9a91c346af17370ecfb6a8bd17e%0A*+Document+last+modified%3A+2025-02-17T00%3A20%3A27.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Web/JavaScript/Guide/Modules","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\"><span class=\"button-wrap\"> Zurück </span></a></li></ul>\n<p>Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modulsyntax zu beginnen.</p>"}},{"type":"prose","value":{"id":"hintergrund_zu_modulen","title":"Hintergrund zu Modulen","isH3":false,"content":"<p>JavaScript-Programme begannen ziemlich klein — die meisten ihrer Nutzungen in den Anfangstagen waren auf isolierte Skriptaufgaben beschränkt, die ein wenig Interaktivität zu Ihren Webseiten hinzufügten, wo nötig, sodass große Skripte im Allgemeinen nicht benötigt wurden. Spulen Sie einige Jahre vor und wir haben nun vollständige Anwendungen, die in Browsern mit einer Menge JavaScript ausgeführt werden, sowie JavaScript, das in anderen Kontexten verwendet wird (z. B. <a href=\"/de/docs/Glossary/Node.js\">Node.js</a>).</p>\n<p>Komplexe Projekte erfordern einen Mechanismus, um JavaScript-Programme in separate Module zu unterteilen, die bei Bedarf importiert werden können. Node.js verfügt schon lange über diese Fähigkeit, und es gibt eine Reihe von JavaScript-Bibliotheken und -Frameworks, die die Nutzung von Modulen ermöglichen (zum Beispiel andere auf <a href=\"https://en.wikipedia.org/wiki/CommonJS\" class=\"external\" target=\"_blank\">CommonJS</a> und <a href=\"https://github.com/amdjs/amdjs-api/blob/master/AMD.md\" class=\"external\" target=\"_blank\">AMD</a> basierende Modulsysteme wie <a href=\"https://requirejs.org/\" class=\"external\" target=\"_blank\">RequireJS</a>, <a href=\"https://webpack.js.org/\" class=\"external\" target=\"_blank\">webpack</a> und <a href=\"https://babeljs.io/\" class=\"external\" target=\"_blank\">Babel</a>).</p>\n<p>Alle modernen Browser unterstützen Modulfunktionen nativ, ohne dass eine Transpilation erforderlich ist. Dies kann nur von Vorteil sein — Browser können das Laden von Modulen optimieren und es effizienter gestalten, als eine Bibliothek zu verwenden und all diese zusätzlichen Client-seitigen Verarbeitungen und zusätzlichen Rundreisen zu tun. Es macht Bundler wie webpack jedoch nicht obsolet — Bundler leisten immer noch gute Arbeit, indem sie Code in angemessen große Stücke aufteilen und andere Optimierungen wie Minifizierung, Codebereinigung und Tree-Shaking durchführen.</p>"}},{"type":"prose","value":{"id":"einführung_eines_beispiels","title":"Einführung eines Beispiels","isH3":false,"content":"<p>Um die Nutzung von Modulen zu demonstrieren, haben wir eine <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples\" class=\"external\" target=\"_blank\">Reihe von Beispielen</a> erstellt, die Sie auf GitHub finden können. Diese Beispiele demonstrieren eine Reihe von Modulen, die ein <a href=\"/de/docs/Web/HTML/Element/canvas\"><code><canvas></code></a>-Element auf einer Webseite erstellen und dann verschiedene Formen auf der Leinwand zeichnen (und Informationen darüber anzeigen).</p>\n<p>Diese sind recht trivial, wurden jedoch bewusst einfach gehalten, um Module klar zu demonstrieren.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWenn Sie die Beispiele herunterladen und lokal ausführen möchten, müssen Sie sie über einen lokalen Webserver betreiben.</p>\n</div>"}},{"type":"prose","value":{"id":"grundlegende_beispielstruktur","title":"Grundlegende Beispielstruktur","isH3":false,"content":"<p>In unserem ersten Beispiel (siehe <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/basic-modules\" class=\"external\" target=\"_blank\">basic-modules</a>) haben wir folgende Dateistruktur:</p>\n<pre class=\"brush: plain notranslate\">index.html\nmain.js\nmodules/\n canvas.js\n square.js\n</pre>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nAlle Beispiele in diesem Leitfaden haben im Wesentlichen die gleiche Struktur; das obige sollte ziemlich vertraut werden.</p>\n</div>\n<p>Die zwei Module des Verzeichnisses \"modules\" werden unten beschrieben:</p>\n<ul>\n<li>\n<p><code>canvas.js</code> — enthält Funktionen im Zusammenhang mit der Einrichtung der Leinwand:</p>\n<ul>\n<li><code>create()</code> — erstellt eine Leinwand mit einer angegebenen <code>width</code> und <code>height</code> innerhalb eines umschließenden <a href=\"/de/docs/Web/HTML/Element/div\"><code><div></code></a> mit einer angegebenen ID, die selbst in ein angegebenes übergeordnetes Element eingefügt wird. Gibt ein Objekt zurück, das den 2D-Kontext der Leinwand und die ID des Wrappers enthält.</li>\n<li><code>createReportList()</code> — erstellt eine ungeordnete Liste, die in ein angegebenes Wrapper-Element eingefügt wird und zur Ausgabe von Berichterstellungsdaten verwendet werden kann. Gibt die ID der Liste zurück.</li>\n</ul>\n</li>\n<li>\n<p><code>square.js</code> — enthält:</p>\n<ul>\n<li><code>name</code> — eine Konstante, die den String 'square' enthält.</li>\n<li><code>draw()</code> — zeichnet ein Quadrat auf einer angegebenen Leinwand mit einer angegebenen Größe, Position und Farbe. Gibt ein Objekt zurück, das die Größe, Position und Farbe des Quadrats enthält.</li>\n<li><code>reportArea()</code> — schreibt die Fläche eines Quadrats in eine spezifische Berichterstellungsliste, gegebenenfalls mit ihrer Länge.</li>\n<li><code>reportPerimeter()</code> — schreibt den Umfang eines Quadrats in eine spezifische Berichterstellungsliste, gegebenenfalls mit ihrer Länge.</li>\n</ul>\n</li>\n</ul>"}},{"type":"prose","value":{"id":"nebenbemerkung_—_.mjs_versus_.js","title":"Nebenbemerkung — .mjs versus .js","isH3":true,"content":"<p>In diesem Artikel haben wir <code>.js</code>-Erweiterungen für unsere Moduldaten verwendet, aber in anderen Ressourcen sehen Sie möglicherweise die <code>.mjs</code>-Erweiterung verwendet. <a href=\"https://v8.dev/features/modules#mjs\" class=\"external\" target=\"_blank\">V8's Dokumentation empfiehlt dies</a>, zum Beispiel. Die angegebenen Gründe sind:</p>\n<ul>\n<li>Es ist für die Klarheit gut, d. h. es macht deutlich, welche Dateien Module sind und welche normale JavaScript-Dateien sind.</li>\n<li>Es stellt sicher, dass Ihre Moduldaten von Laufzeitumgebungen wie <a href=\"https://nodejs.org/api/esm.html#esm_enabling\" class=\"external\" target=\"_blank\">Node.js</a> und Build-Tools wie <a href=\"https://babeljs.io/docs/options#sourcetype\" class=\"external\" target=\"_blank\">Babel</a> als Modul geparst werden.</li>\n</ul>\n<p>Wir haben jedoch entschieden, weiterhin <code>.js</code> zu verwenden, zumindest im Moment. Um Module korrekt in einem Browser zum Laufen zu bringen, müssen Sie sicherstellen, dass Ihr Server sie mit einem <code>Content-Type</code>-Header bereitstellt, der einen JavaScript-MIME-Typ wie <code>text/javascript</code> enthält. Wenn Sie dies nicht tun, erhalten Sie einen strengen MIME-Typ-Überprüfungsfehler in der Art von \"Der Server antwortete mit einem Nicht-JavaScript-MIME-Typ\" und der Browser wird Ihr JavaScript nicht ausführen. Die meisten Server setzen bereits den korrekten Typ für <code>.js</code>-Dateien, aber noch nicht für <code>.mjs</code>-Dateien. Server, die bereits <code>.mjs</code>-Dateien korrekt bereitstellen, umfassen <a href=\"https://pages.github.com/\" class=\"external\" target=\"_blank\">GitHub Pages</a> und <a href=\"https://github.com/http-party/http-server#readme\" class=\"external\" target=\"_blank\"><code>http-server</code></a> für Node.js.</p>\n<p>Dies ist in Ordnung, wenn Sie bereits eine solche Umgebung verwenden, oder wenn Sie dies nicht tun, aber wissen, was Sie tun, und Zugang haben (d. h. Sie können Ihren Server so konfigurieren, dass er den korrekten <a href=\"/de/docs/Web/HTTP/Headers/Content-Type\"><code>Content-Type</code></a> für <code>.mjs</code>-Dateien setzt). Es könnte jedoch Verwirrung stiften, wenn Sie den Server, von dem Sie Dateien bereitstellen, nicht selbst kontrollieren, oder wenn Sie Dateien zur öffentlichen Verwendung bereitstellen, wie wir hier tun.</p>\n<p>Zu Lern- und Portabilitätszwecken haben wir uns entschieden, bei <code>.js</code> zu bleiben.</p>\n<p>Wenn Ihnen die Klarheit des Einsatzes von <code>.mjs</code> für Module im Vergleich zur Verwendung von <code>.js</code> für \"normale\" JavaScript-Dateien wirklich wichtig ist, Sie jedoch nicht auf das oben beschriebene Problem stoßen möchten, können Sie immer <code>.mjs</code> während der Entwicklung verwenden und sie während Ihres Build-Schritts in <code>.js</code> konvertieren.</p>\n<p>Es ist auch erwähnenswert, dass:</p>\n<ul>\n<li>Einige Tools möglicherweise nie <code>.mjs</code> unterstützen.</li>\n<li>Das Attribut <code><script type=\"module\"></code> wird verwendet, um anzugeben, wann auf ein Modul verwiesen wird, wie unten zu sehen ist.</li>\n</ul>"}},{"type":"prose","value":{"id":"exportieren_von_modulfunktionen","title":"Exportieren von Modulfunktionen","isH3":false,"content":"<p>Das erste, was Sie tun müssen, um auf Modulfunktionen zuzugreifen, ist, sie zu exportieren. Das erfolgt mit dem <a href=\"/de/docs/Web/JavaScript/Reference/Statements/export\"><code>export</code></a>-Statement.</p>\n<p>Der einfachste Weg, es zu verwenden, besteht darin, es vor jedes Element zu setzen, das Sie aus dem Modul exportieren möchten, zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export const name = \"square\";\n\nexport function draw(ctx, length, x, y, color) {\n ctx.fillStyle = color;\n ctx.fillRect(x, y, length, length);\n\n return { length, x, y, color };\n}\n</code></pre></div>\n<p>Sie können Funktionen, <code>var</code>, <code>let</code>, <code>const</code> und — wie wir später sehen werden — Klassen exportieren. Sie müssen Top-Level-Elemente sein: zum Beispiel können Sie <code>export</code> nicht innerhalb einer Funktion verwenden.</p>\n<p>Eine bequemere Möglichkeit, alle Elemente, die Sie exportieren möchten, zu exportieren, besteht darin, eine einzelne Exportanweisung am Ende Ihrer Moduldaten zu verwenden, gefolgt von einer durch Komma getrennten Liste der Funktionen, die Sie exportieren möchten, eingeklammert in geschweifte Klammern. Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { name, draw, reportArea, reportPerimeter };\n</code></pre></div>"}},{"type":"prose","value":{"id":"funktionen_in_ihr_skript_importieren","title":"Funktionen in Ihr Skript importieren","isH3":false,"content":"<p>Sobald Sie einige Funktionen aus Ihrem Modul exportiert haben, müssen Sie sie in Ihr Skript importieren, um sie verwenden zu können. Der einfachste Weg, dies zu tun, sieht wie folgt aus:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { name, draw, reportArea, reportPerimeter } from \"./modules/square.js\";\n</code></pre></div>\n<p>Sie verwenden die <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import\"><code>import</code></a>-Anweisung, gefolgt von einer durch Komma getrennten Liste der Funktionen, die Sie importieren möchten, eingeschlossen in geschweifte Klammern, gefolgt vom Schlüsselwort <code>from</code>, gefolgt von dem <em>Modulspezifizierer</em>.</p>\n<p>Der <em>Modulspezifizierer</em> stellt eine Zeichenfolge bereit, die die JavaScript-Umgebung zu einem Pfad zur Moduldaten auflösen kann.\nIn einem Browser könnte dies ein relativer Pfad zum Stamm des Standorts sein, was für unser <code>basic-modules</code>-Beispiel <code>/js-examples/module-examples/basic-modules</code> wäre.\nHier verwenden wir jedoch stattdessen die Punkt (<code>.</code>)-Syntax, um \"den aktuellen Speicherort\" zu bedeuten, gefolgt vom relativen Pfad zu der Datei, die wir finden möchten. Dies ist viel besser, als jedes Mal den gesamten absoluten Pfad zu schreiben, da relative Pfade kürzer sind und die URL portabel machen — das Beispiel funktioniert immer noch, wenn Sie es an einen anderen Ort in der Verzeichnishierarchie der Website verschieben.</p>\n<p>Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>/js-examples/module-examples/basic-modules/modules/square.js\n</code></pre></div>\n<p>wird zu</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>./modules/square.js\n</code></pre></div>\n<p>Sie können solche Zeilen in Aktion in <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/basic-modules/main.js\" class=\"external\" target=\"_blank\"><code>main.js</code></a> sehen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nIn einigen Modulsystemen können Sie einen Modulspezifizierer wie <code>modules/square</code> verwenden, der kein relativer oder absoluter Pfad ist und keine Dateierweiterung hat.\nDiese Art von Spezifizierern kann in einer Browserumgebung verwendet werden, wenn Sie zuerst eine <a href=\"#module_mit_importkarten_importieren\">Importkarte</a> definieren.</p>\n</div>\n<p>Sobald Sie die Funktionen in Ihr Skript importiert haben, können Sie sie verwenden, als wären sie im selben Modul definiert. Das folgende Beispiel wurde in <code>main.js</code> unter den Importzeilen gefunden:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const myCanvas = create(\"myCanvas\", document.body, 480, 320);\nconst reportList = createReportList(myCanvas.id);\n\nconst square1 = draw(myCanvas.ctx, 50, 50, 100, \"blue\");\nreportArea(square1.length, reportList);\nreportPerimeter(square1.length, reportList);\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie importierten Werte sind schreibgeschützte Ansichten der exportierten Funktionen. Ähnlich wie bei <code>const</code>-Variablen können Sie die importierte Variable nicht neu zuweisen, aber Sie können Eigenschaften von Objektwerten ändern. Der Wert kann nur vom Modul, das ihn exportiert, neu zugewiesen werden. Siehe das <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter\"><code>import</code>-Referenz</a> für ein Beispiel.</p>\n</div>"}},{"type":"prose","value":{"id":"module_mit_importkarten_importieren","title":"Module mit Importkarten importieren","isH3":false,"content":"<p>Oben haben wir gesehen, wie ein Browser ein Modul mithilfe eines Modulspezifizierers importieren kann, der entweder eine absolute URL ist oder eine relative URL, die anhand der Basis-URL des Dokuments aufgelöst wurde:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { name as squareName, draw } from \"./shapes/square.js\";\nimport { name as circleName } from \"https://example.com/shapes/circle.js\";\n</code></pre></div>\n<p><a href=\"/de/docs/Web/HTML/Element/script/type/importmap\">Importkarten</a> ermöglichen es Entwicklern, stattdessen fast jeden Text, den sie möchten, im Modulspezifizierer beim Importieren eines Moduls zu verwenden; die Karte liefert einen entsprechenden Wert, der den Text beim Auflösen der Modul-URL ersetzt.</p>\n<p>Zum Beispiel definiert der <code>imports</code>-Schlüssel in der folgenden Importkarte ein JSON-Objekt für die \"Modulspezifiziererkarte\", bei dem die Eigenschaftenamen als Modulspezifizierer verwendet werden können und die entsprechenden Werte ersetzt werden, wenn der Browser die Modul-URL auflöst.\nDie Werte müssen absolute oder relative URLs sein.\nRelative URLs werden zu absoluten URLs unter Verwendung der <a href=\"/de/docs/Web/HTML/Element/base\">Basis-URL</a> des Dokuments, das die Importkarte enthält, aufgelöst.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><script type=\"importmap\">\n {\n \"imports\": {\n \"shapes\": \"./shapes/square.js\",\n \"shapes/square\": \"./modules/shapes/square.js\",\n \"https://example.com/shapes/square.js\": \"./shapes/square.js\",\n \"https://example.com/shapes/\": \"/shapes/square/\",\n \"../shapes/square\": \"./shapes/square.js\"\n }\n }\n</script>\n</code></pre></div>\n<p>Die Importkarte wird mithilfe eines <a href=\"/de/docs/Web/HTML/Element/script/type/importmap#import_map_json_representation\">JSON-Objekts</a> innerhalb eines <code><script></code>-Elements mit dem <code>type</code>-Attribut, das auf <a href=\"/de/docs/Web/HTML/Element/script/type/importmap\"><code>importmap</code></a> gesetzt ist, definiert.\nBeachten Sie, dass eine Importkarte nur auf das Dokument angewendet wird — die Spezifikation deckt nicht ab, wie eine Importkarte in einem Worker- oder Worklet-Kontext angewendet wird. \u003c!-- https://github.com/WICG/import-maps/issues/2 --></p>\n<p>Mit dieser Karte können Sie jetzt die obigen Eigenschaftsnamen als Modulspezifizierer verwenden.\nWenn auf dem Modulspezifizierer-Schlüssel kein Schrägstrich folgt, wird der gesamte Modulspezifizierer-Schlüssel abgeglichen und ersetzt.\nBeispielsweise verwenden wir unten einfache Modulnamen und remappen eine URL zu einem anderen Pfad.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// Bare module names as module specifiers\nimport { name as squareNameOne } from \"shapes\";\nimport { name as squareNameTwo } from \"shapes/square\";\n\n// Remap a URL to another URL\nimport { name as squareNameThree } from \"https://example.com/shapes/square.js\";\n</code></pre></div>\n<p>Wenn der Modulspezifizierer einen nachgestellten Schrägstrich hat, muss der Wert ebenfalls einen haben, und der Schlüssel wird als \"Pfadpräfix\" abgeglichen.\nDies ermöglicht die Neuzuordnung ganzer Klassen von URLs.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// Remap a URL as a prefix ( https://example.com/shapes/)\nimport { name as squareNameFour } from \"https://example.com/shapes/moduleshapes/square.js\";\n</code></pre></div>\n<p>Es ist möglich, dass mehrere Schlüssel in einer Importkarte gültige Übereinstimmungen für einen Modulspezifizierer darstellen.\nEin Modulspezifizierer wie <code>shapes/circle/</code> könnte etwa mit den Modulspezifiziererschlüsseln <code>shapes/</code> und <code>shapes/circle/</code> übereinstimmen.\nIn diesem Fall wählt der Browser den spezifischsten (längsten) übereinstimmenden Modulspezifiziererschlüssel.</p>\n<p>Importkarten ermöglichen es, Module mit einfachen Modulnamen zu importieren (wie in Node.js) und können auch das Importieren von Modulen aus Paketen simulieren, sowohl mit als auch ohne Dateierweiterungen.\nObwohl es oben nicht gezeigt ist, ermöglichen sie es auch, bestimmte Versionen einer Bibliothek basierend auf dem Pfad des Skripts, das das Modul importiert, zu importieren.\nIm Allgemeinen ermöglichen sie es Entwicklern, ergonomischeren Importcode zu schreiben und die Verwaltung der verschiedenen Versionen und Abhängigkeiten der durch eine Seite verwendeten Module zu vereinfachen.\nDies kann den Aufwand verringern, der erforderlich ist, um dieselben JavaScript-Bibliotheken sowohl im Browser als auch auf dem Server zu verwenden.</p>\n<p>Die folgenden Abschnitte erweitern die verschiedenen oben beschriebenen Funktionen.</p>"}},{"type":"prose","value":{"id":"funktionsüberprüfung","title":"Funktionsüberprüfung","isH3":true,"content":"<p>Sie können die Unterstützung für Importkarten mithilfe der statischen Methode <a href=\"/de/docs/Web/API/HTMLScriptElement/supports_static\"><code>HTMLScriptElement.supports()</code></a> überprüfen (die selbst weitgehend unterstützt wird):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>if (HTMLScriptElement.supports?.(\"importmap\")) {\n console.log(\"Browser supports import maps.\");\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"module_als_einfache_namen_importieren","title":"Module als einfache Namen importieren","isH3":true,"content":"<p>In einigen JavaScript-Umgebungen, wie Node.js, können Sie einfache Namen für den Modulspezifizierer verwenden.\nDies funktioniert, weil die Umgebung Modulnamen in eine Standardposition im Dateisystem auflösen kann.\nZum Beispiel könnten Sie die folgende Syntax verwenden, um das \"square\"-Modul zu importieren.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { name, draw, reportArea, reportPerimeter } from \"square\";\n</code></pre></div>\n<p>Um einfache Namen im Browser zu verwenden, benötigen Sie eine Importkarte, die die Informationen bereitstellt, die der Browser benötigt, um Modulspezifizierer in URLs aufzulösen (JavaScript wird einen <code>TypeError</code> werfen, wenn es versucht, einen Modulspezifizierer zu importieren, der nicht in eine Modulspeicherort aufgelöst werden kann).</p>\n<p>Im Folgenden sehen Sie eine Karte, die einen <code>square</code>-Modulspezifiziererschlüssel definiert, der in diesem Fall zu einem relativen Adresswert abgebildet wird.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><script type=\"importmap\">\n {\n \"imports\": {\n \"square\": \"./shapes/square.js\"\n }\n }\n</script>\n</code></pre></div>\n<p>Mit dieser Karte können wir jetzt einen einfachen Namen verwenden, wenn wir das Modul importieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { name as squareName, draw } from \"square\";\n</code></pre></div>"}},{"type":"prose","value":{"id":"modulpfade_neu_zuordnen","title":"Modulpfade neu zuordnen","isH3":true,"content":"<p>Eingaben in Modulspezifiziererkarte, bei denen sowohl der Spezifiziererschlüssel als auch sein zugeordneter Wert einen nachgestellten Schrägstrich (<code>/</code>) haben, können als Pfadpräfix verwendet werden.\nDies ermöglicht die Neuzuordnung eines ganzen Satzes von Import-URLs von einem Standort zu einem anderen.\nEs kann auch verwendet werden, um die Arbeit mit \"Paketen und Modulen\" zu emulieren, wie Sie es möglicherweise im Node-Ökosystem sehen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDer nachgestellte <code>/</code> zeigt an, dass der Modulspezifiziererschlüssel als <em>Teil</em> eines Modulspezifizierers ersetzt werden kann.\nWenn dies nicht vorhanden ist, wird der Browser nur den gesamten Modulspezifiziererschlüssel abgleichen (und ihn ersetzen).</p>\n</div>\n<h4 id=\"modulpakete\">Modulpakete</h4>\n<p>Die folgende JSON-Importkarten-Definition ordnet <code>lodash</code> als einfachen Namen zu und das Modulspezifiziererpräfix <code>lodash/</code> dem Pfad <code>/node_modules/lodash-es/</code> (aufgelöst zur Basis-URL des Dokuments):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"imports\": {\n \"lodash\": \"/node_modules/lodash-es/lodash.js\",\n \"lodash/\": \"/node_modules/lodash-es/\"\n }\n}\n</code></pre></div>\n<p>Mit dieser Zuordnung können Sie sowohl das gesamte \"Paket\" mithilfe des einfachen Namens als auch Module darin (mithilfe der Pfadzuordnung) importieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import _ from \"lodash\";\nimport fp from \"lodash/fp.js\";\n</code></pre></div>\n<p>Es ist möglich, <code>fp</code> ohne die <code>.js</code>-Dateierweiterung zu importieren, aber Sie müssten dafür einen einfachen Modulspezifiziererschlüssel erstellen, wie <code>lodash/fp</code>, anstatt den Pfad zu verwenden.\nDies kann für nur ein Modul vernünftig sein, skaliert jedoch schlecht, wenn Sie viele Module importieren möchten.</p>\n<h4 id=\"allgemeine_url-neuzuordnung\">Allgemeine URL-Neuzuordnung</h4>\n<p>Ein Modulspezifiziererschlüssel muss kein Pfad sein — er kann auch eine absolute URL (oder ein URL-ähnlicher relativer Pfad wie <code>./</code>, <code>../</code>, <code>/</code>) sein.\nDies kann nützlich sein, wenn Sie ein Modul, das absolute Pfade zu einem Ressourcen hat, mit Ihren eigenen lokalen Ressourcen neu zuordnen möchten.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"imports\": {\n \"https://www.unpkg.com/moment/\": \"/node_modules/moment/\"\n }\n}\n</code></pre></div>"}},{"type":"prose","value":{"id":"gescopte_module_für_versionsverwaltung","title":"Gescopte Module für Versionsverwaltung","isH3":true,"content":"<p>Ökosysteme wie Node verwenden Paketmanager wie npm, um Module und deren Abhängigkeiten zu verwalten.\nDer Paketmanager stellt sicher, dass jedes Modul von anderen Modulen und deren Abhängigkeiten getrennt ist.\nInfolgedessen kann eine komplexe Anwendung dasselbe Modul unter mehreren verschiedenen Versionen importieren, in verschiedenen Bereichen des Modulgraphen, aber Benutzer brauchen sich darüber nicht den Kopf zu zerbrechen.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nSie können auch Versionsverwaltung mithilfe von relativen Pfaden erreichen, aber dies ist suboptimal, weil dies unter anderem eine bestimmte Struktur auf Ihr Projekt erzwingt und Sie daran hindert, einfache Modulnamen zu verwenden.</p>\n</div>\n<p>Mit Importkarten können Sie ähnlich mehrere Versionen von Abhängigkeiten in Ihrer Anwendung haben und auf sie unter demselben Modulspezifizierer verweisen.\nSie implementieren dies mit dem <code>scopes</code>-Schlüssel, der es Ihnen ermöglicht, Modulspezifizierer-Karten bereitzustellen, die je nach dem Pfad des Skripts verwendet werden, das den Import durchführt.\nDas folgende Beispiel demonstriert dies.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"imports\": {\n \"cool-module\": \"/node_modules/cool-module/index.js\"\n },\n \"scopes\": {\n \"/node_modules/dependency/\": {\n \"cool-module\": \"/node_modules/some/other/location/cool-module/index.js\"\n }\n }\n}\n</code></pre></div>\n<p>Mit dieser Zuordnung wird die Version in <code>/node_modules/some/other/location/cool-module/index.js</code> verwendet, wenn ein Skript mit einer URL, die <code>/node_modules/dependency/</code> enthält, <code>cool-module</code> importiert.\nDie Karte in <code>imports</code> wird als Fallback verwendet, wenn es keine passende Scoper in der gescopten Karte gibt oder die passenden Scopes keinen passenden Spezifizierer enthalten. Zum Beispiel, wenn <code>cool-module</code> von einem Skript mit einem nicht übereinstimmenden Scope-Pfad importiert wird, dann wird die Modulspezifizierer-Karte in <code>imports</code> stattdessen verwendet, das passend auf die Version in <code>/node_modules/cool-module/index.js</code> abbildet.</p>\n<p>Beachtest, dass der Pfad, der verwendet wird, um einen Scope zu wählen, die Art und Weise, wie die Adresse aufgelöst wird, nicht beeinflusst.\nDer Wert im angegebenen Pfad muss nicht mit dem Scopes-Pfad übereinstimmen, und relative Pfade werden weiterhin zur Basis-URL des Skripts aufgelöst, das die Importkarte enthält.</p>\n<p>Gerade bei Modulspezifizierer-Karten können Sie viele Scope-Schlüssel haben, und diese können sich überschneidende Pfade enthalten.\nWenn mehrere Scopes mit dem Referrer-URL übereinstimmen, wird zuerst der spezifischste Scope-Pfad auf Übereinstimmung überprüft (der längste Scopes-Schlüssel).\nWenn es dafür keinen passenden Spezifizierer gibt, fällt der Browser auf den nächsten spezifischsten zutreffenden gescopten Pfad zurück und so weiter.\nWenn es in keinem der passenden Scopes einen passenden Spezifizierer gibt, überprüft der Browser die Modulspezifizierer-Karte im <code>imports</code>-Schlüssel auf eine Übereinstimmung.</p>"}},{"type":"prose","value":{"id":"verbesserung_des_cachings_durch_entfernen_von_hashes_in_dateinamen","title":"Verbesserung des Cachings durch Entfernen von Hashes in Dateinamen","isH3":true,"content":"<p>Skriptdateien, die von Websites verwendet werden, haben häufig Hash-Namen, um das Caching zu erleichtern.\nDer Nachteil dieses Ansatzes besteht darin, dass, wenn sich ein Modul ändert, alle Module, die es mit seinem Hash-Dateinamen importieren, ebenfalls aktualisiert/neu generiert werden müssen.\nDies führt möglicherweise zu einer Kaskade von Aktualisierungen, was ressourcenverschwendend ist.</p>\n<p>Importkarten bieten eine bequeme Lösung für dieses Problem.\nStatt sich auf spezifische Hash-Dateinamen zu verlassen, greifen Anwendungen und Skripte stattdessen auf eine nicht-gehashte Version des Modulnamens (Adresse) zurück.\nEine Importkarte wie die unten bereitgestellte bietet dann eine Zuordnung zu der tatsächlichen Skriptdatendatei.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"imports\": {\n \"main_script\": \"/node/srcs/application-fg7744e1b.js\",\n \"dependency_script\": \"/node/srcs/dependency-3qn7e4b1q.js\"\n }\n}\n</code></pre></div>\n<p>Wenn sich <code>dependency_script</code> ändert, ändert sich der nach dem Hash im Dateinamen ebenfalls. In diesem Fall müssen wir nur die Importkarte aktualisieren, um den geänderten Namen des Moduls widerzuspiegeln.\nWir müssen keine Source des JavaScript-Codes, der davon abhängt, aktualisieren, weil der Spezifizierer im Import-Statement sich nicht ändert.</p>"}},{"type":"prose","value":{"id":"laden_von_nicht-javascript-ressourcen","title":"Laden von Nicht-JavaScript-Ressourcen","isH3":false,"content":"<p>Eine aufregende Funktion, die eine vereinheitlichte Modularchitektur mit sich bringt, ist die Fähigkeit, Nicht-JavaScript-Ressourcen als Module zu laden. Zum Beispiel können Sie JSON als JavaScript-Objekt importieren oder CSS als <a href=\"/de/docs/Web/API/CSSStyleSheet\"><code>CSSStyleSheet</code></a>-Objekt importieren.</p>\n<p>Sie müssen explizit angeben, welche Art von Ressource Sie importieren. Standardmäßig nimmt der Browser an, dass die Ressource JavaScript ist, und wird einen Fehler auslösen, wenn die aufgelöste Ressource etwas anderes ist. Um JSON, CSS oder andere Arten von Ressourcen zu importieren, verwenden Sie die <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import/with\">Import-Attribute</a> Syntax:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import colors from \"./colors.json\" with { type: \"json\" };\nimport styles from \"./styles.css\" with { type: \"css\" };\n</code></pre></div>\n<p>Browser führen auch eine Validierung des Modultyps durch und werden fehlschlagen, wenn beispielsweise <code>./data.json</code> keine JSON-Datei ist. Dies stellt sicher, dass Sie nicht versehentlich Code ausführen, wenn Sie lediglich Daten importieren möchten. Sobald erfolgreich importiert, können Sie den importierten Wert jetzt als normales JavaScript-Objekt oder <code>CSSStyleSheet</code>-Objekt verwenden.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>console.log(colors.map((color) => color.value));\ndocument.adoptedStyleSheets = [styles];\n</code></pre></div>"}},{"type":"prose","value":{"id":"anwenden_des_moduls_auf_ihr_html","title":"Anwenden des Moduls auf Ihr HTML","isH3":false,"content":"<p>Jetzt müssen wir das <code>main.js</code>-Modul auf unsere HTML-Seite anwenden. Dies ist sehr ähnlich wie das Anwenden eines regulären Skripts auf eine Seite, mit einigen bemerkenswerten Unterschieden.</p>\n<p>Zuerst müssen Sie <code>type=\"module\"</code> im <a href=\"/de/docs/Web/HTML/Element/script\"><code><script></code></a>-Element einschließen, um dieses Skript als Modul zu deklarieren. Um das <code>main.js</code>-Skript zu importieren, verwenden wir dies:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><script type=\"module\" src=\"main.js\"></script>\n</code></pre></div>\n<p>Sie können das Modulskript auch direkt in die HTML-Datei einbetten, indem Sie den JavaScript-Code in den Hauptteil des <code><script></code>-Elements einfügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><script type=\"module\">\n /* JavaScript module code here */\n</script>\n</code></pre></div>\n<p>Sie können <code>import</code>- und <code>export</code>-Anweisungen nur in Modulen verwenden, nicht in regulären Skripten. Ein Fehler wird ausgelöst, wenn Ihr <code><script></code>-Element nicht das <code>type=\"module\"</code>-Attribut hat und versucht, andere Module zu importieren. Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html example-bad notranslate\"><code><script>\n import _ from \"lodash\"; // SyntaxError: import declarations may only appear at top level of a module\n // ...\n</script>\n<script src=\"a-module-using-import-statements.js\"></script>\n\n</code></pre></div>\n<p>Sie sollten alle Ihre Module im Allgemeinen in separaten Dateien definieren. Inline in HTML deklarierte Module können nur andere Module importieren, aber alles, was sie exportieren, wird nicht von anderen Modulen zugänglich sein (weil sie keine URL haben).</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nModule und ihre Abhängigkeiten können vorab geladen werden, indem sie in <a href=\"/de/docs/Web/HTML/Element/link\"><code><link></code></a>-Elementen mit <a href=\"/de/docs/Web/HTML/Attributes/rel/modulepreload\"><code>rel=\"modulepreload\"</code></a> angegeben werden.\nDies kann die Ladezeit erheblich reduzieren, wenn die Module verwendet werden.</p>\n</div>"}},{"type":"prose","value":{"id":"weitere_unterschiede_zwischen_modulen_und_klassischen_skripten","title":"Weitere Unterschiede zwischen Modulen und klassischen Skripten","isH3":false,"content":"<ul>\n<li>Sie müssen auf lokale Tests achten — wenn Sie versuchen, die HTML-Datei lokal zu laden (d. h. mit einer <code>file://</code>-URL), stoßen Sie auf CORS-Fehler aufgrund der Sicherheitsanforderungen von JavaScript-Modulen. Sie müssen Ihre Tests über einen Server durchführen.</li>\n<li>Beachten Sie auch, dass Sie möglicherweise unterschiedliches Verhalten von Skriptabschnitten sehen, die in Modulen im Gegensatz zu klassischen Skripten definiert sind. Dies liegt daran, dass Module automatisch in <a href=\"/de/docs/Web/JavaScript/Reference/Strict_mode\">Striktem Modus</a> laufen.</li>\n<li>Es besteht keine Notwendigkeit, das <code>defer</code>-Attribut (siehe <a href=\"/de/docs/Web/HTML/Element/script#attributes\"><code><script></code>-Attribute</a>) beim Laden eines Modulskripts zu verwenden; Module werden automatisch verzögert.</li>\n<li>Module werden nur einmal ausgeführt, auch wenn sie in mehreren <code><script></code>-Tags referenziert wurden.</li>\n<li>Zu guter Letzt, um das klarzustellen — Modulfunktionen werden in den Gültigkeitsbereich eines einzelnen Skripts importiert — sie stehen nicht im globalen Gültigkeitsbereich zur Verfügung. Daher können Sie auf importierte Funktionen nur im Skript, in das sie importiert wurden, zugreifen, und sie werden nicht verfügbar sein von der JavaScript-Konsole aus. Sie erhalten dennoch Syntaxfehler, die in den DevTools angezeigt werden, aber Sie werden nicht in der Lage sein, einige der erwarteten Debugging-Techniken zu verwenden.</li>\n</ul>\n<p>Moduldefinierte Variablen sind im Modul-Umfang, es sei denn, sie werden explizit auf das globale Objekt angewendet. Andererseits sind global definierte Variablen innerhalb des Moduls verfügbar. Zum Beispiel, gegeben den folgenden Code:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><!doctype html>\n<html lang=\"en-US\">\n <head>\n <meta charset=\"UTF-8\" />\n <title></title>\n <link rel=\"stylesheet\" href=\"\" />\n </head>\n <body>\n <div id=\"main\"></div>\n <script>\n // A var statement creates a global variable.\n var text = \"Hello\";\n </script>\n <script type=\"module\" src=\"./render.js\"></script>\n </body>\n</html>\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>/* render.js */\ndocument.getElementById(\"main\").innerText = text;\n</code></pre></div>\n<p>Die Seite würde dennoch <code>Hello</code> darstellen, da die globalen Variablen <code>text</code> und <code>document</code> im Modul verfügbar sind. (Beachten Sie auch aus diesem Beispiel, dass ein Modul nicht notwendigerweise eine Import-/Exportanweisung benötigt — das einzige, was benötigt wird, ist, dass der Einstiegspunkt <code>type=\"module\"</code> hat.)</p>"}},{"type":"prose","value":{"id":"standardexporte_versus_benannte_exporte","title":"Standardexporte versus benannte Exporte","isH3":false,"content":"<p>Die Funktionalität, die wir bisher exportiert haben, bestand aus <strong>benannten Exporten</strong> — jedes Element (sei es eine Funktion, <code>const</code>, etc.) wurde beim Export mit seinem Namen bezeichnet, und dieser Name wurde beim Import verwendet.</p>\n<p>Es gibt auch einen Exporttyp namens <strong>Standardexport</strong> — dieser wurde entwickelt, um es einfach zu machen, eine Standardfunktion bereitzustellen, die von einem Modul bereitgestellt wird, und hilft auch, dass JavaScript-Module mit bestehenden CommonJS- und AMD-Modulsystemen interoperieren (wie es in <a href=\"https://hacks.mozilla.org/2015/08/es6-in-depth-modules/\" class=\"external\" target=\"_blank\">ES6 In Depth: Modules</a> von Jason Orendorff schön erklärt wird; suchen Sie nach \"Standardexporte\").</p>\n<p>Lassen Sie uns ein Beispiel betrachten, während wir erklären, wie es funktioniert. In unserem basic-modules <code>square.js</code> finden Sie eine Funktion namens <code>randomSquare()</code>, die ein Quadrat mit einer zufälligen Farbe, Größe und Position erstellt. Wir möchten dies als unseren Standard exportieren, also schreiben wir am Ende der Datei dies:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export default randomSquare;\n</code></pre></div>\n<p>Beachten Sie das Fehlen von geschweiften Klammern.</p>\n<p>Wir könnten stattdessen <code>export default</code> der Funktion voranstellen und es als anonyme Funktion definieren, wie dies:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export default function (ctx) {\n // …\n}\n</code></pre></div>\n<p>In unserer <code>main.js</code>-Datei importieren wir die Standardfunktion mit dieser Zeile:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import randomSquare from \"./modules/square.js\";\n</code></pre></div>\n<p>Wiederum beachten Sie das Fehlen von geschweiften Klammern. Dies liegt daran, dass nur ein Standardexport pro Modul erlaubt ist, und wir wissen, dass <code>randomSquare</code> dieser ist. Die obige Zeile ist im Grunde ein Kürzel für:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { default as randomSquare } from \"./modules/square.js\";\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie as-Syntax zum Umbenennen exportierter Elemente wird unten im Abschnitt <a href=\"#umbenennen_von_importen_und_exporten\">Umbenennen von Importen und Exporten</a> erklärt.</p>\n</div>"}},{"type":"prose","value":{"id":"vermeidung_von_namenskonflikten","title":"Vermeidung von Namenskonflikten","isH3":false,"content":"<p>Bisher scheinen unsere Canvas-Form-Zeichenmodule gut zu funktionieren. Aber was passiert, wenn wir ein Modul hinzufügen, das sich mit dem Zeichnen einer anderen Form wie einem Kreis oder Dreieck befasst? Diese Formen würden wahrscheinlich auch assoziierte Funktionen wie <code>draw()</code>, <code>reportArea()</code> usw. haben; wenn wir versuchen würden, verschiedene Funktionen mit demselben Namen in dieselbe oberste Modulebene zu importieren, hätten wir Konflikte und Fehler.</p>\n<p>Zum Glück gibt es eine Reihe von Möglichkeiten, dies zu umgehen. Wir werden uns diese in den folgenden Abschnitten ansehen.</p>"}},{"type":"prose","value":{"id":"umbenennen_von_importen_und_exporten","title":"Umbenennen von Importen und Exporten","isH3":false,"content":"<p>Innerhalb der geschweiften Klammern Ihrer <code>import</code>- und <code>export</code>-Anweisung können Sie das Schlüsselwort <code>as</code> zusammen mit einem neuen Funktionsnamen verwenden, um den Namen zu ändern, den Sie für eine Funktion innerhalb des obersten Moduls verwenden werden.</p>\n<p>Zum Beispiel würden beide der folgenden das Gleiche tun, wenn auch auf leicht unterschiedliche Weise:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// inside module.js\nexport { function1 as newFunctionName, function2 as anotherNewFunctionName };\n\n// inside main.js\nimport { newFunctionName, anotherNewFunctionName } from \"./modules/module.js\";\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// inside module.js\nexport { function1, function2 };\n\n// inside main.js\nimport {\n function1 as newFunctionName,\n function2 as anotherNewFunctionName,\n} from \"./modules/module.js\";\n</code></pre></div>\n<p>Schauen wir uns ein echtes Beispiel an. In unserem <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/renaming\" class=\"external\" target=\"_blank\">renaming</a>-Verzeichnis sehen Sie dasselbe Modulsystem wie im vorherigen Beispiel, außer dass wir die <code>circle.js</code>- und <code>triangle.js</code>-Module hinzugefügt haben, um Kreise und Dreiecke zu zeichnen und zu berichten.</p>\n<p>Innerhalb jedes dieser Module haben wir Funktionen mit denselben Namen, die exportiert werden, und somit hat jeder dieselbe <code>export</code>-Anweisung am Ende:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { name, draw, reportArea, reportPerimeter };\n</code></pre></div>\n<p>Beim Import in <code>main.js</code>, wenn wir versuchen würden, zu verwenden</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { name, draw, reportArea, reportPerimeter } from \"./modules/square.js\";\nimport { name, draw, reportArea, reportPerimeter } from \"./modules/circle.js\";\nimport { name, draw, reportArea, reportPerimeter } from \"./modules/triangle.js\";\n</code></pre></div>\n<p>Würde der Browser einen Fehler wie \"SyntaxError: redeclaration of import name\" (Firefox) werfen.</p>\n<p>Stattdessen müssen wir die Importe so umbenennen, dass sie eindeutig sind:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import {\n name as squareName,\n draw as drawSquare,\n reportArea as reportSquareArea,\n reportPerimeter as reportSquarePerimeter,\n} from \"./modules/square.js\";\n\nimport {\n name as circleName,\n draw as drawCircle,\n reportArea as reportCircleArea,\n reportPerimeter as reportCirclePerimeter,\n} from \"./modules/circle.js\";\n\nimport {\n name as triangleName,\n draw as drawTriangle,\n reportArea as reportTriangleArea,\n reportPerimeter as reportTrianglePerimeter,\n} from \"./modules/triangle.js\";\n</code></pre></div>\n<p>Beachten Sie, dass Sie das Problem auch in den Moduldaten beheben könnten, z. B.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// in square.js\nexport {\n name as squareName,\n draw as drawSquare,\n reportArea as reportSquareArea,\n reportPerimeter as reportSquarePerimeter,\n};\n</code></pre></div>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// in main.js\nimport {\n squareName,\n drawSquare,\n reportSquareArea,\n reportSquarePerimeter,\n} from \"./modules/square.js\";\n</code></pre></div>\n<p>Und es würde genauso funktionieren. Welche Stilrichtung Sie wählen, liegt an Ihnen; es macht jedoch mehr Sinn, Ihren Modulcode unverändert zu lassen und die Änderungen in den Imports vorzunehmen. Dies ist besonders sinnvoll, wenn Sie aus Drittanbieter-Modulen importieren, über die Sie keine Kontrolle haben.</p>"}},{"type":"prose","value":{"id":"erstellen_eines_modulobjekts","title":"Erstellen eines Modulobjekts","isH3":false,"content":"<p>Die oben beschriebene Methode funktioniert gut, ist aber etwas unordentlich und umständlich. Eine noch bessere Lösung ist es, die Funktionen jedes Moduls in einem Modulobjekt zu importieren. Die folgende Syntaxform macht das:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import * as Module from \"./modules/module.js\";\n</code></pre></div>\n<p>Dies erfasst alle Exporte, die innerhalb von <code>module.js</code> verfügbar sind, und macht sie als Mitglieder eines Objektes <code>Module</code> verfügbar, wodurch es effektiv seinen eigenen Namensraum erhält. Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>Module.function1();\nModule.function2();\n</code></pre></div>\n<p>Wieder einmal schauen wir uns ein echtes Beispiel an. Wenn Sie zu unserem <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/module-objects\" class=\"external\" target=\"_blank\">module-objects</a>-Verzeichnis gehen, sehen Sie dasselbe Beispiel erneut, aber umgeschrieben, um diese neue Syntax zu nutzen. In den Modulen sind die Exporte alle in der folgenden einfachen Form:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { name, draw, reportArea, reportPerimeter };\n</code></pre></div>\n<p>Die Importe hingegen sehen so aus:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import * as Canvas from \"./modules/canvas.js\";\n\nimport * as Square from \"./modules/square.js\";\nimport * as Circle from \"./modules/circle.js\";\nimport * as Triangle from \"./modules/triangle.js\";\n</code></pre></div>\n<p>In jedem Fall können Sie jetzt auf die Importe des Moduls unterhalb des angegebenen Namen des Objektes zugreifen, zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const square1 = Square.draw(myCanvas.ctx, 50, 50, 100, \"blue\");\nSquare.reportArea(square1.length, reportList);\nSquare.reportPerimeter(square1.length, reportList);\n</code></pre></div>\n<p>Also können Sie nun den Code genauso wie zuvor schreiben (solange Sie die Objektnamen dort hinzufügen, wo nötig), und die Importe sind viel ordentlicher.</p>"}},{"type":"prose","value":{"id":"module_und_klassen","title":"Module und Klassen","isH3":false,"content":"<p>Wie wir bereits angedeutet haben, können Sie auch Klassen exportieren und importieren; dies ist eine weitere Option, um Konflikte in Ihrem Code zu vermeiden, und besonders nützlich, wenn Ihr Modulkode bereits in einem objektorientierten Stil geschrieben wurde.</p>\n<p>Sie können ein Beispiel für unser Form-Zeichen-Modul, das mit ES-Klassen neu geschrieben wurde, in unserem <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/classes\" class=\"external\" target=\"_blank\">classes</a>-Verzeichnis sehen. Zum Beispiel enthält die Datei <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/classes/modules/square.js\" class=\"external\" target=\"_blank\"><code>square.js</code></a> jetzt all ihre Funktionalität in einer einzigen Klasse:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>class Square {\n constructor(ctx, listId, length, x, y, color) {\n // …\n }\n\n draw() {\n // …\n }\n\n // …\n}\n</code></pre></div>\n<p>die wir dann exportieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { Square };\n</code></pre></div>\n<p>In <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/classes/main.js\" class=\"external\" target=\"_blank\"><code>main.js</code></a> importieren wir es auf diese Weise:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { Square } from \"./modules/square.js\";\n</code></pre></div>\n<p>Und dann verwenden wir die Klasse, um unser Quadrat zu zeichnen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, \"blue\");\nsquare1.draw();\nsquare1.reportArea();\nsquare1.reportPerimeter();\n</code></pre></div>"}},{"type":"prose","value":{"id":"aggregieren_von_modulen","title":"Aggregieren von Modulen","isH3":false,"content":"<p>Es wird Zeiten geben, in denen Sie Module zusammenfassen möchten. Sie könnten mehrere Ebenen von Abhängigkeiten haben, bei denen Sie die Dinge vereinfachen möchten, indem Sie mehrere Untermodule in ein übergeordnetes Modul kombinieren. Dies ist mit der Export-Syntax der folgenden Formen im übergeordneten Modul möglich:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export * from \"x.js\";\nexport { name } from \"x.js\";\n</code></pre></div>\n<p>Ein Beispiel hierfür finden Sie in unserem <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/module-aggregation\" class=\"external\" target=\"_blank\">module-aggregation</a>-Verzeichnis. In diesem Beispiel (basierend auf unserem vorherigen Klassenbeispiel) haben wir ein zusätzliches Modul namens <code>shapes.js</code>, das die gesamte Funktionalität von <code>circle.js</code>, <code>square.js</code> und <code>triangle.js</code> zusammenfasst. Wir haben auch unsere Untermodule in ein Unterverzeichnis innerhalb des <code>modules</code>-Verzeichnisses mit dem Namen <code>shapes</code> verschoben. Die Modulstruktur in diesem Beispiel ist:</p>\n<pre class=\"brush: plain notranslate\">modules/\n canvas.js\n shapes.js\n shapes/\n circle.js\n square.js\n triangle.js\n</pre>\n<p>In jedem der Untermodule ist der Export von der gleichen Form, z. B.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { Square };\n</code></pre></div>\n<p>Als nächstes folgt der Aggregationsteil. Innerhalb von <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/module-aggregation/modules/shapes.js\" class=\"external\" target=\"_blank\"><code>shapes.js</code></a> schließen wir die folgenden Zeilen ein:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>export { Square } from \"./shapes/square.js\";\nexport { Triangle } from \"./shapes/triangle.js\";\nexport { Circle } from \"./shapes/circle.js\";\n</code></pre></div>\n<p>Diese erfassen die Exporte aus den einzelnen Untermodule und machen sie effektiv vom Modul <code>shapes.js</code> aus verfügbar.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDie Exporte, die in <code>shapes.js</code> referenziert werden, werden im Grunde genommen durch die Datei umgeleitet und existieren dort nicht wirklich, sodass Sie dort keinen nützlichen verwandten Code schreiben können.</p>\n</div>\n<p>Also können wir im <code>main.js</code>-Skript auf alle drei Modulklassen zugreifen, indem wir</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { Square } from \"./modules/square.js\";\nimport { Circle } from \"./modules/circle.js\";\nimport { Triangle } from \"./modules/triangle.js\";\n</code></pre></div>\n<p>durch die folgende einzelne Zeile ersetzen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { Square, Circle, Triangle } from \"./modules/shapes.js\";\n</code></pre></div>"}},{"type":"prose","value":{"id":"dynamisches_laden_von_modulen","title":"Dynamisches Laden von Modulen","isH3":false,"content":"<p>Eine neue Ergänzung zur Funktionalität von JavaScript-Modulen ist das dynamische Laden von Modulen. Dies ermöglicht Ihnen, Module nur dann dynamisch zu laden, wenn sie benötigt werden, anstatt alles im Voraus laden zu müssen. Dies hat offensichtliche Leistungsvorteile; lesen Sie weiter und sehen Sie, wie es funktioniert.</p>\n<p>Diese neue Funktionalität ermöglicht Ihnen, <a href=\"/de/docs/Web/JavaScript/Reference/Operators/import\"><code>import()</code></a> als Funktion aufzurufen, den Pfad zum Modul als Parameter übergebend. Es gibt ein <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Promise\"><code>Promise</code></a> zurück, das mit einem Modulobjekt (siehe <a href=\"#erstellen_eines_modulobjekts\">Erstellen eines Modulobjekts</a>) erfüllt wird und Ihnen Zugang zu den Exporten dieses Objekts gibt. Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import(\"./modules/myModule.js\").then((module) => {\n // Do something with the module.\n});\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nDynamischer Import ist im Hauptthread des Browsers sowie in Shared und Dedicated Workern erlaubt.\nAllerdings wird <code>import()</code> eine Ausnahme werfen, wenn es in einem Service Worker oder Worklet aufgerufen wird.</p>\n</div>\n\u003c!-- https://whatpr.org/html/6395/webappapis.html#hostimportmoduledynamically(referencingscriptormodule,-specifier,-promisecapability) -->\n<p>Schauen wir uns ein Beispiel an. Im <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/dynamic-module-imports\" class=\"external\" target=\"_blank\">dynamic-module-imports</a>-Verzeichnis haben wir ein weiteres Beispiel, das auf unserem Klassenbeispiel basiert. Dieses Mal zeichnen wir jedoch nichts auf der Leinwand, wenn das Beispiel lädt. Stattdessen beinhalten wir drei Buttons — \"Circle\", \"Square\" und \"Triangle\" — die, wenn sie gedrückt werden, das erforderliche Modul dynamisch laden und dann verwenden, um die zugehörige Form zu zeichnen.</p>\n<p>In diesem Beispiel haben wir nur Änderungen an unseren <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/index.html\" class=\"external\" target=\"_blank\"><code>index.html</code></a> und <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/dynamic-module-imports/main.js\" class=\"external\" target=\"_blank\"><code>main.js</code></a> Dateien vorgenommen — die Modulexporte bleiben wie zuvor.</p>\n<p>In <code>main.js</code> haben wir eine Referenz auf jeden Button mit einer <a href=\"/de/docs/Web/API/Document/querySelector\"><code>document.querySelector()</code></a>-Aufruf erfasst, z. B.:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const squareBtn = document.querySelector(\".square\");\n</code></pre></div>\n<p>Dann hängen wir jedem Button einen Ereignis-Listener an, sodass, wenn er gedrückt wird, das relevante Modul dynamisch geladen und verwendet wird, um die Form zu zeichnen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>squareBtn.addEventListener(\"click\", () => {\n import(\"./modules/square.js\").then((Module) => {\n const square1 = new Module.Square(\n myCanvas.ctx,\n myCanvas.listId,\n 50,\n 50,\n 100,\n \"blue\",\n );\n square1.draw();\n square1.reportArea();\n square1.reportPerimeter();\n });\n});\n</code></pre></div>\n<p>Beachten Sie, dass, weil die Erfüllung des Versprechens ein Modulobjekt zurückgibt, die Klasse dann ein Unterfeature des Objekts ist, daher müssen wir nun auf den Konstruktor mit <code>Module.</code> davor zugreifen, z. B. <code>Module.Square( /* … */ )</code>.</p>\n<p>Ein weiterer Vorteil von dynamischen Importen ist, dass sie immer verfügbar sind, selbst in Skriptumgebungen. Daher, wenn Sie einen bestehenden <code><script></code>-Tag in Ihrem HTML haben, der nicht <code>type=\"module\"</code> hat, können Sie immer noch Code, der als Module verteilt ist, durch dynamisches Importieren wiederverwenden.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">html</span></div><pre class=\"brush: html notranslate\"><code><script>\n import(\"./modules/square.js\").then((module) => {\n // Do something with the module.\n });\n // Other code that operates on the global scope and is not\n // ready to be refactored into modules yet.\n var btn = document.querySelector(\".square\");\n</script>\n</code></pre></div>"}},{"type":"prose","value":{"id":"top-level-await","title":"Top-Level-Await","isH3":false,"content":"<p>Top-Level-Await ist eine Funktion, die in Modulen verfügbar ist. Das bedeutet, dass das <code>await</code>-Schlüsselwort verwendet werden kann. Es ermöglicht Modulen, wie große <a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">asynchrone Funktionen</a> zu agieren, was bedeutet, dass Code bewertet werden kann, bevor er in übergeordneten Modulen verwendet wird, ohne jedoch Geschwistermodule am Laden zu hindern.</p>\n<p>Lassen Sie uns ein Beispiel betrachten. Sie finden alle im Folgenden beschriebenen Dateien und Codes im <a href=\"https://github.com/mdn/js-examples/tree/main/module-examples/top-level-await\" class=\"external\" target=\"_blank\"><code>top-level-await</code></a>-Verzeichnis, das aus den vorherigen Beispielen erweitert wird.</p>\n<p>Zuerst deklarieren wir unsere Farbpalette in einer separaten <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json\" class=\"external\" target=\"_blank\"><code>colors.json</code></a>-Datei:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"yellow\": \"#F4D03F\",\n \"green\": \"#52BE80\",\n \"blue\": \"#5499C7\",\n \"red\": \"#CD6155\",\n \"orange\": \"#F39C12\"\n}\n</code></pre></div>\n<p>Dann erstellen wir ein Modul namens <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js\" class=\"external\" target=\"_blank\"><code>getColors.js</code></a>, das eine Fetch-Anfrage verwendet, um die <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/data/colors.json\" class=\"external\" target=\"_blank\"><code>colors.json</code></a>-Datei zu laden und die Daten als Objekt zurückzugeben.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// fetch request\nconst colors = fetch(\"../data/colors.json\").then((response) => response.json());\n\nexport default await colors;\n</code></pre></div>\n<p>Beachten Sie die letzte Exportzeile hier.</p>\n<p>Wir verwenden das <code>await</code>-Schlüsselwort, bevor wir die Konstante <code>colors</code> angeben, zum Exportieren. Das bedeutet, dass andere Module, die dieses Modul enthalten, warten, bis <code>colors</code> heruntergeladen und geparst wurde, bevor sie es verwenden.</p>\n<p>Lassen Sie uns dieses Modul in unserer <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js\" class=\"external\" target=\"_blank\"><code>main.js</code></a>-Datei einfügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import colors from \"./modules/getColors.js\";\nimport { Canvas } from \"./modules/canvas.js\";\n\nconst circleBtn = document.querySelector(\".circle\");\n\n// …\n</code></pre></div>\n<p>Wir verwenden <code>colors</code> statt der zuvor verwendeten Strings, wenn wir unsere Formfunktionen aufrufen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>const square1 = new Module.Square(\n myCanvas.ctx,\n myCanvas.listId,\n 50,\n 50,\n 100,\n colors.blue,\n);\n\nconst circle1 = new Module.Circle(\n myCanvas.ctx,\n myCanvas.listId,\n 75,\n 200,\n 100,\n colors.green,\n);\n\nconst triangle1 = new Module.Triangle(\n myCanvas.ctx,\n myCanvas.listId,\n 100,\n 75,\n 190,\n colors.yellow,\n);\n</code></pre></div>\n<p>Dies ist nützlich, weil der Code innerhalb von <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/main.js\" class=\"external\" target=\"_blank\"><code>main.js</code></a> nicht ausgeführt wird, bis der Code in <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/getColors.js\" class=\"external\" target=\"_blank\"><code>getColors.js</code></a> ausgeführt wurde. Es wird jedoch das Laden anderer Module nicht blockieren. Beispielsweise wird unser <a href=\"https://github.com/mdn/js-examples/blob/main/module-examples/top-level-await/modules/canvas.js\" class=\"external\" target=\"_blank\"><code>canvas.js</code></a> Modul weiterhin laden, während <code>colors</code> abgerufen wird.</p>"}},{"type":"prose","value":{"id":"import-deklarationen_werden_gehoben","title":"Import-Deklarationen werden gehoben","isH3":false,"content":"<p>Import-Deklarationen werden <a href=\"/de/docs/Glossary/Hoisting\">gehoben</a>. In diesem Fall bedeutet das, dass die importierten Werte im Modulcode verfügbar sind, noch bevor sie deklariert sind, und dass die Nebeneffekte des importierten Moduls produziert werden, bevor der Rest des Modulcodes beginnt zu laufen.</p>\n<p>Zum Beispiel würde das Importieren von <code>Canvas</code> in der Mitte des Codes in <code>main.js</code> trotzdem funktionieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// …\nconst myCanvas = new Canvas(\"myCanvas\", document.body, 480, 320);\nmyCanvas.create();\nimport { Canvas } from \"./modules/canvas.js\";\nmyCanvas.createReportList();\n// …\n</code></pre></div>\n<p>Dennoch wird es als gute Praxis angesehen, alle Ihre Imports am Anfang des Codes zu platzieren, was es einfacher macht, Abhängigkeiten zu analysieren.</p>"}},{"type":"prose","value":{"id":"zyklische_importe","title":"Zyklische Importe","isH3":false,"content":"<p>Module können andere Module importieren, und diese Module können andere Module importieren und so weiter. Dies bildet einen <a href=\"https://de.wikipedia.org/wiki/Gerichteter_Graph\" class=\"external\" target=\"_blank\">gerichteten Graphen</a>, der als \"Abhängigkeitsgraph\" bezeichnet wird. Idealweise ist dieser Graph <a href=\"https://de.wikipedia.org/wiki/Gerichteter_azyklischer_Graph\" class=\"external\" target=\"_blank\">azyklisch</a>. In diesem Fall kann der Graph mithilfe einer Tiefensuche ausgewertet werden.</p>\n<p>Zyklen sind jedoch oft unvermeidlich. Zyklische Importe entstehen, wenn Modul <code>a</code> Modul <code>b</code> importiert, aber <code>b</code> direkt oder indirekt von <code>a</code> abhängt. Zum Beispiel:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// -- a.js --\nimport { b } from \"./b.js\";\n\n// -- b.js --\nimport { a } from \"./a.js\";\n\n// Cycle:\n// a.js ───> b.js\n// ^ │\n// └─────────┘\n</code></pre></div>\n<p>Zyklische Importe schlagen nicht immer fehl. Der Wert der importierten Variable wird nur abgerufen, wenn die Variable tatsächlich verwendet wird (was das <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter\">Live-Binding</a> ermöglicht), und nur wenn die Variable zu diesem Zeitpunkt uninitialisiert bleibt, wird ein <a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init\"><code>ReferenceError</code></a> geworfen.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// -- a.js --\nimport { b } from \"./b.js\";\n\nsetTimeout(() => {\n console.log(b); // 1\n}, 10);\n\nexport const a = 2;\n\n// -- b.js --\nimport { a } from \"./a.js\";\n\nsetTimeout(() => {\n console.log(a); // 2\n}, 10);\n\nexport const b = 1;\n</code></pre></div>\n<p>In diesem Beispiel werden sowohl <code>a</code> als auch <code>b</code> asynchron verwendet. Daher wird während der Auswertung des Moduls weder <code>b</code> noch <code>a</code> tatsächlich gelesen, sodass der restliche Code wie gewohnt ausgeführt wird und die beiden <code>export</code>-Deklarationen die Werte von <code>a</code> und <code>b</code> produzieren. Dann, nach dem Timeout, stehen sowohl <code>a</code> als auch <code>b</code> zur Verfügung, sodass auch die beiden <code>console.log</code>-Anweisungen wie gewohnt ausgeführt werden.</p>\n<p>Wenn Sie den Code so ändern, dass <code>a</code> synchron verwendet wird, schlägt die Modulauswertung fehl:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// -- a.js (entry module) --\nimport { b } from \"./b.js\";\n\nexport const a = 2;\n\n// -- b.js --\nimport { a } from \"./a.js\";\n\nconsole.log(a); // ReferenceError: Cannot access 'a' before initialization\nexport const b = 1;\n</code></pre></div>\n<p>Dies liegt daran, dass JavaScript bei der Auswertung von <code>a.js</code> zuerst <code>b.js</code>, die Abhängigkeit von <code>a.js</code>, auswerten muss. <code>b.js</code> verwendet jedoch <code>a</code>, das noch nicht verfügbar ist.</p>\n<p>Auf der anderen Seite verläuft die Modulauswertung erfolgreich, wenn Sie den Code so ändern, dass <code>b</code> synchron, aber <code>a</code> asynchron verwendet wird:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// -- a.js (entry module) --\nimport { b } from \"./b.js\";\n\nconsole.log(b); // 1\nexport const a = 2;\n\n// -- b.js --\nimport { a } from \"./a.js\";\n\nsetTimeout(() => {\n console.log(a); // 2\n}, 10);\nexport const b = 1;\n</code></pre></div>\n<p>Dies liegt daran, dass die Auswertung von <code>b.js</code> normal abgeschlossen wird, sodass der Wert von <code>b</code> verfügbar ist, wenn <code>a.js</code> ausgewertet wird.</p>\n<p>Sie sollten normalerweise zyklische Importe in Ihrem Projekt vermeiden, weil sie Ihren Code fehleranfälliger machen. Einige gängige Zykleneliminationstechniken sind:</p>\n<ul>\n<li>Zusammenführen der beiden Module in ein Modul.</li>\n<li>Verschieben des gemeinsam genutzten Codes in ein drittes Modul.</li>\n<li>Verschieben von etwas Code von einem Modul zum anderen.</li>\n</ul>\n<p>Zyklische Importe können jedoch auch auftreten, wenn Bibliotheken voneinander abhängig sind, was schwerer zu beheben ist.</p>"}},{"type":"prose","value":{"id":"isomorphe_module_erstellen","title":"Isomorphe Module erstellen","isH3":false,"content":"<p>Die Einführung von Modulen fördert das Javascript-Ökosystem, Code modular zu verteilen und wiederzuverwenden. Das bedeutet jedoch nicht unbedingt, dass ein Stück JavaScript-Code in jeder Umgebung ausgeführt werden kann. Angenommen, Sie haben ein Modul gefunden, das SHA-Hashes für die Passwörter Ihrer Benutzer generiert. Können Sie es im Browser-Frontend verwenden? Können Sie es auf Ihrem Node.js-Server verwenden? Die Antwort lautet: Es kommt darauf an.</p>\n<p>Module haben nach wie vor Zugriff auf globale Variablen, wie zuvor demonstriert. Wenn das Modul globale Variablen wie <code>window</code> referenziert, kann es im Browser ausgeführt werden, aber es wird auf Ihrem Node.js-Server einen Fehler auslösen, weil <code>window</code> dort nicht verfügbar ist. Wenn der Code zwingend auf <code>process</code> zugreifen muss, kann es nur in Node.js verwendet werden.</p>\n<p>Um die Wiederverwendbarkeit eines Moduls zu maximieren, wird häufig empfohlen, den Code \"isomorph\" zu machen — das heißt, dass er in jeder Laufzeitumgebung dasselbe Verhalten zeigt. Dies wird üblicherweise auf drei Arten erreicht:</p>\n<ul>\n<li>\n<p>Trennen Sie Ihre Module in \"Kern\" und \"Bindung\". Für den \"Kern\" konzentrieren Sie sich auf die reine JavaScript-Logik wie das Berechnen des Hashs, ohne DOM-, Netzwerke- oder Dateizugriff, und machen Sie Dienstprogramme zugänglich. Im \"Bindung\"-Teil können Sie aus dem globalen Kontext lesen und schreiben. Beispielsweise könnte die \"Browser-Bindung\" wählen, den Wert aus einem Eingabefeld zu lesen, während die \"Node-Bindung\" ihn von <code>process.env</code> liest, aber Werte, die von beiden Orten stammen, werden an dieselbe Kernfunktion weitergeleitet und auf die gleiche Weise behandelt. Der Kern kann in jeder Umgebung importiert und auf die gleiche Weise verwendet werden, während nur die Bindung, was normalerweise leichtgewichtig ist, platform-spezifisch sein muss.</p>\n</li>\n<li>\n<p>Überprüfen Sie, ob ein bestimmtes globales Objekt existiert, bevor Sie es verwenden. Beispielsweise, wenn Sie überprüfen, dass <code>typeof window === \"undefined\"</code> ist, wissen Sie, dass Sie sich wahrscheinlich in einer Node.js-Umgebung befinden und auf den DOM nicht zugreifen sollten.</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// myModule.js\nlet password;\nif (typeof process !== \"undefined\") {\n // We are running in Node.js; read it from `process.env`\n password = process.env.PASSWORD;\n} else if (typeof window !== \"undefined\") {\n // We are running in the browser; read it from the input box\n password = document.getElementById(\"password\").value;\n}\n</code></pre></div>\n<p>Dies ist vorzuziehen, wenn die beiden Zweige tatsächlich am Ende dasselbe Verhalten erreichen (\"isomorph\"). Wenn es unmöglich ist, die gleiche Funktionalität zur Verfügung zu stellen oder wenn dies dazu führt, dass signifikante Massen an Code geladen werden, während ein Großteil davon ungenutzt bleibt, verwenden Sie besser unterschiedliche \"Bindings\" stattdessen.</p>\n</li>\n<li>\n<p>Verwenden Sie ein Polyfill, um ein Back-up für fehlende Funktionen bereitzustellen. Wenn Sie die <a href=\"/de/docs/Web/API/Fetch_API\"><code>fetch</code></a>-Funktion verwenden möchten, die in Node.js erst ab Version 18 unterstützt wird, können Sie eine ähnliche API verwenden, wie die, die von <a href=\"https://www.npmjs.com/package/node-fetch\" class=\"external\" target=\"_blank\"><code>node-fetch</code></a> bereitgestellt wird. Sie können dies bedingt durch dynamische Importe tun:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>// myModule.js\nif (typeof fetch === \"undefined\") {\n // We are running in Node.js; use node-fetch\n globalThis.fetch = (await import(\"node-fetch\")).default;\n}\n// …\n</code></pre></div>\n<p>Der <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis\"><code>globalThis</code></a> ist ein globales Objekt, das in jeder Umgebung verfügbar ist und nützlich ist, wenn Sie globale Variablen innerhalb von Modulen lesen oder erstellen möchten.</p>\n</li>\n</ul>\n<p>Diese Praktiken sind nicht einzigartig für Module. Angesichts des Trends zu Code-Wiederverwendbarkeit und Modularisierung werden Sie jedoch ermutigt, Ihren Code plattformübergreifend zu machen, damit er möglichst vielen Personen zugute kommen kann. Laufzeitumgebungen wie Node.js implementieren ebenfalls aktiv Web-APIs, wo dies möglich ist, um die Interoperabilität mit dem Web zu verbessern.</p>"}},{"type":"prose","value":{"id":"fehlerbehebung","title":"Fehlerbehebung","isH3":false,"content":"<p>Hier sind einige Tipps, die Ihnen helfen könnten, wenn Sie Probleme haben, Ihre Module zum Laufen zu bringen. Fühlen Sie sich frei, der Liste hinzuzufügen, wenn Sie mehr herausfinden!</p>\n<ul>\n<li>Wir haben dies zuvor erwähnt, aber zur Wiederholung: <code>.mjs</code>-Dateien müssen mit einem MIME-Typ von <code>text/javascript</code> (oder einem anderen JavaScript-kompatiblen MIME-Typ, aber <code>text/javascript</code> ist empfohlen) geladen werden, andernfalls erhalten Sie einen strengen MIME-Typ-Überprüfungsfehler wie \"Der Server antwortete mit einem Nicht-JavaScript MIME-Typ\".</li>\n<li>Wenn Sie versuchen, die HTML-Datei lokal zu laden (d. h. mit einer <code>file://</code>-URL), werden Sie auf CORS-Fehler stoßen aufgrund der Sicherheitsanforderungen von JavaScript-Modulen. Sie müssen Ihre Tests über einen Server durchführen. GitHub Pages ist ideal, da es auch <code>.mjs</code>-Dateien mit dem richtigen MIME-Typ bereitstellt.</li>\n<li>Da <code>.mjs</code> eine nicht standardmäßige Dateierweiterung ist, könnten einige Betriebssysteme sie nicht erkennen oder versuchen, sie durch etwas anderes zu ersetzen. Beispielsweise haben wir festgestellt, dass macOS <code>.js</code> schweigend an <code>.mjs</code>-Dateien anhängt und dann die Dateierweiterung automatisch ausblendet. Alle .mjs-Dateien waren tatsächlich als <code>x.mjs.js</code> herausgekommen. Sobald wir die automatische Ausblendung von Dateierweiterungen deaktiviert und es darauf trainiert haben, <code>.mjs</code> zu akzeptieren, war es in Ordnung.</li>\n</ul>"}},{"type":"prose","value":{"id":"siehe_auch","title":"Siehe auch","isH3":false,"content":"<ul>\n<li><a href=\"https://v8.dev/features/modules\" class=\"external\" target=\"_blank\">JavaScript-Module</a> auf v8.dev (2018)</li>\n<li><a href=\"https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/\" class=\"external\" target=\"_blank\">ES-Module: Ein Cartoon-Tiefen-Tauchgang</a> auf hacks.mozilla.org (2018)</li>\n<li><a href=\"https://hacks.mozilla.org/2015/08/es6-in-depth-modules/\" class=\"external\" target=\"_blank\">ES6 in Depth: Module</a> auf hacks.mozilla.org (2015)</li>\n<li><a href=\"https://exploringjs.com/es6/ch_modules.html\" class=\"external\" target=\"_blank\">Exploring JS, Ch.16: Modules</a> von Dr. Axel Rauschmayer</li>\n</ul>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\"><span class=\"button-wrap\"> Zurück </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Web/JavaScript/Guide/Modules","modified":"2025-02-17T00:20:27.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"JavaScript modules","native":"English (US)"},{"locale":"es","title":"Módulos JavaScript","native":"Español"},{"locale":"fr","title":"Les modules JavaScript","native":"Français"},{"locale":"ja","title":"JavaScript モジュール","native":"日本語"},{"locale":"ko","title":"JavaScript modules","native":"한국어"},{"locale":"pt-BR","title":"Módulos JavaScript","native":"Português (do Brasil)"},{"locale":"ru","title":"Модули JavaScript","native":"Русский"},{"locale":"zh-CN","title":"JavaScript 模块","native":"中文 (简体)"}],"pageTitle":"JavaScript-Module - JavaScript | MDN","parents":[{"uri":"/de/docs/Web","title":"Webtechnologie für Entwickler"},{"uri":"/de/docs/Web/JavaScript","title":"JavaScript"},{"uri":"/de/docs/Web/JavaScript/Guide","title":"JavaScript-Leitfaden"},{"uri":"/de/docs/Web/JavaScript/Guide/Modules","title":"JavaScript-Module"}],"popularity":null,"short_title":"JavaScript-Module","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Web/JavaScript\">JavaScript</a></li><li class=\"section\">Tutorials und Anleitungen</li><li class=\"toggle\"><details><summary>Tutorials für Anfänger</summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">Ihre erste Webseite: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary>JavaScript-Handbuch</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Guide/Introduction\">Einführung</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Grammar_and_types\">Grammatik und Typen</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling\">Steuerfluss und Fehlerbehandlung</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Loops_and_iteration\">Schleifen und Iteration</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Functions\">Funktionen</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Expressions_and_operators\">Ausdrücke und Operatoren</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Numbers_and_strings\">Zahlen und Zeichenketten</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Representing_dates_times\">Darstellung von Daten und Uhrzeiten</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Regular_expressions\">Reguläre Ausdrücke</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Indexed_collections\">Indexierte Sammlungen</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Keyed_collections\">Schlüsselbasierte Sammlungen</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Working_with_objects\">Arbeiten mit Objekten</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Using_classes\">Verwendung von Klassen</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Using_promises\">Verwendung von Promises</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Typed_arrays\">Typisierte Arrays in JavaScript</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Iterators_and_generators\">Iteratoren und Generatoren</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Internationalization\">Internationalisierung</a></li><li><a href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\">Metaprogrammierung</a></li><li><em><a href=\"/de/docs/Web/JavaScript/Guide/Modules\" aria-current=\"page\">JavaScript-Module</a></em></li></ol></details></li><li class=\"toggle\"><details><summary>Mittelstufe</summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Clientseitige Web-APIs</a></li><li><a href=\"/de/docs/Web/JavaScript/Language_overview\">Sprachübersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Data_structures\">JavaScript-Datenstrukturen</a></li><li><a href=\"/de/docs/Web/JavaScript/Equality_comparisons_and_sameness\">Gleichheitsvergleiche und Gleichheit</a></li><li><a href=\"/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties\">Aufzählbarkeit und Eigentum von Eigenschaften</a></li><li><a href=\"/de/docs/Web/JavaScript/Closures\">Closures</a></li></ol></details></li><li class=\"toggle\"><details><summary>Fortgeschritten</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\">Vererbung und die Prototypenkette</a></li><li><a href=\"/de/docs/Web/JavaScript/Memory_management\">Speicherverwaltung</a></li><li><a href=\"/de/docs/Web/JavaScript/Event_loop\">Konkurrenzmodell und Ereignisschleife</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Web/JavaScript/Reference\">Referenzen</a></li><li class=\"toggle\"><details><summary>Eingebaute Objekte</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/AggregateError\">AggregateError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Array\">Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer\">ArrayBuffer</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction\">AsyncFunction</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator\">AsyncGenerator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncGeneratorFunction\">AsyncGeneratorFunction</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncIterator\">AsyncIterator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics\">Atomics</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/BigInt\">BigInt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array\">BigInt64Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/BigUint64Array\">BigUint64Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean\">Boolean</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/DataView\">DataView</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Date\">Datum</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/decodeURI\">decodeURI()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent\">decodeURIComponent()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/encodeURI\">encodeURI()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent\">encodeURIComponent()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Error\">Error</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/escape\">escape()</a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/eval\">eval()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError\">EvalError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry\">FinalizationRegistry</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Float16Array\">Float16Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Float32Array\">Float32Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\">Float64Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Function\">Function</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Generator\">Generator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction\">GeneratorFunction</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis\">globalThis</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Infinity\">Infinity</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Int16Array\">Int16Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\">Int32Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Int8Array\">Int8Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError\">InternalError</a><abbr class=\"icon icon-nonstandard\" title=\"Nicht standardisiert. Überprüfen Sie vor der Verwendung die Browser-Kompatibilität.\">\n<span class=\"visually-hidden\">Nicht standardisiert</span>\n</abbr></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Intl\">Intl</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/isFinite\">isFinite()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN\">isNaN()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Iterator\">Iterator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/JSON\">JSON</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Map\">Map</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Math\">Math</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/NaN\">NaN</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Number\">Number</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Object\">Object</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\">parseFloat()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/parseInt\">parseInt()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Promise\">Promise</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Proxy\">Proxy</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/RangeError\">RangeError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError\">ReferenceError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Reflect\">Reflect</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp\">RegExp</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Set\">Set</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer\">SharedArrayBuffer</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/String\">String</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Symbol\">Symbol</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError\">SyntaxError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Temporal\">Temporal</a><abbr class=\"icon icon-experimental\" title=\"Experimentell. Das Verhalten könnte sich in Zukunft ändern.\">\n<span class=\"visually-hidden\">Experimentell</span>\n</abbr></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/TypedArray\">TypedArray</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError\">TypeError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Uint16Array\">Uint16Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Uint32Array\">Uint32Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array\">Uint8Array</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray\">Uint8ClampedArray</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/undefined\">undefined</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/unescape\">unescape()</a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/URIError\">URIError</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/WeakMap\">WeakMap</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/WeakRef\">WeakRef</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/WeakSet\">WeakSet</a></li></ol></details></li><li class=\"toggle\"><details><summary>Ausdrücke und Operatoren</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Addition\">Addition (+)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Addition_assignment\">Addition Assignment (+=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Assignment\">Zuweisung (=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/async_function\">async function expression</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/async_function*\">async function* Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/await\">await</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_AND\">Bitweises UND (&)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_AND_assignment\">Bitweise UND-Zuweisung (&=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_NOT\">Bitweise NOT (~)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_OR\">Bitweises Oder (|)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_OR_assignment\">Bitweises OR-Zuweisung (|=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR\">Bitweises XOR (^)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR_assignment\">Bitweises XOR-Zuweisung (^=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/class\">Klassenausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Comma_operator\">Komma-Operator (,)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Conditional_operator\">Bedingungsoperator (Ternärer Operator)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Decrement\">Decrement (--)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/delete\">delete</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment\">Destructuring-Zuweisung</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Division\">Division (/)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Division_assignment\">Division assignment (/=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Equality\">Gleichheit (==)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Exponentiation\">Potenzierung (**)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Exponentiation_assignment\">Exponentiation-Zuweisung (**=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/function\">function expression</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/function*\">function* Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Greater_than\">Greater than (>)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Greater_than_or_equal\">Greater than or equal (>=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Grouping\">Gruppierungsoperator ( )</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/import.meta\">import.meta</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/import\">import()</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/in\">in</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Increment\">Increment (++)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Inequality\">Inequality (!=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/instanceof\">instanceof</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Left_shift\">Left shift (<<)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Left_shift_assignment\">Left shift assignment (<<=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Less_than\">Less than (<)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Less_than_or_equal\">Less than or equal (<=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Logical_AND\">Logisches UND (&&)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Logical_AND_assignment\">Logical AND assignment (&&=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Logical_NOT\">Logisches NICHT (!)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Logical_OR\">Logical OR (||)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Logical_OR_assignment\">Logische ODER-Zuweisung (||=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Multiplication\">Multiplication (*)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Multiplication_assignment\">Multiplikationszuweisung (*=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/new\">new</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/new.target\">new.target</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/null\">null</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_assignment\">Nullish coalescing assignment (??=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing\">Nullish coalescing-Operator (??)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Object_initializer\">Objekt Initializer</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Operator_precedence\">Operatorpriorität</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Optional_chaining\">Optional Chaining (?.)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Property_accessors\">Property accessors</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Remainder\">Remainder (%)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Remainder_assignment\">Remainder-Zuweisung (%=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Right_shift\">Rechtsschiebung (>>)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Right_shift_assignment\">Right shift assignment (>>=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax\">Spread-Syntax (...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Strict_equality\">Strikte Gleichheit (===)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Strict_inequality\">Strikte Ungleichheit (!==)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Subtraction\">Subtraction (-)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Subtraction_assignment\">Subtraction assignment (-=)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/super\">super</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/this\">this</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/typeof\">typeof</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Unary_negation\">Unäre Negation (-)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Unary_plus\">Unary plus (+)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift\">Unsigned right shift (>>>)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift_assignment\">Unsigned right shift assignment (`>>>=`)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/void\">void operator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/yield\">yield</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators/yield*\">yield*</a></li></ol></details></li><li class=\"toggle\"><details><summary>Anweisungen und Deklarationen</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/async_function\">async function</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/async_function*\">async function*</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/block\">Block Statement</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/break\">break</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/class\">class</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/const\">const</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/continue\">continue</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/debugger\">debugger</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/do...while\">do...while</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/Empty\">Empty Statement</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/export\">export</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/Expression_statement\">Expression statement</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/for\">for</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/for-await...of\">for await...of</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/for...in\">for...in</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/for...of\">for...of</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/function\">function</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/function*\">function*</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/if...else\">if...else</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/import\">import</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/label\">Labelierte Anweisung</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/let\">let</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/return\">return</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/switch\">switch</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/throw\">throw</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/try...catch\">try...catch</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/var\">var</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/while\">while</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements/with\">with</a><abbr class=\"icon icon-deprecated\" title=\"Veraltet. Nicht empfohlen für neue Webseiten.\">\n<span class=\"visually-hidden\">Veraltet</span>\n</abbr></li></ol></details></li><li class=\"toggle\"><details><summary>Funktionen</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions\">Pfeilfunktionen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/Default_parameters\">Default parameters</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/get\">get</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/Method_definitions\">Methodendefinitionen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/rest_parameters\">Rest-Parameter</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/set\">set</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions/arguments\">Das arguments Objekt</a></li></ol></details></li><li class=\"toggle\"><details><summary>Klassen</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/constructor\">constructor</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/extends\">extends</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/Private_properties\">Private properties</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/Public_class_fields\">Öffentliche Klassenfelder</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/static\">static</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks\">Statische Initialisierungsblöcke</a></li></ol></details></li><li class=\"toggle\"><details><summary>Reguläre Ausdrücke</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Backreference\">Backreference: \\1, \\2</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Capturing_group\">Capturing group: (...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_class_escape\">Zeichenklassen-Escape: \\d, \\D, \\w, \\W, \\s, \\S</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_class\">Zeichenklasse: [...], [^...]</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape\">Zeichen-Escape: \\n, \\u{...}</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Disjunction\">Disjunktion: |</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Input_boundary_assertion\">Input-Bereichs-Assertion: ^, $</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Literal_character\">Literalzeichen: a, b</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Lookahead_assertion\">Lookahead-Assertion: (?=...), (?!...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Lookbehind_assertion\">Lookbehind Assertion: (?<=...), (?<!...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Modifier\">Modifikator: (?ims-ims:...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Named_backreference\">Benannte Rückreferenz: \\k<name></a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Named_capturing_group\">Named capturing group: (?<name>...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Non-capturing_group\">Nicht erfassende Gruppe: (?:...)</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Quantifier\">Quantifier: *, +, ?, {n}, {n,}, {n,m}</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Unicode_character_class_escape\">Unicode-Zeichenklassenescapes: \\p{...}, \\P{...}</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Wildcard\">Wildcard: .</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions/Word_boundary_assertion\">Wortgrenzen-Assertion: \\b, \\B</a></li></ol></details></li><li class=\"toggle\"><details><summary>Fehler</summary><ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors\">Übersicht</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Promise_any_all_rejected\">AggregateError: Kein Promise in Promise.any wurde aufgelöst</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Property_access_denied\">Fehler: Zugriff verweigert auf Eigenschaft \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Too_much_recursion\">InternalError: zu viel Rekursion</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Not_a_valid_code_point\">RangeError: argument ist kein gültiger Codepunkt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/BigInt_division_by_zero\">RangeError: BigInt-Division durch Null</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/BigInt_negative_exponent\">RangeError: BigInt negative exponent</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Form_must_be_one_of\">RangeError: form muss einer von 'NFC', 'NFD', 'NFKC' oder 'NFKD' sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_array_length\">RangeError: invalid array length</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_date\">RangeError: invalid date</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Precision_range\">RangeError: precision liegt außerhalb des zulässigen Bereichs</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_radix\">RangeError: radix muss eine ganze Zahl sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large\">RangeError: repeat count muss kleiner als unendlich sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count\">RangeError: repeat count must be non-negative</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_be_converted_to_BigInt_because_it_isnt_an_integer\">RangeError: x kann nicht in BigInt konvertiert werden, da es keine ganze Zahl ist</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Not_defined\">ReferenceError: \"x\" ist nicht definiert</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Undeclared_var\">ReferenceError: Zuordnung zu einer nicht deklarierten Variable \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init\">ReferenceError: kann auf lexikalische Deklaration 'X' vor der Initialisierung nicht zugreifen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage\">ReferenceError: veraltete Verwendung von caller oder arguments</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Super_not_called\">ReferenceError: 'super' Konstruktor muss vor der Verwendung von 'this' im Konstruktor der abgeleiteten Klasse aufgerufen werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Super_called_twice\">ReferenceError: super() zweimal im abgeleiteten Klassenkonstruktor aufgerufen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_strict_arguments_eval\">SyntaxError: 'arguments'/'eval' können im Strict-Mode-Code nicht definiert oder zugewiesen werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_literal\">SyntaxError: \"0\"-präfixierte Oktalliterale sind veraltet</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Strict_non_simple_params\">SyntaxError: \"use strict\" nicht erlaubt in Funktion mit nicht einfachen Parametern</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Reserved_identifier\">SyntaxError: \"x\" ist ein reservierter Bezeichner</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_backslash_at_end_of_pattern\">SyntaxError: \\ am Ende des Musters</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer\">SyntaxError: Eine Deklaration im Kopf einer for-of-Schleife darf keinen Initialisierer haben</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode\">SyntaxError: Die Anwendung des 'delete'-Operators auf einen unqualifizierten Namen ist veraltet</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Arguments_not_allowed\">SyntaxError: arguments ist in Feldern nicht gültig</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_await\">SyntaxError: await ist nur in async Funktionen, async Generatoren und Modulen gültig</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/await_yield_in_parameter\">SyntaxError: await/yield expression kann nicht im Parameter verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_use_nullish_coalescing_unparenthesized\">SyntaxError: `??` kann nicht ohne Klammern innerhalb von `||` und `&&`-Ausdrücken verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_character_class_escape_in_class_range\">SyntaxError: Zeichenklassen-Escape kann nicht im Klassenbereich im regulären Ausdruck verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_continue\">SyntaxError: continue muss innerhalb einer Schleife sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_duplicate_capture_group_name\">SyntaxError: doppelter Name der Erfassungsgruppe im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Duplicate_parameter\">SyntaxError: doppeltes formales Argument x</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer\">SyntaxError: Deklarationen im Kopf einer for-in-Schleife dürfen keine Initialisierer enthalten</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement\">SyntaxError: Funktionsanweisung erfordert einen Namen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Function_label\">SyntaxError: Funktionen können nicht beschriftet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Either_be_both_static_or_non-static\">SyntaxError: Getter und Setter für privaten Namen #x sollten entweder beide statisch oder nicht statisch sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Getter_no_arguments\">SyntaxError: Getter-Funktionen dürfen keine Argumente haben</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Identifier_after_number\">SyntaxError: identifier starts immediately after numeric literal</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Illegal_character\">SyntaxError: illegales Zeichen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/import_decl_module_top_level\">SyntaxError: import-Deklarationen dürfen nur auf der obersten Ebene eines Moduls erscheinen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_incomplete_quantifier\">SyntaxError: unvollständiger Quantifizierer im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side\">SyntaxError: invalid assignment left-hand side</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_BigInt_syntax\">SyntaxError: Ungültige BigInt-Syntax</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_capture_group_name\">SyntaxError: ungültiger Name der Erfassungsgruppe im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_char_in_class\">SyntaxError: ungültiges Zeichen in Klasse in regulärem Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_class_set_operation\">SyntaxError: Ungültige Klassenmengenoperation im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_decimal_escape\">SyntaxError: ungültiger Dezimal-Escape in regulärem Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_identity_escape\">SyntaxError: ungültige Identitätsflucht in regulärem Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_named_capture_reference\">SyntaxError: ungültige benannte Referenz in regulärem Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_property_name\">SyntaxError: ungültiger Eigenschaftsname im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_range_in_character_class\">SyntaxError: invalid range in character class</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_group\">SyntaxError: invalid regexp group</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag\">SyntaxError: invalid regular expression flag \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_invalid_unicode_escape\">SyntaxError: ungültiger Unicode-Escape in regulärem Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse\">SyntaxError: JSON.parse: Fehlerhaftes Parsing</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Label_not_found\">SyntaxError: label not found</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id\">SyntaxError: missing : after property id</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list\">SyntaxError: missing ) after argument list</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition\">SyntaxError: missing ) after condition</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list\">SyntaxError: missing ] after element list</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body\">SyntaxError: fehlende } nach Funktionskörper</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list\">SyntaxError: missing } after property list</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const\">SyntaxError: missing = in const declaration</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter\">SyntaxError: missing formal parameter</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator\">SyntaxError: missing name after . operator</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/No_variable_name\">SyntaxError: missing variable name</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_negated_char_class_with_strings\">SyntaxError: Negierte Zeichenklasse mit Strings im regulären Ausdruck</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_new_optional\">SyntaxError: new-Schlüsselwort kann nicht mit einer Optionalen Kette verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_nothing_to_repeat\">SyntaxError: nothing to repeat</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_numbers_out_of_order_in_quantifier\">SyntaxError: numbers out of order in {} quantifier.</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal_escape_sequence\">SyntaxError: Oktale Escape-Sequenzen können nicht in nicht-getaggten Vorlagenliteralen oder im Strict Mode-Code verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Parameter_after_rest_parameter\">SyntaxError: parameter nach Rest-Parameter</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_delete_private_fields\">SyntaxError: private fields können nicht gelöscht werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Duplicate_proto\">SyntaxError: Eigenschaftenname __proto__ erscheint mehr als einmal im Objektliteral</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Regex_raw_bracket\">SyntaxError: Raw-Klammern sind im regulären Ausdruck mit Unicode-Flag nicht erlaubt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter\">SyntaxError: redeclaration of formal parameter \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Undeclared_private_field_or_method\">SyntaxError: Verweis auf nicht deklariertes privates Feld oder Methode #x</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Rest_with_default\">SyntaxError: Restparameter darf keinen Standardwert haben</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_return\">SyntaxError: return not in function</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Setter_one_argument\">SyntaxError: Setter-Funktionen müssen ein Argument haben</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/String_literal_EOL\">SyntaxError: string literal enthält einen nicht-escaped Zeilenumbruch</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_super_call\">SyntaxError: super() ist nur in Konstruktoren abgeleiteter Klassen gültig</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_optional_template\">SyntaxError: getaggtes Template kann nicht mit optionaler Verkettung verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Hash_outside_class\">SyntaxError: Unerwartetes '#' außerhalb des Klassenkörpers verwendet</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Unexpected_token\">SyntaxError: Unerwartetes Token</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_break\">SyntaxError: unlabeled break muss innerhalb einer Schleife oder eines Switch sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Unparenthesized_unary_expr_lhs_exponentiation\">SyntaxError: unverklammerter unärer Ausdruck kann nicht auf der linken Seite von '**' erscheinen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Bad_super_prop\">SyntaxError: Verwendung von Super-Eigenschaften/-mitgliedern ist nur innerhalb von Methoden oder eval-Code innerhalb von Methoden gültig</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma\">SyntaxError: Die Verwendung von //@ zur Angabe von sourceURL-Pragmas ist veraltet. Verwenden Sie stattdessen //#</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/is_not_iterable\">TypeError: 'x' ist nicht iterierbar</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Unexpected_type\">TypeError: \"x\" ist (nicht) \"y\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Not_a_constructor\">TypeError: \"x\" ist kein Konstruktor</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Not_a_function\">TypeError: \"x\" ist keine Funktion</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/No_non-null_object\">TypeError: \"x\" ist kein nicht-null-Objekt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Read-only\">TypeError: \"x\" ist schreibgeschützt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/BigInt_not_serializable\">TypeError: BigInt-Wert kann nicht in JSON serialisiert werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Builtin_ctor_no_new\">TypeError: Der Aufruf eines eingebauten X-Konstruktors ohne new ist verboten</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Get_set_missing_private\">TypeError: kann nicht auf privates Feld oder Methode zugreifen/setzen: Objekt ist nicht die richtige Klasse</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_assign_to_property\">TypeError: kann Eigenschaft „x“ auf „y“ nicht zuweisen: kein Objekt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_convert_BigInt_to_number\">TypeError: can't convert BigInt to number</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_convert_x_to_BigInt\">TypeError: kann x nicht in BigInt konvertieren</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible\">TypeError: kann Eigenschaft \"x\" nicht definieren: \"obj\" ist nicht erweiterbar</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element\">TypeError: can't delete non-configurable array element</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property\">TypeError: kann nicht konfigurierbare Eigenschaft \"x\" neu definieren</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_set_prototype\">TypeError: kann das Prototyp dieses Objekts nicht festlegen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cyclic_prototype\">TypeError: kann Prototyp nicht setzen: würde einen Prototyp-Kettenzyklus verursachen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/in_operator_no_object\">TypeError: kann den 'in'-Operator nicht verwenden, um nach 'x' in 'y' zu suchen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Class_ctor_no_new\">TypeError: Klassenkonstruktoren müssen mit 'new' aufgerufen werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value\">TypeError: cyclic object value</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_derived_return\">TypeError: abgeleiteter Klassenkonstruktor hat einen ungültigen Wert x zurückgegeben</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Private_setter_only\">TypeError: getting private setter-only property</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Private_double_initialization\">TypeError: Initialisierung eines Objekts zweimal ist ein Fehler bei privaten Feldern/Methoden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand\">TypeError: ungültiger 'instanceof'-Operand 'x'</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Array_sort_argument\">TypeError: invalides Array.prototype.sort Argument</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment\">TypeError: ungültige Zuweisung zu const \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Constructor_cant_be_used_directly\">TypeError: Iterator/AsyncIterator-Konstruktor kann nicht direkt verwendet werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Requires_global_RegExp\">TypeError: matchAll/replaceAll muss mit einem globalen RegExp aufgerufen werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/More_arguments_needed\">TypeError: Mehr Argumente benötigt</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/No_properties\">TypeError: null/undefined hat keine Eigenschaften</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_delete\">TypeError: Eigenschaft \"x\" ist nicht konfigurierbar und kann nicht gelöscht werden</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value\">TypeError: Reduce eines leeren Arrays ohne initialen Wert</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Getter_only\">TypeError: Einstellung der nur-Getter-Eigenschaft \"x\"</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Key_not_weakly_held\">TypeError: WeakSet-Schlüssel/WeakMap-Wert 'x' muss ein Objekt oder ein nicht registriertes Symbol sein</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type\">TypeError: X.prototype.y auf inkompatiblen Typ aufgerufen</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Malformed_URI\">URIError: malformed URI sequence</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Already_has_pragma\">Warnung: -file- wird ein //# sourceMappingURL zugewiesen, hat aber bereits eines</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors/Stmt_after_return\">Warnung: unerreichbarer Code nach return-Anweisung</a></li></ol></details></li><li class=\"toggle\"><details><summary>Sonstiges</summary><ol><li><a href=\"/de/docs/Web/JavaScript/JavaScript_technologies_overview\">Übersicht über JavaScript-Technologien</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Lexical_grammar\">Lexikalische Grammatik</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Iteration_protocols\">Iterationsprotokolle</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Strict_mode\">Strenger Modus</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Template_literals\">Template-Literale</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Trailing_commas\">Abschließende Kommas</a></li><li><a href=\"/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features\">Veraltete Funktionen</a></li></ol></details></li></ol>","source":{"folder":"de/web/javascript/guide/modules","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/web/javascript/guide/modules/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/452fe502cfb4c9a91c346af17370ecfb6a8bd17e","filename":"index.md"},"summary":"Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modulsyntax zu beginnen.","title":"JavaScript-Module","toc":[{"text":"Hintergrund zu Modulen","id":"hintergrund_zu_modulen"},{"text":"Einführung eines Beispiels","id":"einführung_eines_beispiels"},{"text":"Grundlegende Beispielstruktur","id":"grundlegende_beispielstruktur"},{"text":"Exportieren von Modulfunktionen","id":"exportieren_von_modulfunktionen"},{"text":"Funktionen in Ihr Skript importieren","id":"funktionen_in_ihr_skript_importieren"},{"text":"Module mit Importkarten importieren","id":"module_mit_importkarten_importieren"},{"text":"Laden von Nicht-JavaScript-Ressourcen","id":"laden_von_nicht-javascript-ressourcen"},{"text":"Anwenden des Moduls auf Ihr HTML","id":"anwenden_des_moduls_auf_ihr_html"},{"text":"Weitere Unterschiede zwischen Modulen und klassischen Skripten","id":"weitere_unterschiede_zwischen_modulen_und_klassischen_skripten"},{"text":"Standardexporte versus benannte Exporte","id":"standardexporte_versus_benannte_exporte"},{"text":"Vermeidung von Namenskonflikten","id":"vermeidung_von_namenskonflikten"},{"text":"Umbenennen von Importen und Exporten","id":"umbenennen_von_importen_und_exporten"},{"text":"Erstellen eines Modulobjekts","id":"erstellen_eines_modulobjekts"},{"text":"Module und Klassen","id":"module_und_klassen"},{"text":"Aggregieren von Modulen","id":"aggregieren_von_modulen"},{"text":"Dynamisches Laden von Modulen","id":"dynamisches_laden_von_modulen"},{"text":"Top-Level-Await","id":"top-level-await"},{"text":"Import-Deklarationen werden gehoben","id":"import-deklarationen_werden_gehoben"},{"text":"Zyklische Importe","id":"zyklische_importe"},{"text":"Isomorphe Module erstellen","id":"isomorphe_module_erstellen"},{"text":"Fehlerbehebung","id":"fehlerbehebung"},{"text":"Siehe auch","id":"siehe_auch"}],"pageType":"guide"}}</script></body></html>