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="robots" content="noindex, follow"/><meta name="description" content="Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modul-Syntax 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-Modul-Syntax 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.5e889624.js"></script><link href="/static/css/main.26c64ea7.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="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="guides-button" class="top-level-entry menu-toggle" aria-controls="guides-menu" aria-expanded="false">Guides</button><a href="/de/docs/Learn" class="top-level-entry">Guides</a><ul id="guides-menu" class="submenu guides hidden inline-submenu-lg" aria-labelledby="guides-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn" 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" 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/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">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn/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">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn/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">Learn to run scripts in the browser</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">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">Web-Technologien 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" data-macro="JsSidebar"><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="#ein_beispiel_einführen">Ein Beispiel einführen</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="#importieren_von_funktionen_in_ihr_skript">Importieren von Funktionen in Ihr Skript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#importieren_von_modulen_mit_importmaps">Importieren von Modulen mit Importmaps</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="#standardexports_versus_benannte_exporte">Standardexports 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="#importe_und_exporte_umbenennen">Importe und Exporte umbenennen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_eines_modul-objekts">Erstellen eines Modul-Objekts</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="#aggregation_von_modulen">Aggregation von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamische_modulladung">Dynamische Modulladung</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="#importdeklarationen_sind_gehoben">Importdeklarationen sind 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="#autorisierung_von_„isomorphen“_modulen">Autorisierung von „isomorphen“ Modulen</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</li> <li class="toggle"> <details> <summary>Komplette Anfänger</summary> <ol> <li><a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript-Grundlagen</a></li> <li><a href="/de/docs/Learn/JavaScript/First_steps">Erste Schritte in JavaScript</a></li> <li><a href="/de/docs/Learn/JavaScript/Building_blocks">JavaScript-Bausteine</a></li> <li><a href="/de/docs/Learn/JavaScript/Objects">Einführung in JavaScript-Objekte</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_dates">Zahlen und Daten</a></li> <li><a href="/de/docs/Web/JavaScript/Guide/Text_formatting">Textformatierung</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">Gekennzeichnete 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/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/Tools_and_testing/Client-side_JavaScript_frameworks">Client-seitige JavaScript-Frameworks</a></li> <li><a href="/de/docs/Learn/JavaScript/Client-side_web_APIs">Client-seitige 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">Standard eingebaute Objekte</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">Date</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 für neue Websites verwenden."> <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 die Unterstützung in verschiedenen Browsern, bevor Sie es verwenden."> <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/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 für neue Websites verwenden."> <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">Ausdrücke und Operatoren</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">Object 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">Statements und Deklarationen</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 für neue Websites verwenden."> <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">Functions</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">Klassen</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">Public class fields</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">Regular expressions</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">JavaScript-Fehlerreferenz</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 startet direkt nach einer numerischen 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: can't set prototype: it would cause a prototype chain cycle</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">JavaScript-Technologie (Übersicht)</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">Vorlagenliterale</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="#ein_beispiel_einführen">Ein Beispiel einführen</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="#importieren_von_funktionen_in_ihr_skript">Importieren von Funktionen in Ihr Skript</a></li><li class="document-toc-item "><a class="document-toc-link" href="#importieren_von_modulen_mit_importmaps">Importieren von Modulen mit Importmaps</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="#standardexports_versus_benannte_exporte">Standardexports 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="#importe_und_exporte_umbenennen">Importe und Exporte umbenennen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#erstellen_eines_modul-objekts">Erstellen eines Modul-Objekts</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="#aggregation_von_modulen">Aggregation von Modulen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#dynamische_modulladung">Dynamische Modulladung</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="#importdeklarationen_sind_gehoben">Importdeklarationen sind 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="#autorisierung_von_„isomorphen“_modulen">Autorisierung von „isomorphen“ Modulen</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-Modul-Syntax 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 sehr klein - die meiste Nutzung in den frühen Tagen beschränkte sich auf isolierte Scripting-Aufgaben, die etwas Interaktivität auf Ihre Webseiten brachten, wo nötig, sodass große Skripte im Allgemeinen nicht benötigt wurden. Einige Jahre später haben wir nun vollständige Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das in anderen Kontexten verwendet wird (<a href="/de/docs/Glossary/Node.js">Node.js</a> zum Beispiel).</p> <p>Komplexe Projekte erfordern einen Mechanismus, um JavaScript-Programme in separate Module zu unterteilen, die bei Bedarf importiert werden können. Node.js hat diese Fähigkeit schon lange, 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 Funktionen für Module nativ, ohne dass eine Transpilation erforderlich ist. Das ist nur eine gute Sache - Browser können das Laden von Modulen optimieren, was effizienter ist, als eine Bibliothek zu verwenden und all die zusätzliche clientseitige Verarbeitung und zusätzliche Rundreisen zu machen. Es macht jedoch Bundler wie webpack nicht obsolet - Bundler leisten immer noch gute Arbeit beim Partitionieren von Code in vernünftig dimensionierte Stücke und können andere Optimierungen wie Minifizierung, Toter Code-Elimination und Tree-Shaking vornehmen.</p></div></section><section aria-labelledby="ein_beispiel_einführen"><h2 id="ein_beispiel_einführen"><a href="#ein_beispiel_einführen">Ein Beispiel einführen</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 zeigen 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 dem Canvas zeichnen (und Informationen darüber berichten).</p> <p>Diese sind ziemlich trivial, wurden jedoch absichtlich 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 ausführen.</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 eine Dateistruktur wie folgt:</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 Grunde die gleiche Struktur; das oben Gesagte sollte ziemlich vertraut werden.</p> </div> <p>Die zwei Module im Verzeichnis modules sind unten beschrieben:</p> <ul> <li> <p><code>canvas.js</code> — enthält Funktionen, die mit der Einrichtung des Canvas verbunden sind:</p> <ul> <li><code>create()</code> — erstellt ein Canvas mit einer angegebenen <code>width</code> und <code>height</code> in einem Wrapper-<code><div></code> mit einer angegebenen ID, die selbst in einem angegebenen Elternelement angehängt wird. Gibt ein Objekt zurück, das den 2D-Kontext des Canvas und die ID des Wrappers enthält.</li> <li><code>createReportList()</code> — erstellt eine ungeordnete Liste, die innerhalb eines angegebenen Wrapperelements angehängt ist und die zum Ausgeben von Berichtsdaten 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 einem angegebenen Canvas mit angegebener 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 Berichts-Liste, basierend auf seiner Länge.</li> <li><code>reportPerimeter()</code> — schreibt den Umfang eines Quadrats in eine spezifische Berichts-Liste, basierend auf seiner Länge.</li> </ul> </li> </ul></div></section><section aria-labelledby="beiseite_—_.mjs_versus_.js"><h3 id="beiseite_—_.mjs_versus_.js"><a href="#beiseite_—_.mjs_versus_.js">Beiseite — .mjs versus .js</a></h3><div class="section-content"><p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href="https://v8.dev/features/modules#mjs" class="external" target="_blank">V8's documentation recommends this</a>, for example. The reasons given are:</p> <ul> <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li> <li>It ensures that your module files are parsed as a module by runtimes such as <a href="https://nodejs.org/api/esm.html#esm_enabling" class="external" target="_blank">Node.js</a>, and build tools such as <a href="https://babeljs.io/docs/options#sourcetype" class="external" target="_blank">Babel</a>.</li> </ul> <p>However, we decided to keep using <code>.js</code>, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript. Most servers already set the correct type for <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href="https://pages.github.com/" class="external" target="_blank">GitHub Pages</a> and <a href="https://github.com/http-party/http-server#readme" class="external" target="_blank"><code>http-server</code></a> for Node.js.</p> <p>This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct <a href="/de/docs/Web/HTTP/Headers/Content-Type"><code>Content-Type</code></a> for <code>.mjs</code> files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.</p> <p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p> <p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for "normal" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p> <p>It is also worth noting that:</p> <ul> <li>Some tools may never support <code>.mjs</code>.</li> <li>The <code><script type="module"></code> attribute is used to denote when a module is being pointed to, as you'll see below.</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, um Zugriff auf Modulfunktionen zu erhalten, ist, diese zu exportieren. Dies geschieht mit der <a href="/de/docs/Web/JavaScript/Reference/Statements/export"><code>export</code></a>-Anweisung.</p> <p>Der einfachste Weg, es zu verwenden, besteht darin, es vor die Elemente zu setzen, die Sie aus dem Modul exportieren möchten, 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 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 sich auf Top-Level-Elemente beziehen: Zum Beispiel können Sie <code>export</code> nicht innerhalb einer Funktion verwenden.</p> <p>Eine bequemere Methode, alle Elemente, die Sie exportieren möchten, zu exportieren, ist, eine einzige Exportanweisung am Ende Ihrer Moduldaten zu verwenden, gefolgt von einer kommagetrennten Liste der Funktionen, die Sie exportieren möchten, eingeschlossen 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="importieren_von_funktionen_in_ihr_skript"><h2 id="importieren_von_funktionen_in_ihr_skript"><a href="#importieren_von_funktionen_in_ihr_skript">Importieren von Funktionen in Ihr Skript</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, ist wie folgt:</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 kommagetrennten Liste der Funktionen, die Sie importieren möchten, eingeschlossen in geschweifte Klammern, gefolgt von dem Schlüsselwort <code>from</code>, gefolgt von dem <em>Modulespezifizierer</em>.</p> <p>Der <em>Modulespezifizierer</em> liefert einen String, den die JavaScript-Umgebung in einen Pfad zur Moduldaten auflösen kann. In einem Browser könnte dies ein Pfad relativ zur Website-Wurzel sein, der 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 Standort" zu bedeuten, gefolgt von dem relativen Pfad zur 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 tragbar machen - das Beispiel funktioniert weiterhin, wenn Sie es an eine andere Stelle in der Website-Hierarchie 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 some module systems, you can use a module specifier like <code>modules/square</code> that isn't a relative or absolute path, and that doesn't have a file extension. This kind of specifier can be used in a browser environment if you first define an <a href="#importieren_von_modulen_mit_importmaps">import map</a>. </p> </div> <p>Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in <code>main.js</code>, below the import lines:</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> The imported values are read-only views of the features that were exported. Similar to <code>const</code> variables, you cannot re-assign the variable that was imported, but you can still modify properties of object values. The value can only be re-assigned by the module exporting it. See the <a href="/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter"><code>import</code> reference</a> for an example.</p> </div></div></section><section aria-labelledby="importieren_von_modulen_mit_importmaps"><h2 id="importieren_von_modulen_mit_importmaps"><a href="#importieren_von_modulen_mit_importmaps">Importieren von Modulen mit Importmaps</a></h2><div class="section-content"><p>Oben haben wir gesehen, wie ein Browser ein Modul mit einem Modulspezifizierer importieren kann, der entweder eine absolute URL oder eine relative URL ist, die mit der Basis-URL des Dokuments aufgelöst wird:</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">Importmaps</a> erlauben es Entwicklern stattdessen, fast jeden beliebigen Text im Modulspezifizierer beim Importieren eines Moduls anzugeben; die Map liefert einen entsprechenden Wert, der den Text ersetzt, wenn die Modul-URL aufgelöst wird.</p> <p>Zum Beispiel definiert der <code>imports</code>-Schlüssel in der untenstehenden Importmap ein JSON-Objekt „Modulspezifizierer-Map“, bei dem die Eigenschaftsnamen als Modulspezifizierer verwendet werden können, und die entsprechenden Werte werden bei der Auflösung der Modul-URL durch den Browser ersetzt. Die Werte müssen absolute oder relative URLs sein. Relative URLs werden in absolute URL-Adressen mit der <a href="/de/docs/Web/HTML/Element/base">Basis-URL</a> des Dokuments aufgelöst, das die Importmap enthält.</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>The import map is defined using a <a href="/de/docs/Web/HTML/Element/script/type/importmap#import_map_json_representation">JSON object</a> inside a <code><script></code> element with the <code>type</code> attribute set to <a href="/de/docs/Web/HTML/Element/script/type/importmap"><code>importmap</code></a>. There can only be one import map in the document, and because it is used to resolve which modules are loaded in both static and dynamic imports, it must be declared before any <code><script></code> elements that import modules. Note that the import map only applies to the document — the specification does not cover how to apply an import map in a worker or worklet context.</p> <p>With this map you can now use the property names above as module specifiers. If there is no trailing forward slash on the module specifier key then the whole module specifier key is matched and substituted. For example, below we match bare module names, and remap a URL to another path.</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>If the module specifier has a trailing forward slash then the value must have one as well, and the key is matched as a "path prefix". This allows remapping of whole classes of 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>It is possible for multiple keys in an import map to be valid matches for a module specifier. For example, a module specifier of <code>shapes/circle/</code> could match the module specifier keys <code>shapes/</code> and <code>shapes/circle/</code>. In this case the browser will select the most specific (longest) matching module specifier key.</p> <p>Import maps allow modules to be imported using bare module names (as in Node.js), and can also simulate importing modules from packages, both with and without file extensions. While not shown above, they also allow particular versions of a library to be imported, based on the path of the script that is importing the module. Generally they let developers write more ergonomic import code, and make it easier to manage the different versions and dependencies of modules used by a site. This can reduce the effort required to use the same JavaScript libraries in both browser and server.</p> <p>The following sections expand on the various features outlined above.</p></div></section><section aria-labelledby="featureerkennung"><h3 id="featureerkennung"><a href="#featureerkennung">Featureerkennung</a></h3><div class="section-content"><p>Sie können die Unterstützung für Importmaps mit der <a href="/de/docs/Web/API/HTMLScriptElement/supports_static"><code>HTMLScriptElement.supports()</code></a> statischen Methode überprüfen (die selbst breit 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_bare-namen_importieren"><h3 id="module_als_bare-namen_importieren"><a href="#module_als_bare-namen_importieren">Module als Bare-Namen importieren</a></h3><div class="section-content"><p>In einigen JavaScript-Umgebungen, wie Node.js, können Sie Bare-Namen für den Modulspezifizierer verwenden. Dies funktioniert, weil die Umgebung Modulnamen in einen Standardstandort 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 Bare-Namen in einem Browser zu verwenden, benötigen Sie eine Importmap, die dem Browser die Informationen liefert, die zur Auflösung von Modulspezifizierern auf URLs benötigt werden (JavaScript wirft einen <code>TypeError</code>, wenn es versucht, einen Modulspezifizierer zu importieren, der nicht auf einen Modulstandort aufgelöst werden kann).</p> <p>Unten sehen Sie eine Map, die einen <code>square</code> Modulspezifizierer-Schlüssel definiert, der in diesem Fall auf einen relativen Adresswert abbgebildet 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 Map können wir jetzt einen Bare-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="umleitung_von_modulpfaden"><h3 id="umleitung_von_modulpfaden"><a href="#umleitung_von_modulpfaden">Umleitung von Modulpfaden</a></h3><div class="section-content"><p>Module specifier map entries, where both the specifier key and its associated value have a trailing forward slash (<code>/</code>), can be used as a path-prefix. This allows the remapping of a whole set of import URLs from one location to another. It can also be used to emulate working with "packages and modules", such as you might see in the Node ecosystem.</p> <div class="notecard note"> <p> <strong>Hinweis:</strong> The trailing <code>/</code> indicates that the module specifier key can be substituted as <em>part</em> of a module specifier. If this is not present, the browser will only match (and substitute) the whole module specifier key. </p> </div> <h4 id="pakete_von_modulen">Pakete von Modulen</h4> <p>Die folgende JSON-Importmap-Definition ordnet <code>lodash</code> als Bare-Namen und den Module-Spezifizierer-Prefix <code>lodash/</code> dem Pfad <code>/node_modules/lodash-es/</code> zu (gelö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" importieren, indem Sie den Bare-Namen verwenden, als auch Module innerhalb davon (indem Sie die Pfadzuordnung verwenden):</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> oben ohne die <code>.js</code>-Dateierweiterung zu importieren, aber Sie müssten einen Bare-Modul-Spezifizierer-Schlüssel für diese Datei erstellen, wie <code>lodash/fp</code>, anstatt den Pfad zu verwenden. Dies könnte für nur ein Modul sinnvoll sein, skaliert jedoch schlecht, wenn Sie viele Module importieren möchten.</p> <h4 id="allgemeine_url-umleitung">Allgemeine URL-Umleitung</h4> <p>Ein Modulspezifizierer-Schlü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 einer Ressource verwendet, mit Ihren eigenen lokalen Ressourcen umleiten 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="modul-scopes_für_versionsmanagement"><h3 id="modul-scopes_für_versionsmanagement"><a href="#modul-scopes_für_versionsmanagement">Modul-Scopes für Versionsmanagement</a></h3><div class="section-content"><p>Ecosystems like Node use package managers such as npm to manage modules and their dependencies. The package manager ensures that each module is separated from other modules and their dependencies. As a result, while a complex application might include the same module multiple times with several different versions in different parts of the module graph, users do not need to think about this complexity.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> You can also achieve version management using relative paths, but this is subpar because, among other things, this forces a particular structure on your project, and prevents you from using bare module names.</p> </div> <p>Import maps similarly allow you to have multiple versions of dependencies in your application and refer to them using the same module specifier. You implement this with the <code>scopes</code> key, which allows you to provide module specifier maps that will be used depending on the path of the script performing the import. The example below demonstrates this.</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>With this mapping, if a script with an URL that contains <code>/node_modules/dependency/</code> imports <code>cool-module</code>, the version in <code>/node_modules/some/other/location/cool-module/index.js</code> will be used. The map in <code>imports</code> is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if <code>cool-module</code> is imported from a script with a non-matching scope path, then the module specifier map in <code>imports</code> will be used instead, mapping to the version in <code>/node_modules/cool-module/index.js</code>.</p> <p>Note that the path used to select a scope does not affect how the address is resolved. The value in the mapped path does not have to match the scopes path, and relative paths are still resolved to the base URL of the script that contains the import map.</p> <p>Just as for module specifier maps, you can have many scope keys, and these may contain overlapping paths. If multiple scopes match the referrer URL, then the most specific scope path is checked first (the longest scope key) for a matching specifier. The browsers will fall back to the next most specific matching scoped path if there is no matching specifier, and so on. If there is no matching specifier in any of the matching scopes, the browser checks for a match in the module specifier map in the <code>imports</code> key.</p></div></section><section aria-labelledby="caching_verbessern_durch_umleitung_von_gecachten_dateinamen"><h3 id="caching_verbessern_durch_umleitung_von_gecachten_dateinamen"><a href="#caching_verbessern_durch_umleitung_von_gecachten_dateinamen">Caching verbessern durch Umleitung von gecachten Dateinamen</a></h3><div class="section-content"><p>Skriptdateien, die von Websites verwendet werden, haben oft gecachte Dateinamen, um das Caching zu vereinfachen. Der Nachteil dieses Ansatzes ist, dass, wenn sich ein Modul ändert, jeder Modul, der es mit seinem gecachten Dateinamen importiert, ebenfalls aktualisiert/neugeneriert werden muss. Dies führt möglicherweise zu einer Kaskade von Updates, die die Netzwerkressourcen verschwendet.</p> <p>Importmaps bieten eine bequeme Lösung für dieses Problem. Anstatt sich auf spezifische gecachte Dateinamen zu verlassen, hängen Anwendungen und Skripte stattdessen von einer ungecachten Version des Modulnamens (Adresse) ab. Eine Importmap wie die folgende bietet dann eine Zuordnung zur tatsächlichen Skriptdatei.</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 auch sein Hash, der im Dateinamen enthalten ist. In diesem Fall müssen wir nur die Importmap aktualisieren, um den geänderten Namen des Moduls widerzuspiegeln. Wir müssen die Quelle von JavaScript-Code, der davon abhängt, nicht aktualisieren, da sich der Spezifizierer in der Importanweisung 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>Ein spannendes Feature, das eine einheitliche Modularchitektur mit sich bringt, ist die Fähigkeit, nicht-JavaScript-Ressourcen als Module zu laden. Beispielsweise können Sie JSON als JavaScript-Objekt oder CSS als <a href="/de/docs/Web/API/CSSStyleSheet"><code>CSSStyleSheet</code></a>-Objekt importieren.</p> <p>Sie müssen ausdrücklich angeben, welche Art von Ressource Sie importieren. Standardmäßig nimmt der Browser an, dass die Ressource JavaScript ist, und löst einen Fehler aus, wenn die aufgelöste Ressource etwas anderes ist. Um JSON, CSS oder andere Arten von Ressourcen zu importieren, verwenden Sie die Syntax <a href="/de/docs/Web/JavaScript/Reference/Statements/import/with">import attributes</a>:</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 validieren auch den Modultyp und schlagen fehl, wenn z.B. <code>./data.json</code> nicht auf eine JSON-Datei aufgelöst wird. Dies stellt sicher, dass Sie nicht versehentlich Code ausführen, wenn Sie nur Daten importieren möchten. Sobald der Import erfolgreich ist, können Sie den importierten Wert als normales JavaScript-Objekt oder <code>CSSStyleSheet</code>-Objekt nutzen.</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>Nun müssen wir das <code>main.js</code>-Modul auf unsere HTML-Seite anwenden. Dies ähnelt sehr der Art und Weise, wie wir ein reguläres Skript auf eine Seite anwenden, mit einigen bemerkenswerten Unterschieden.</p> <p>Zunächst müssen Sie <code>type="module"</code> im <a href="/de/docs/Web/HTML/Element/script"><code><script></code></a>-Element einfügen, 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 Skript des Moduls auch direkt in die HTML-Datei einbetten, indem Sie den JavaScript-Code innerhalb des <code><script></code>-Elements platzieren:</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 innerhalb von Modulen verwenden, nicht in regulären Skripten. Es wird ein Fehler ausgelöst, wenn Ihr <code><script></code>-Element nicht das Attribut <code>type="module"</code> 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. Module, die inline in HTML deklariert werden, können nur andere Module importieren, aber alles, was sie exportieren, ist für andere Module nicht zugänglich (da 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 lokales Testen 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 von Sicherheitsanforderungen für JavaScript-Module. Sie müssen Ihr Testen über einen Server durchführen.</li> <li>Beachten Sie auch, dass Sie möglicherweise unterschiedliches Verhalten von Skriptabschnitten beobachten, die innerhalb von Modulen definiert sind, im Gegensatz zu klassischen Skripten. Dies liegt daran, dass Module automatisch den <a href="/de/docs/Web/JavaScript/Reference/Strict_mode">Strict-Modus</a> verwenden.</li> <li>Es ist nicht erforderlich, das <code>defer</code>-Attribut (siehe <a href="/de/docs/Web/HTML/Element/script#attributes"><code><script></code>-Attribute</a>) beim Laden eines Modulscripts zu verwenden; Module werden automatisch verzögert.</li> <li>Module werden nur einmal ausgeführt, selbst wenn sie in mehreren <code><script></code>-Tags referenziert wurden.</li> <li>Zu guter Letzt machen wir das klar - Modulfunktionen werden in den Gültigkeitsbereich eines einzelnen Skripts importiert - sie sind nicht im globalen Bereich verfügbar. Daher werden Sie nur auf importierte Funktionen in dem Skript zugreifen können, in das sie importiert wurden, und Sie werden nicht in der Lage sein, von der JavaScript-Konsole aus darauf zuzugreifen. Sie erhalten immer noch Syntaxfehler in den Entwicklertools angezeigt, aber Sie können einige der Debugging-Techniken, die Sie erwartet haben zu verwenden, nicht verwenden.</li> </ul> <p>Modul-definierte Variablen sind auf das Modul beschränkt, es sei denn, sie sind explizit an das globale Objekt angehängt. Andererseits sind global-definierte Variablen innerhalb des Moduls verfügbar. Zum Beispiel, bei folgendem 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>würde die Seite immer noch <code>Hello</code> rendern, 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 unbedingt 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="standardexports_versus_benannte_exporte"><h2 id="standardexports_versus_benannte_exporte"><a href="#standardexports_versus_benannte_exporte">Standardexports versus benannte Exporte</a></h2><div class="section-content"><p>Die Funktionalität, die wir bislang exportiert haben, besteht aus <strong>benannten Exporten</strong> — jedes Element (sei es eine Funktion, <code>const</code> usw.) wurde beim Export mit seinem Namen bezeichnet, und dieser Name wurde auch beim Import verwendet.</p> <p>Es gibt auch eine Art von Export, die als <strong>Standardexport</strong> bezeichnet wird — dies soll es einfach machen, eine Standardfunktion von einem Modul bereitzustellen, und hilft auch, dass JavaScript-Module mit bestehenden CommonJS- und AMD-Modulsystemen interoperieren (wie 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 gut erklärt; suchen Sie nach "Default exports").</p> <p>Sehen wir uns ein Beispiel an, während wir erklären, wie es funktioniert. In unserem <code>basic-modules</code> <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 unser 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> an die Funktion voranstellen und sie 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>Beachten Sie auch hier das Fehlen von geschweiften Klammern. Dies liegt daran, dass pro Modul nur ein Standardexport erlaubt ist, und wir wissen, dass <code>randomSquare</code> es ist. Die obige Zeile ist im Grunde eine Abkürzung 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 <code>as</code>-Syntax für das Umbenennen exportierter Elemente wird unten im Abschnitt <a href="#importe_und_exporte_umbenennen">Importe und Exporte umbenennen</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 Kanvas-Form-Zeichenmodule gut zu funktionieren. Aber was passiert, wenn wir versuchen, ein Modul hinzuzufügen, das das Zeichnen einer anderen Form wie eines Kreises oder Dreiecks behandelt? Diese Formen hätten wahrscheinlich auch zugehörige Funktionen wie <code>draw()</code>, <code>reportArea()</code> usw.; Wenn wir versuchten, verschiedene Funktionen mit demselben Namen in dasselbe Top-Level-Modul zu importieren, würden wir auf Konflikte und Fehler stoßen.</p> <p>Glücklicherweise gibt es eine Reihe von Möglichkeiten, dies zu umgehen. Wir werden dies in den folgenden Abschnitten betrachten.</p></div></section><section aria-labelledby="importe_und_exporte_umbenennen"><h2 id="importe_und_exporte_umbenennen"><a href="#importe_und_exporte_umbenennen">Importe und Exporte umbenennen</a></h2><div class="section-content"><p>In den geschweiften Klammern Ihrer <code>import</code>- und <code>export</code>-Anweisung können Sie das Schlüsselwort <code>as</code> zusammen mit einem neuen Funktionalnamen verwenden, um den Identifikationsnamen zu ändern, den Sie für ein Feature innerhalb des Top-Level-Moduls verwenden.</p> <p>So würden zum Beispiel beide der folgenden im Wesentlichen dasselbe tun, wenn auch auf etwas andere 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>Sehen 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 <code>circle.js</code>- und <code>triangle.js</code>-Module hinzugefügt haben, um Kreise und Dreiecke zu zeichnen und darüber zu berichten.</p> <p>In jedem dieser Module haben wir Funktionen mit denselben Namen, die exportiert werden, und daher hat jedes am Ende dieselbe <code>export</code>-Anweisung:</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 Importieren dieser in <code>main.js</code>, wenn wir versuchen, 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) auslösen.</p> <p>Stattdessen müssen wir die Importe so umbenennen, dass sie einzigartig 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 selbst lösen 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. Welchen Stil Sie verwenden, bleibt Ihnen überlassen; es ist jedoch sinnvoller, Ihren Modulcode unverändert zu lassen und die Änderungen in den Importen vorzunehmen. Dies macht besonders Sinn, wenn Sie von Drittanbieter-Modulen importieren, über die Sie keine Kontrolle haben.</p></div></section><section aria-labelledby="erstellen_eines_modul-objekts"><h2 id="erstellen_eines_modul-objekts"><a href="#erstellen_eines_modul-objekts">Erstellen eines Modul-Objekts</a></h2><div class="section-content"><p>Die oben beschriebene Methode funktioniert gut, ist jedoch ein wenig unübersichtlich und umständlich. Eine noch bessere Lösung ist es, die Funktionen jedes Moduls innerhalb eines Modul-Objekts zu importieren. Die folgende Syntaxform tut dies:</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 im <code>module.js</code> verfügbaren Exporte und macht sie als Mitglieder eines Objekts <code>Module</code> verfügbar, was ihm effektiv seinen eigenen Namensraum 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>Module.function1(); Module.function2(); </code></pre></div> <p>Sehen wir uns erneut ein echtes Beispiel an. Wenn Sie in unser <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, jedoch umgeschrieben, um diesen neuen Code aus dieser 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 Importen 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 unter dem angegebenen Objektnamen zugreifen, beispielsweise:</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 jetzt den Code genauso schreiben wie zuvor (solange Sie die Objektnamen bei Bedarf einfügen), und die Importe sind viel sauberer.</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 Möglichkeit, Konflikte in Ihrem Code zu vermeiden, und ist besonders nützlich, wenn Sie Ihren Modulcode bereits im objektorientierten Stil geschrieben haben.</p> <p>Sie können ein Beispiel unseres Zeichnermoduls für Formate mit ES-Klassen 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 <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>-Datei nun alle ihre Funktionen 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>welche 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>Über 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 so:</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 verwenden dann 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="aggregation_von_modulen"><h2 id="aggregation_von_modulen"><a href="#aggregation_von_modulen">Aggregation von Modulen</a></h2><div class="section-content"><p>Es wird Zeiten geben, in denen Sie Module zusammenfassen möchten. Sie haben vielleicht mehrere Ebenen von Abhängigkeiten, bei denen Sie die Dinge vereinfachen möchten, indem Sie mehrere Submodule in ein übergeordnetes Modul kombinieren. Dies ist möglich, indem Sie Export-Syntax der folgenden Formen im übergeordneten Modul verwenden:</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>Für ein Beispiel siehe unser <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 früheren Klassenbeispiel) haben wir ein zusätzliches Modul namens <code>shapes.js</code>, das alle Funktionen aus <code>circle.js</code>, <code>square.js</code> und <code>triangle.js</code> zusammenfasst. Wir haben auch unsere Submodule in ein Unterverzeichnis im <code>modules</code>-Verzeichnis namens <code>shapes</code> verschoben. Also ist die Modulstruktur in diesem Beispiel:</p> <pre class="brush: plain notranslate">modules/ canvas.js shapes.js shapes/ circle.js square.js triangle.js </pre> <p>In jedem der Submodule ist der Export von derselben 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 kommt 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> fügen 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 von den einzelnen Submodulen und machen sie effektiv über das <code>shapes.js</code>-Modul verfügbar.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Die in <code>shapes.js</code> referenzierten Exporte werden im Grunde genommen durch die Datei umgeleitet und existieren dort nicht wirklich, sodass Sie keinen nützlichen verwandten Code innerhalb derselben Datei schreiben können.</p> </div> <p>Also können wir jetzt in der <code>main.js</code>-Datei 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>mit der folgenden einzigen 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="dynamische_modulladung"><h2 id="dynamische_modulladung"><a href="#dynamische_modulladung">Dynamische Modulladung</a></h2><div class="section-content"><p>Eine kürzliche Ergänzung zur JavaScript-Modul-Funktionalität ist das dynamische Laden von Modulen. Dadurch können Sie Module dynamisch laden, nur wenn sie benötigt werden, anstatt alles im Voraus laden zu müssen. Dies hat einige offensichtliche Leistungs Vorteile; lassen Sie uns weiterlesen und sehen, wie es funktioniert.</p> <p>Diese neue Funktionalität erlaubt es Ihnen, <a href="/de/docs/Web/JavaScript/Reference/Operators/import"><code>import()</code></a> als Funktion aufzurufen und den Pfad zum Modul als Parameter zu übergeben. Es gibt ein <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Promise"><code>Promise</code></a> zurück, das sich mit einem Modulobjekt erfüllt (siehe <a href="#erstellen_eines_modul-objekts">Ein Modulobjekt erstellen</a>), das Ihnen Zugriff auf die Exporte 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> Dynamic import is permitted in the browser main thread, and in shared and dedicated workers. However <code>import()</code> will throw if called in a service worker or worklet. </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 basierend auf unserem Klassenbeispiel. Diesmal zeichnen wir jedoch nichts auf dem Canvas, wenn das Beispiel geladen wird. Stattdessen fügen wir drei Buttons hinzu - "Circle", "Square" und "Triangle" -, die beim Drücken 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 Modulausgaben bleiben unverändert wie zuvor.</p> <p>In <code>main.js</code> haben wir einen Verweis auf jeden Button mit einem <a href="/de/docs/Web/API/Document/querySelector"><code>document.querySelector()</code></a>-Aufruf erfasst, beispielsweise:</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>Wir fügen dann jedem Button einen Ereignislistener hinzu, sodass beim Drücken das entsprechende 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, da die Erfüllung des Versprechens ein Modulobjekt zurückgibt, die Klasse dann als Subfeature des Objekts gemacht wird, weshalb wir jetzt den Konstruktor mit <code>Module.</code> davor verwenden müssen, z.B. <code>Module.Square( /* … */ )</code>.</p> <p>Ein weiterer Vorteil von dynamischen Importen ist, dass sie immer verfügbar sind, selbst in Skriptumgebungen. Wenn Sie also bereits ein bestehendes <code><script></code>-Tag in Ihrem HTML haben, das nicht <code>type="module"</code> hat, können Sie trotzdem Code, der als Module verteilt wird, 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 ein Feature, das innerhalb von Modulen verfügbar ist. Dies bedeutet, dass das <code>await</code>-Schlüsselwort verwendet werden kann. Es erlaubt Modulen, wie große <a href="/de/docs/Learn/JavaScript/Asynchronous/Introducing">asynchrone Funktionen</a> zu wirken, was bedeutet, dass Code vor der Verwendung in übergeordneten Modulen ausgewertet werde kann, jedoch ohne dass Geschwistermodule daran gehindert werden, geladen zu werden.</p> <p>Lassen Sie uns ein Beispiel betrachten. Sie können alle Dateien und den Code, der in diesem Abschnitt beschrieben wird, 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 finden, das auf den vorherigen Beispielen aufbaut.</p> <p>Zuerst deklarieren wir unsere Farbpalette in einer separaten Datei <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>:</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> 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 hier die letzte Exportzeile.</p> <p>Wir verwenden das Schlüsselwort <code>await</code>, bevor wir die Konstante <code>colors</code> angeben, um zu exportieren. Das bedeutet, dass alle anderen Module, die dieses Modul enthalten, warten, bis <code>colors</code> heruntergeladen und analysiert wurde, bevor es verwendet wird.</p> <p>Lassen Sie uns dieses Modul in unsere <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 einbeziehen:</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> anstelle 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>Das 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 nicht die Möglichkeit blockieren, andere Module zu laden. Zum Beispiel 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 geladen, während <code>colors</code> gefethcht wird.</p></div></section><section aria-labelledby="importdeklarationen_sind_gehoben"><h2 id="importdeklarationen_sind_gehoben"><a href="#importdeklarationen_sind_gehoben">Importdeklarationen sind gehoben</a></h2><div class="section-content"><p>Importdeklarationen sind <a href="/de/docs/Glossary/Hoisting">gehoben</a>. In diesem Fall bedeutet es, dass die importierten Werte im Code des Moduls auch vor der Stelle verfügbar sind, die sie deklariert, und dass die Seiteneffekte des importierten Moduls erzeugt werden, bevor der Rest des Codes des Moduls ausgeführt wird.</p> <p>Zum Beispiel würde in <code>main.js</code> der Import von <code>Canvas</code> in der Mitte des Codes immer noch 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 allgemein als gute Praxis angesehen, alle Ihre Importe an den Anfang des Codes zu stellen, 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://en.wikipedia.org/wiki/Directed_graph" class="external" target="_blank">gerichteten Graphen</a>, der als "Abhängigkeitsgraph" bezeichnet wird. In einer idealen Welt ist dieser Graph <a href="https://en.wikipedia.org/wiki/Directed_acyclic_graph" class="external" target="_blank">azyklisch</a>. In diesem Fall kann der Graph mit einer Tiefensuche-Traversierung ausgewertet werden.</p> <p>Zyklen sind jedoch oft unvermeidlich. Ein zyklischer Import tritt auf, wenn Modul <code>a</code> das Modul <code>b</code> importiert, aber <code>b</code> direkt oder indirekt von <code>a</code> abhängt. Ein 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 Variablen wird nur abgerufen, wenn die Variable tatsächlich verwendet wird (daher werden <a href="/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter">Live-Bindungen</a> ermöglicht), und nur wenn die Variable zu diesem Zeitpunkt nicht initialisiert wurde, wird ein <a href="/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init"><code>ReferenceError</code></a> ausgelöst.</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, wenn das Modul ausgewertet wird, weder <code>b</code> noch <code>a</code> tatsächlich gelesen, sodass der Rest des Codes normal ausgeführt wird, und die beiden <code>export</code>-Deklarationen produzieren die Werte von <code>a</code> und <code>b</code>. Dann, nach dem Timeout, sind sowohl <code>a</code> als auch <code>b</code> verfügbar, sodass die beiden <code>console.log</code>-Anweisungen ebenfalls normal 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>Der Grund dafür ist, dass wenn JavaScript <code>a.js</code> auswertet, es 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>Wenn Sie andererseits den Code so ändern, dass <code>b</code> synchron, aber <code>a</code> asynchron verwendet wird, gelingt die Modulauswertung:</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>Der Grund dafür ist, 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 in der Regel zyklische Importe in Ihrem Projekt vermeiden, da sie Ihren Code fehleranfälliger machen. Einige gängige Methoden zur Eliminierung von Zyklen sind:</p> <ul> <li>Kombinieren Sie die beiden Module zu einem.</li> <li>Verschieben Sie den gemeinsam genutzten Code in ein drittes Modul.</li> <li>Verschieben Sie einen Teil des Codes von einem Modul in das andere.</li> </ul> <p>Zyklische Importe können jedoch auch auftreten, wenn Bibliotheken voneinander abhängig sind, was schwieriger zu beheben ist.</p></div></section><section aria-labelledby="autorisierung_von_„isomorphen“_modulen"><h2 id="autorisierung_von_„isomorphen“_modulen"><a href="#autorisierung_von_„isomorphen“_modulen">Autorisierung von „isomorphen“ Modulen</a></h2><div class="section-content"><p>Die Einführung von Modulen ermutigt das JavaScript-Ökosystem, Code in modularer Weise zu verteilen und wiederzuverwenden. Das bedeutet jedoch nicht unbedingt, dass ein Stück JavaScript-Code in jeder Umgebung ausgeführt werden kann. Angenommen, Sie entdecken ein Modul, das SHA-Hashes des Passworts eines Benutzers generiert. Können Sie es im Browserfrontend verwenden? Können Sie es auf Ihrem Node.js-Server verwenden? Die Antwort lautet: es kommt darauf an.</p> <p>Module haben immer noch Zugriff auf globale Variablen, wie zuvor demonstriert. Wenn das Modul Verweise auf globale Variablen wie <code>window</code> enthält, kann es im Browser laufen, aber auf Ihrem Node.js-Server einen Fehler verursachen, da <code>window</code> dort nicht verfügbar ist. Darüber hinaus, wenn der Code Zugriff auf <code>process</code> erfordert, um funktionsfähig zu sein, kann er nur in Node.js verwendet werden.</p> <p>Um die Wiederverwendbarkeit eines Moduls zu maximieren, wird oft empfohlen, den Code "isomorph" zu gestalten — das heißt, er weist in jeder Laufzeitumgebung dasselbe Verhalten auf. Dies wird üblicherweise auf drei Arten erreicht:</p> <ul> <li> <p>Trennen Sie Ihre Module in „Kern“ und „Bindung“. Im Kern konzentrieren Sie sich auf die pure JavaScript-Logik wie das Berechnen des Hashs, ohne Zugriff auf DOM, Netzwerk, Dateisystem und stellen Sie Dienstprogrammfunktionen bereit. Beim Teil "Bindungen" können Sie aus dem globalen Kontext lesen und schreiben. Zum Beispiel, die Browser-Bindungen könnten wählen, den Wert aus einem Eingabefeld zu lesen, während die Node-Bindungen ihn aus <code>process.env</code> lesen könnten, aber Werte von beiden stellen weiterhin dieselbe Kernfunktion bereit und werden auf dieselbe Weise behandelt. Der Kern kann in jeder Umgebung importiert und auf dieselbe Weise verwendet werden, während nur die Bindung, die normalerweise leichtgewichtig ist, plattformabhängig sein muss.</p> </li> <li> <p>Überprüfen Sie, ob eine bestimmte globale Variable existiert, bevor Sie sie verwenden. Zum Beispiel, wenn Sie testen, ob <code>typeof window === "undefined"</code>, wissen Sie, dass Sie sich wahrscheinlich in einer Node.js-Umgebung befinden und nicht auf das DOM 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 im Endeffekt dasselbe Verhalten aufweisen (isomorph). Wenn es unmöglich ist, dieselbe Funktionalität zu bieten, oder wenn dies das Laden erheblicher Mengen von Code erfordert, während ein großer Teil ungenutzt bleibt, sollten besser unterschiedliche Bindungen verwendet werden.</p> </li> <li> <p>Verwenden Sie ein Polyfill, um eine Ausweichmöglichkeit für fehlende Funktionen bereitzustellen. Beispielsweise, wenn Sie die <a href="/de/docs/Web/API/Fetch_API"><code>fetch</code></a>-Funktion verwenden möchten, die erst seit Node.js v18 unterstützt wird, können Sie eine ähnliche API wie die von <a href="https://www.npmjs.com/package/node-fetch" class="external" target="_blank"><code>node-fetch</code></a> bereitgestellte verwenden. Sie können dies dynamisch durch 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>Die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis"><code>globalThis</code></a>-Variable 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. Dennoch, mit dem Trend der Code-Wiederverwendbarkeit und Modularisierung, werden Sie ermutigt, Ihren Code plattformübergreifend zu gestalten, damit er von so vielen Menschen wie möglich genutzt werden kann. Laufzeiten wie Node.js implementieren auch aktiv Web-APIs wo möglich, 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önnen, wenn Sie Schwierigkeiten haben, Ihre Module zum Laufen zu bringen. Fühlen Sie sich frei, die Liste zu ergänzen, wenn Sie mehr entdecken!</p> <ul> <li>Wir haben dies bereits erwähnt, aber um es zu wiederholen: <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> wird empfohlen) geladen werden, andernfalls erhalten Sie einen strikten MIME-Typ-Überprüfungsfehler wie "The server responded with a non-JavaScript MIME type".</li> <li>Wenn Sie versuchen, die HTML-Datei lokal zu laden (d.h. mit einer <code>file://</code>-URL), stoßen Sie auf CORS-Fehler aufgrund von Sicherheitsanforderungen für JavaScript-Module. Sie müssen Ihr Testen über einen Server durchführen. GitHub Pages ist ideal, da es auch <code>.mjs</code>-Dateien mit dem korrekten MIME-Typ bereitstellt.</li> <li>Da <code>.mjs</code> eine nicht standardmäßige Dateierweiterung ist, erkennen einige Betriebssysteme sie möglicherweise nicht oder versuchen, sie durch etwas anderes zu ersetzen. Zum Beispiel haben wir festgestellt, dass macOS stillschweigend <code>.js</code> ans Ende von <code>.mjs</code>-Dateien anfügte und dann die Dateierweiterung automatisch versteckte. Alle unsere Dateien waren daher tatsächlich <code>x.mjs.js</code>. Sobald wir das automatische Verstecken von Dateierweiterungen deaktivierten und es trainierten, <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 modules</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 modules: A cartoon deep-dive</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: Modules</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%2Fnull%0A*+Document+last+modified%3A+*date+not+known*%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://mozilla.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 width="112" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mozilla-footer-logo-svg">Mozilla logo</title><path d="M41.753 14.218c-2.048 0-3.324 1.522-3.324 4.157 0 2.423 1.119 4.286 3.29 4.286 2.082 0 3.447-1.678 3.447-4.347 0-2.826-1.522-4.096-3.413-4.096Zm54.89 7.044c0 .901.437 1.618 1.645 1.618 1.427 0 2.949-1.024 3.044-3.352-.649-.095-1.365-.185-2.02-.185-1.426-.005-2.668.397-2.668 1.92Z" fill="currentColor"></path><path d="M0 0v32h111.908V0H0Zm32.56 25.426h-5.87v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h1.864v3.044h-5.864v-7.884c0-2.423-.806-3.352-2.39-3.352-1.924 0-2.702 1.365-2.702 3.324v4.868h2.669v3.044H6.642v-3.044h1.863v-7.918H6.642V11.42h5.864v2.11c.839-1.489 2.3-2.39 4.252-2.39 2.02 0 3.878.963 4.566 3.01.778-1.862 2.361-3.01 4.566-3.01 2.512 0 4.812 1.522 4.812 4.84v6.402h1.863v3.044h-.005Zm9.036.307c-4.314 0-7.296-2.635-7.296-7.106 0-4.096 2.484-7.481 7.514-7.481s7.481 3.38 7.481 7.29c0 4.472-3.228 7.297-7.699 7.297Zm22.578-.307H51.942l-.403-2.11 7.7-8.846h-4.376l-.621 2.17-2.888-.313.498-4.907h12.294l.313 2.11-7.767 8.852h4.533l.654-2.172 3.167.308-.872 4.908Zm7.99 0h-4.191v-5.03h4.19v5.03Zm0-8.976h-4.191v-5.03h4.19v5.03Zm2.618 8.976 6.054-21.358h3.945l-6.054 21.358h-3.945Zm8.136 0 6.048-21.358h3.945l-6.054 21.358h-3.939Zm21.486.307c-1.863 0-2.887-1.085-3.072-2.792-.805 1.427-2.232 2.792-4.498 2.792-2.02 0-4.314-1.085-4.314-4.006 0-3.447 3.323-4.253 6.518-4.253.778 0 1.584.034 2.3.124v-.465c0-1.427-.034-3.133-2.3-3.133-.84 0-1.488.061-2.143.402l-.453 1.578-3.195-.34.549-3.224c2.45-.996 3.692-1.27 5.992-1.27 3.01 0 5.556 1.55 5.556 4.75v6.083c0 .805.314 1.085.963 1.085.184 0 .375-.034.587-.095l.034 2.11a5.432 5.432 0 0 1-2.524.654Z" fill="currentColor"></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–2024 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":{"isMarkdown":true,"isTranslated":true,"isActive":true,"flaws":{},"title":"JavaScript-Module","mdn_url":"/de/docs/Web/JavaScript/Guide/Modules","locale":"de","native":"Deutsch","sidebarHTML":"\n <ol>\n <li class=\"section\"><a href=\"/de/docs/Web/JavaScript\">JavaScript</a></li>\n <li class=\"section\">Tutorials</li>\n <li class=\"toggle\">\n <details>\n <summary>Komplette Anfänger</summary>\n <ol>\n <li><a href=\"/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics\">JavaScript-Grundlagen</a></li>\n <li><a href=\"/de/docs/Learn/JavaScript/First_steps\">Erste Schritte in JavaScript</a></li>\n <li><a href=\"/de/docs/Learn/JavaScript/Building_blocks\">JavaScript-Bausteine</a></li>\n <li><a href=\"/de/docs/Learn/JavaScript/Objects\">Einführung in JavaScript-Objekte</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details open=\"\">\n <summary>JavaScript-Handbuch</summary>\n <ol>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Introduction\">Einführung</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Grammar_and_types\">Grammatik und Typen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling\">Steuerfluss und Fehlerbehandlung</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Loops_and_iteration\">Schleifen und Iteration</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Functions\">Funktionen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Expressions_and_operators\">Ausdrücke und Operatoren</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Numbers_and_dates\">Zahlen und Daten</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Text_formatting\">Textformatierung</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Regular_expressions\">Reguläre Ausdrücke</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Indexed_collections\">Indexierte Sammlungen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Keyed_collections\">Gekennzeichnete Sammlungen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Working_with_objects\">Arbeiten mit Objekten</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Using_classes\">Verwendung von Klassen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Using_promises\">Verwendung von Promises</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Typed_arrays\">Typisierte Arrays in JavaScript</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Iterators_and_generators\">Iteratoren und Generatoren</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\">Metaprogrammierung</a></li>\n <li><em><a href=\"/de/docs/Web/JavaScript/Guide/Modules\" aria-current=\"page\">JavaScript-Module</a></em></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Mittelstufe</summary>\n <ol>\n <li><a href=\"/de/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks\">Client-seitige JavaScript-Frameworks</a></li>\n <li><a href=\"/de/docs/Learn/JavaScript/Client-side_web_APIs\">Client-seitige Web-APIs</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Language_overview\">Sprachübersicht</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Data_structures\">JavaScript-Datenstrukturen</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Equality_comparisons_and_sameness\">Gleichheitsvergleiche und Gleichheit</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties\">Aufzählbarkeit und Eigentum von Eigenschaften</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Closures\">Closures</a></li>\n </ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Fortgeschritten</summary>\n <ol>\n <li><a href=\"/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain\">Vererbung und die Prototypenkette</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Memory_management\">Speicherverwaltung</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Event_loop\">Konkurrenzmodell und Ereignisschleife</a></li>\n </ol>\n </details>\n </li>\n <li class=\"section\"><a href=\"/de/docs/Web/JavaScript/Reference\">Referenzen</a></li>\n <li class=\"toggle\">\n <details>\n <summary>Eingebaute Objekte</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects\">Standard eingebaute Objekte</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\">Date</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 für neue Websites verwenden.\">\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 die Unterstützung in verschiedenen Browsern, bevor Sie es verwenden.\">\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/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 für neue Websites verwenden.\">\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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Ausdrücke und Operatoren</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Operators\">Ausdrücke und Operatoren</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\">Object 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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Anweisungen und Deklarationen</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Statements\">Statements und Deklarationen</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 für neue Websites verwenden.\">\n <span class=\"visually-hidden\">Veraltet</span>\n</abbr></li></ol>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Funktionen</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Functions\">Functions</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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Klassen</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Classes\">Klassen</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\">Public class fields</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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Reguläre Ausdrücke</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Regular_expressions\">Regular expressions</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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Fehler</summary>\n <ol><li><a href=\"/de/docs/Web/JavaScript/Reference/Errors\">JavaScript-Fehlerreferenz</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 startet direkt nach einer numerischen 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: can't set prototype: it would cause a prototype chain cycle</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>\n </details>\n </li>\n <li class=\"toggle\">\n <details>\n <summary>Sonstiges</summary>\n <ol>\n <li><a href=\"/de/docs/Web/JavaScript/JavaScript_technologies_overview\">JavaScript-Technologie (Übersicht)</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Lexical_grammar\">Lexikalische Grammatik</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Iteration_protocols\">Iterationsprotokolle</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Strict_mode\">Strenger Modus</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Template_literals\">Vorlagenliterale</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Trailing_commas\">Abschließende Kommas</a></li>\n <li><a href=\"/de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features\">Veraltete Funktionen</a></li>\n </ol>\n </details>\n </li>\n </ol>\n","sidebarMacro":"JsSidebar","body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\"><span class=\"button-wrap\"> Zurück </span></a></li>\n \n \n</ul>\n<p>Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modul-Syntax zu beginnen.</p>"}},{"type":"prose","value":{"id":"hintergrund_zu_modulen","title":"Hintergrund zu Modulen","isH3":false,"content":"<p>JavaScript-Programme begannen sehr klein - die meiste Nutzung in den frühen Tagen beschränkte sich auf isolierte Scripting-Aufgaben, die etwas Interaktivität auf Ihre Webseiten brachten, wo nötig, sodass große Skripte im Allgemeinen nicht benötigt wurden. Einige Jahre später haben wir nun vollständige Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das in anderen Kontexten verwendet wird (<a href=\"/de/docs/Glossary/Node.js\">Node.js</a> zum Beispiel).</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 hat diese Fähigkeit schon lange, 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 Funktionen für Module nativ, ohne dass eine Transpilation erforderlich ist. Das ist nur eine gute Sache - Browser können das Laden von Modulen optimieren, was effizienter ist, als eine Bibliothek zu verwenden und all die zusätzliche clientseitige Verarbeitung und zusätzliche Rundreisen zu machen. Es macht jedoch Bundler wie webpack nicht obsolet - Bundler leisten immer noch gute Arbeit beim Partitionieren von Code in vernünftig dimensionierte Stücke und können andere Optimierungen wie Minifizierung, Toter Code-Elimination und Tree-Shaking vornehmen.</p>"}},{"type":"prose","value":{"id":"ein_beispiel_einführen","title":"Ein Beispiel einführen","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 zeigen 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 dem Canvas zeichnen (und Informationen darüber berichten).</p>\n<p>Diese sind ziemlich trivial, wurden jedoch absichtlich einfach gehalten, um Module klar zu demonstrieren.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Wenn Sie die Beispiele herunterladen und lokal ausführen möchten, müssen Sie sie über einen lokalen Webserver ausführen.</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 eine Dateistruktur wie folgt:</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> Alle Beispiele in diesem Leitfaden haben im Grunde die gleiche Struktur; das oben Gesagte sollte ziemlich vertraut werden.</p>\n</div>\n<p>Die zwei Module im Verzeichnis modules sind unten beschrieben:</p>\n<ul>\n <li>\n <p><code>canvas.js</code> — enthält Funktionen, die mit der Einrichtung des Canvas verbunden sind:</p>\n <ul>\n <li><code>create()</code> — erstellt ein Canvas mit einer angegebenen <code>width</code> und <code>height</code> in einem Wrapper-<code><div></code> mit einer angegebenen ID, die selbst in einem angegebenen Elternelement angehängt wird. Gibt ein Objekt zurück, das den 2D-Kontext des Canvas und die ID des Wrappers enthält.</li>\n <li><code>createReportList()</code> — erstellt eine ungeordnete Liste, die innerhalb eines angegebenen Wrapperelements angehängt ist und die zum Ausgeben von Berichtsdaten 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 einem angegebenen Canvas mit angegebener 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 Berichts-Liste, basierend auf seiner Länge.</li>\n <li><code>reportPerimeter()</code> — schreibt den Umfang eines Quadrats in eine spezifische Berichts-Liste, basierend auf seiner Länge.</li>\n </ul>\n </li>\n</ul>"}},{"type":"prose","value":{"id":"beiseite_—_.mjs_versus_.js","title":"Beiseite — .mjs versus .js","isH3":true,"content":"<p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href=\"https://v8.dev/features/modules#mjs\" class=\"external\" target=\"_blank\">V8's documentation recommends this</a>, for example. The reasons given are:</p>\n<ul>\n <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li>\n <li>It ensures that your module files are parsed as a module by runtimes such as <a href=\"https://nodejs.org/api/esm.html#esm_enabling\" class=\"external\" target=\"_blank\">Node.js</a>, and build tools such as <a href=\"https://babeljs.io/docs/options#sourcetype\" class=\"external\" target=\"_blank\">Babel</a>.</li>\n</ul>\n<p>However, we decided to keep using <code>.js</code>, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. If you don't, you'll get a strict MIME type checking error along the lines of \"The server responded with a non-JavaScript MIME type\" and the browser won't run your JavaScript. Most servers already set the correct type for <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href=\"https://pages.github.com/\" class=\"external\" target=\"_blank\">GitHub Pages</a> and <a href=\"https://github.com/http-party/http-server#readme\" class=\"external\" target=\"_blank\"><code>http-server</code></a> for Node.js.</p>\n<p>This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct <a href=\"/de/docs/Web/HTTP/Headers/Content-Type\"><code>Content-Type</code></a> for <code>.mjs</code> files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.</p>\n<p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p>\n<p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for \"normal\" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p>\n<p>It is also worth noting that:</p>\n<ul>\n <li>Some tools may never support <code>.mjs</code>.</li>\n <li>The <code><script type=\"module\"></code> attribute is used to denote when a module is being pointed to, as you'll see below.</li>\n</ul>"}},{"type":"prose","value":{"id":"exportieren_von_modulfunktionen","title":"Exportieren von Modulfunktionen","isH3":false,"content":"<p>Das erste, was Sie tun, um Zugriff auf Modulfunktionen zu erhalten, ist, diese zu exportieren. Dies geschieht mit der <a href=\"/de/docs/Web/JavaScript/Reference/Statements/export\"><code>export</code></a>-Anweisung.</p>\n<p>Der einfachste Weg, es zu verwenden, besteht darin, es vor die Elemente zu setzen, die Sie aus dem Modul exportieren möchten, 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 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 sich auf Top-Level-Elemente beziehen: Zum Beispiel können Sie <code>export</code> nicht innerhalb einer Funktion verwenden.</p>\n<p>Eine bequemere Methode, alle Elemente, die Sie exportieren möchten, zu exportieren, ist, eine einzige Exportanweisung am Ende Ihrer Moduldaten zu verwenden, gefolgt von einer kommagetrennten Liste der Funktionen, die Sie exportieren möchten, eingeschlossen 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":"importieren_von_funktionen_in_ihr_skript","title":"Importieren von Funktionen in Ihr Skript","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, ist wie folgt:</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 kommagetrennten Liste der Funktionen, die Sie importieren möchten, eingeschlossen in geschweifte Klammern, gefolgt von dem Schlüsselwort <code>from</code>, gefolgt von dem <em>Modulespezifizierer</em>.</p>\n<p>Der <em>Modulespezifizierer</em> liefert einen String, den die JavaScript-Umgebung in einen Pfad zur Moduldaten auflösen kann. In einem Browser könnte dies ein Pfad relativ zur Website-Wurzel sein, der 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 Standort\" zu bedeuten, gefolgt von dem relativen Pfad zur 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 tragbar machen - das Beispiel funktioniert weiterhin, wenn Sie es an eine andere Stelle in der Website-Hierarchie 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>\n <strong>Hinweis:</strong> In some module systems, you can use a module specifier like <code>modules/square</code> that isn't a relative or absolute path, and that doesn't have a file extension.\n This kind of specifier can be used in a browser environment if you first define an <a href=\"#importieren_von_modulen_mit_importmaps\">import map</a>.\n </p>\n</div>\n<p>Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in <code>main.js</code>, below the import lines:</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> The imported values are read-only views of the features that were exported. Similar to <code>const</code> variables, you cannot re-assign the variable that was imported, but you can still modify properties of object values. The value can only be re-assigned by the module exporting it. See the <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter\"><code>import</code> reference</a> for an example.</p>\n</div>"}},{"type":"prose","value":{"id":"importieren_von_modulen_mit_importmaps","title":"Importieren von Modulen mit Importmaps","isH3":false,"content":"<p>Oben haben wir gesehen, wie ein Browser ein Modul mit einem Modulspezifizierer importieren kann, der entweder eine absolute URL oder eine relative URL ist, die mit der Basis-URL des Dokuments aufgelöst wird:</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\">Importmaps</a> erlauben es Entwicklern stattdessen, fast jeden beliebigen Text im Modulspezifizierer beim Importieren eines Moduls anzugeben; die Map liefert einen entsprechenden Wert, der den Text ersetzt, wenn die Modul-URL aufgelöst wird.</p>\n<p>Zum Beispiel definiert der <code>imports</code>-Schlüssel in der untenstehenden Importmap ein JSON-Objekt „Modulspezifizierer-Map“, bei dem die Eigenschaftsnamen als Modulspezifizierer verwendet werden können, und die entsprechenden Werte werden bei der Auflösung der Modul-URL durch den Browser ersetzt. Die Werte müssen absolute oder relative URLs sein. Relative URLs werden in absolute URL-Adressen mit der <a href=\"/de/docs/Web/HTML/Element/base\">Basis-URL</a> des Dokuments aufgelöst, das die Importmap enthält.</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>The import map is defined using a <a href=\"/de/docs/Web/HTML/Element/script/type/importmap#import_map_json_representation\">JSON object</a> inside a <code><script></code> element with the <code>type</code> attribute set to <a href=\"/de/docs/Web/HTML/Element/script/type/importmap\"><code>importmap</code></a>. There can only be one import map in the document, and because it is used to resolve which modules are loaded in both static and dynamic imports, it must be declared before any <code><script></code> elements that import modules. Note that the import map only applies to the document — the specification does not cover how to apply an import map in a worker or worklet context.\u003c!-- https://github.com/WICG/import-maps/issues/2 --></p>\n<p>With this map you can now use the property names above as module specifiers. If there is no trailing forward slash on the module specifier key then the whole module specifier key is matched and substituted. For example, below we match bare module names, and remap a URL to another path.</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>If the module specifier has a trailing forward slash then the value must have one as well, and the key is matched as a \"path prefix\". This allows remapping of whole classes of 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>It is possible for multiple keys in an import map to be valid matches for a module specifier. For example, a module specifier of <code>shapes/circle/</code> could match the module specifier keys <code>shapes/</code> and <code>shapes/circle/</code>. In this case the browser will select the most specific (longest) matching module specifier key.</p>\n<p>Import maps allow modules to be imported using bare module names (as in Node.js), and can also simulate importing modules from packages, both with and without file extensions. While not shown above, they also allow particular versions of a library to be imported, based on the path of the script that is importing the module. Generally they let developers write more ergonomic import code, and make it easier to manage the different versions and dependencies of modules used by a site. This can reduce the effort required to use the same JavaScript libraries in both browser and server.</p>\n<p>The following sections expand on the various features outlined above.</p>"}},{"type":"prose","value":{"id":"featureerkennung","title":"Featureerkennung","isH3":true,"content":"<p>Sie können die Unterstützung für Importmaps mit der <a href=\"/de/docs/Web/API/HTMLScriptElement/supports_static\"><code>HTMLScriptElement.supports()</code></a> statischen Methode überprüfen (die selbst breit 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_bare-namen_importieren","title":"Module als Bare-Namen importieren","isH3":true,"content":"<p>In einigen JavaScript-Umgebungen, wie Node.js, können Sie Bare-Namen für den Modulspezifizierer verwenden. Dies funktioniert, weil die Umgebung Modulnamen in einen Standardstandort im Dateisystem auflösen kann. Zum 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 Bare-Namen in einem Browser zu verwenden, benötigen Sie eine Importmap, die dem Browser die Informationen liefert, die zur Auflösung von Modulspezifizierern auf URLs benötigt werden (JavaScript wirft einen <code>TypeError</code>, wenn es versucht, einen Modulspezifizierer zu importieren, der nicht auf einen Modulstandort aufgelöst werden kann).</p>\n<p>Unten sehen Sie eine Map, die einen <code>square</code> Modulspezifizierer-Schlüssel definiert, der in diesem Fall auf einen relativen Adresswert abbgebildet 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 Map können wir jetzt einen Bare-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":"umleitung_von_modulpfaden","title":"Umleitung von Modulpfaden","isH3":true,"content":"<p>Module specifier map entries, where both the specifier key and its associated value have a trailing forward slash (<code>/</code>), can be used as a path-prefix. This allows the remapping of a whole set of import URLs from one location to another. It can also be used to emulate working with \"packages and modules\", such as you might see in the Node ecosystem.</p>\n<div class=\"notecard note\">\n <p>\n <strong>Hinweis:</strong> The trailing <code>/</code> indicates that the module specifier key can be substituted as <em>part</em> of a module specifier.\n If this is not present, the browser will only match (and substitute) the whole module specifier key.\n </p>\n</div>\n<h4 id=\"pakete_von_modulen\">Pakete von Modulen</h4>\n<p>Die folgende JSON-Importmap-Definition ordnet <code>lodash</code> als Bare-Namen und den Module-Spezifizierer-Prefix <code>lodash/</code> dem Pfad <code>/node_modules/lodash-es/</code> zu (gelö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\" importieren, indem Sie den Bare-Namen verwenden, als auch Module innerhalb davon (indem Sie die Pfadzuordnung 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 _ from \"lodash\";\nimport fp from \"lodash/fp.js\";\n</code></pre></div>\n<p>Es ist möglich, <code>fp</code> oben ohne die <code>.js</code>-Dateierweiterung zu importieren, aber Sie müssten einen Bare-Modul-Spezifizierer-Schlüssel für diese Datei erstellen, wie <code>lodash/fp</code>, anstatt den Pfad zu verwenden. Dies könnte für nur ein Modul sinnvoll sein, skaliert jedoch schlecht, wenn Sie viele Module importieren möchten.</p>\n<h4 id=\"allgemeine_url-umleitung\">Allgemeine URL-Umleitung</h4>\n<p>Ein Modulspezifizierer-Schlü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 einer Ressource verwendet, mit Ihren eigenen lokalen Ressourcen umleiten 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":"modul-scopes_für_versionsmanagement","title":"Modul-Scopes für Versionsmanagement","isH3":true,"content":"<p>Ecosystems like Node use package managers such as npm to manage modules and their dependencies. The package manager ensures that each module is separated from other modules and their dependencies. As a result, while a complex application might include the same module multiple times with several different versions in different parts of the module graph, users do not need to think about this complexity.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> You can also achieve version management using relative paths, but this is subpar because, among other things, this forces a particular structure on your project, and prevents you from using bare module names.</p>\n</div>\n<p>Import maps similarly allow you to have multiple versions of dependencies in your application and refer to them using the same module specifier. You implement this with the <code>scopes</code> key, which allows you to provide module specifier maps that will be used depending on the path of the script performing the import. The example below demonstrates this.</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>With this mapping, if a script with an URL that contains <code>/node_modules/dependency/</code> imports <code>cool-module</code>, the version in <code>/node_modules/some/other/location/cool-module/index.js</code> will be used. The map in <code>imports</code> is used as a fallback if there is no matching scope in the scoped map, or the matching scopes don't contain a matching specifier. For example, if <code>cool-module</code> is imported from a script with a non-matching scope path, then the module specifier map in <code>imports</code> will be used instead, mapping to the version in <code>/node_modules/cool-module/index.js</code>.</p>\n<p>Note that the path used to select a scope does not affect how the address is resolved. The value in the mapped path does not have to match the scopes path, and relative paths are still resolved to the base URL of the script that contains the import map.</p>\n<p>Just as for module specifier maps, you can have many scope keys, and these may contain overlapping paths. If multiple scopes match the referrer URL, then the most specific scope path is checked first (the longest scope key) for a matching specifier. The browsers will fall back to the next most specific matching scoped path if there is no matching specifier, and so on. If there is no matching specifier in any of the matching scopes, the browser checks for a match in the module specifier map in the <code>imports</code> key.</p>"}},{"type":"prose","value":{"id":"caching_verbessern_durch_umleitung_von_gecachten_dateinamen","title":"Caching verbessern durch Umleitung von gecachten Dateinamen","isH3":true,"content":"<p>Skriptdateien, die von Websites verwendet werden, haben oft gecachte Dateinamen, um das Caching zu vereinfachen. Der Nachteil dieses Ansatzes ist, dass, wenn sich ein Modul ändert, jeder Modul, der es mit seinem gecachten Dateinamen importiert, ebenfalls aktualisiert/neugeneriert werden muss. Dies führt möglicherweise zu einer Kaskade von Updates, die die Netzwerkressourcen verschwendet.</p>\n<p>Importmaps bieten eine bequeme Lösung für dieses Problem. Anstatt sich auf spezifische gecachte Dateinamen zu verlassen, hängen Anwendungen und Skripte stattdessen von einer ungecachten Version des Modulnamens (Adresse) ab. Eine Importmap wie die folgende bietet dann eine Zuordnung zur tatsächlichen Skriptdatei.</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 auch sein Hash, der im Dateinamen enthalten ist. In diesem Fall müssen wir nur die Importmap aktualisieren, um den geänderten Namen des Moduls widerzuspiegeln. Wir müssen die Quelle von JavaScript-Code, der davon abhängt, nicht aktualisieren, da sich der Spezifizierer in der Importanweisung nicht ändert.</p>"}},{"type":"prose","value":{"id":"laden_von_nicht-javascript-ressourcen","title":"Laden von nicht-JavaScript-Ressourcen","isH3":false,"content":"<p>Ein spannendes Feature, das eine einheitliche Modularchitektur mit sich bringt, ist die Fähigkeit, nicht-JavaScript-Ressourcen als Module zu laden. Beispielsweise können Sie JSON als JavaScript-Objekt oder CSS als <a href=\"/de/docs/Web/API/CSSStyleSheet\"><code>CSSStyleSheet</code></a>-Objekt importieren.</p>\n<p>Sie müssen ausdrücklich angeben, welche Art von Ressource Sie importieren. Standardmäßig nimmt der Browser an, dass die Ressource JavaScript ist, und löst einen Fehler aus, wenn die aufgelöste Ressource etwas anderes ist. Um JSON, CSS oder andere Arten von Ressourcen zu importieren, verwenden Sie die Syntax <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import/with\">import attributes</a>:</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 validieren auch den Modultyp und schlagen fehl, wenn z.B. <code>./data.json</code> nicht auf eine JSON-Datei aufgelöst wird. Dies stellt sicher, dass Sie nicht versehentlich Code ausführen, wenn Sie nur Daten importieren möchten. Sobald der Import erfolgreich ist, können Sie den importierten Wert als normales JavaScript-Objekt oder <code>CSSStyleSheet</code>-Objekt nutzen.</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>Nun müssen wir das <code>main.js</code>-Modul auf unsere HTML-Seite anwenden. Dies ähnelt sehr der Art und Weise, wie wir ein reguläres Skript auf eine Seite anwenden, mit einigen bemerkenswerten Unterschieden.</p>\n<p>Zunächst müssen Sie <code>type=\"module\"</code> im <a href=\"/de/docs/Web/HTML/Element/script\"><code><script></code></a>-Element einfügen, 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 Skript des Moduls auch direkt in die HTML-Datei einbetten, indem Sie den JavaScript-Code innerhalb des <code><script></code>-Elements platzieren:</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 innerhalb von Modulen verwenden, nicht in regulären Skripten. Es wird ein Fehler ausgelöst, wenn Ihr <code><script></code>-Element nicht das Attribut <code>type=\"module\"</code> 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. Module, die inline in HTML deklariert werden, können nur andere Module importieren, aber alles, was sie exportieren, ist für andere Module nicht zugänglich (da sie keine URL haben).</p>\n<div class=\"notecard note\">\n <p>\n <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.\n Dies kann die Ladezeit erheblich reduzieren, wenn die Module verwendet werden.\n </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 lokales Testen 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 von Sicherheitsanforderungen für JavaScript-Module. Sie müssen Ihr Testen über einen Server durchführen.</li>\n <li>Beachten Sie auch, dass Sie möglicherweise unterschiedliches Verhalten von Skriptabschnitten beobachten, die innerhalb von Modulen definiert sind, im Gegensatz zu klassischen Skripten. Dies liegt daran, dass Module automatisch den <a href=\"/de/docs/Web/JavaScript/Reference/Strict_mode\">Strict-Modus</a> verwenden.</li>\n <li>Es ist nicht erforderlich, das <code>defer</code>-Attribut (siehe <a href=\"/de/docs/Web/HTML/Element/script#attributes\"><code><script></code>-Attribute</a>) beim Laden eines Modulscripts zu verwenden; Module werden automatisch verzögert.</li>\n <li>Module werden nur einmal ausgeführt, selbst wenn sie in mehreren <code><script></code>-Tags referenziert wurden.</li>\n <li>Zu guter Letzt machen wir das klar - Modulfunktionen werden in den Gültigkeitsbereich eines einzelnen Skripts importiert - sie sind nicht im globalen Bereich verfügbar. Daher werden Sie nur auf importierte Funktionen in dem Skript zugreifen können, in das sie importiert wurden, und Sie werden nicht in der Lage sein, von der JavaScript-Konsole aus darauf zuzugreifen. Sie erhalten immer noch Syntaxfehler in den Entwicklertools angezeigt, aber Sie können einige der Debugging-Techniken, die Sie erwartet haben zu verwenden, nicht verwenden.</li>\n</ul>\n<p>Modul-definierte Variablen sind auf das Modul beschränkt, es sei denn, sie sind explizit an das globale Objekt angehängt. Andererseits sind global-definierte Variablen innerhalb des Moduls verfügbar. Zum Beispiel, bei folgendem 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>würde die Seite immer noch <code>Hello</code> rendern, 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 unbedingt 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":"standardexports_versus_benannte_exporte","title":"Standardexports versus benannte Exporte","isH3":false,"content":"<p>Die Funktionalität, die wir bislang exportiert haben, besteht aus <strong>benannten Exporten</strong> — jedes Element (sei es eine Funktion, <code>const</code> usw.) wurde beim Export mit seinem Namen bezeichnet, und dieser Name wurde auch beim Import verwendet.</p>\n<p>Es gibt auch eine Art von Export, die als <strong>Standardexport</strong> bezeichnet wird — dies soll es einfach machen, eine Standardfunktion von einem Modul bereitzustellen, und hilft auch, dass JavaScript-Module mit bestehenden CommonJS- und AMD-Modulsystemen interoperieren (wie 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 gut erklärt; suchen Sie nach \"Default exports\").</p>\n<p>Sehen wir uns ein Beispiel an, während wir erklären, wie es funktioniert. In unserem <code>basic-modules</code> <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 unser 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> an die Funktion voranstellen und sie 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>Beachten Sie auch hier das Fehlen von geschweiften Klammern. Dies liegt daran, dass pro Modul nur ein Standardexport erlaubt ist, und wir wissen, dass <code>randomSquare</code> es ist. Die obige Zeile ist im Grunde eine Abkürzung 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> Die <code>as</code>-Syntax für das Umbenennen exportierter Elemente wird unten im Abschnitt <a href=\"#importe_und_exporte_umbenennen\">Importe und Exporte umbenennen</a> erklärt.</p>\n</div>"}},{"type":"prose","value":{"id":"vermeidung_von_namenskonflikten","title":"Vermeidung von Namenskonflikten","isH3":false,"content":"<p>Bisher scheinen unsere Kanvas-Form-Zeichenmodule gut zu funktionieren. Aber was passiert, wenn wir versuchen, ein Modul hinzuzufügen, das das Zeichnen einer anderen Form wie eines Kreises oder Dreiecks behandelt? Diese Formen hätten wahrscheinlich auch zugehörige Funktionen wie <code>draw()</code>, <code>reportArea()</code> usw.; Wenn wir versuchten, verschiedene Funktionen mit demselben Namen in dasselbe Top-Level-Modul zu importieren, würden wir auf Konflikte und Fehler stoßen.</p>\n<p>Glücklicherweise gibt es eine Reihe von Möglichkeiten, dies zu umgehen. Wir werden dies in den folgenden Abschnitten betrachten.</p>"}},{"type":"prose","value":{"id":"importe_und_exporte_umbenennen","title":"Importe und Exporte umbenennen","isH3":false,"content":"<p>In den geschweiften Klammern Ihrer <code>import</code>- und <code>export</code>-Anweisung können Sie das Schlüsselwort <code>as</code> zusammen mit einem neuen Funktionalnamen verwenden, um den Identifikationsnamen zu ändern, den Sie für ein Feature innerhalb des Top-Level-Moduls verwenden.</p>\n<p>So würden zum Beispiel beide der folgenden im Wesentlichen dasselbe tun, wenn auch auf etwas andere 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>Sehen 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 <code>circle.js</code>- und <code>triangle.js</code>-Module hinzugefügt haben, um Kreise und Dreiecke zu zeichnen und darüber zu berichten.</p>\n<p>In jedem dieser Module haben wir Funktionen mit denselben Namen, die exportiert werden, und daher hat jedes am Ende dieselbe <code>export</code>-Anweisung:</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 Importieren dieser in <code>main.js</code>, wenn wir versuchen, 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) auslösen.</p>\n<p>Stattdessen müssen wir die Importe so umbenennen, dass sie einzigartig 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 selbst lösen 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. Welchen Stil Sie verwenden, bleibt Ihnen überlassen; es ist jedoch sinnvoller, Ihren Modulcode unverändert zu lassen und die Änderungen in den Importen vorzunehmen. Dies macht besonders Sinn, wenn Sie von Drittanbieter-Modulen importieren, über die Sie keine Kontrolle haben.</p>"}},{"type":"prose","value":{"id":"erstellen_eines_modul-objekts","title":"Erstellen eines Modul-Objekts","isH3":false,"content":"<p>Die oben beschriebene Methode funktioniert gut, ist jedoch ein wenig unübersichtlich und umständlich. Eine noch bessere Lösung ist es, die Funktionen jedes Moduls innerhalb eines Modul-Objekts zu importieren. Die folgende Syntaxform tut dies:</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 im <code>module.js</code> verfügbaren Exporte und macht sie als Mitglieder eines Objekts <code>Module</code> verfügbar, was ihm effektiv seinen eigenen Namensraum 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>Module.function1();\nModule.function2();\n</code></pre></div>\n<p>Sehen wir uns erneut ein echtes Beispiel an. Wenn Sie in unser <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, jedoch umgeschrieben, um diesen neuen Code aus dieser 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 Importen 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 unter dem angegebenen Objektnamen zugreifen, beispielsweise:</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 jetzt den Code genauso schreiben wie zuvor (solange Sie die Objektnamen bei Bedarf einfügen), und die Importe sind viel sauberer.</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 Möglichkeit, Konflikte in Ihrem Code zu vermeiden, und ist besonders nützlich, wenn Sie Ihren Modulcode bereits im objektorientierten Stil geschrieben haben.</p>\n<p>Sie können ein Beispiel unseres Zeichnermoduls für Formate mit ES-Klassen 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 <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>-Datei nun alle ihre Funktionen 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>welche 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>Über 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 so:</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 verwenden dann 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":"aggregation_von_modulen","title":"Aggregation von Modulen","isH3":false,"content":"<p>Es wird Zeiten geben, in denen Sie Module zusammenfassen möchten. Sie haben vielleicht mehrere Ebenen von Abhängigkeiten, bei denen Sie die Dinge vereinfachen möchten, indem Sie mehrere Submodule in ein übergeordnetes Modul kombinieren. Dies ist möglich, indem Sie Export-Syntax der folgenden Formen im übergeordneten Modul verwenden:</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>Für ein Beispiel siehe unser <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 früheren Klassenbeispiel) haben wir ein zusätzliches Modul namens <code>shapes.js</code>, das alle Funktionen aus <code>circle.js</code>, <code>square.js</code> und <code>triangle.js</code> zusammenfasst. Wir haben auch unsere Submodule in ein Unterverzeichnis im <code>modules</code>-Verzeichnis namens <code>shapes</code> verschoben. Also ist die Modulstruktur in diesem Beispiel:</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 Submodule ist der Export von derselben 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 kommt 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> fügen 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 von den einzelnen Submodulen und machen sie effektiv über das <code>shapes.js</code>-Modul verfügbar.</p>\n<div class=\"notecard note\">\n <p><strong>Hinweis:</strong> Die in <code>shapes.js</code> referenzierten Exporte werden im Grunde genommen durch die Datei umgeleitet und existieren dort nicht wirklich, sodass Sie keinen nützlichen verwandten Code innerhalb derselben Datei schreiben können.</p>\n</div>\n<p>Also können wir jetzt in der <code>main.js</code>-Datei 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>mit der folgenden einzigen 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":"dynamische_modulladung","title":"Dynamische Modulladung","isH3":false,"content":"<p>Eine kürzliche Ergänzung zur JavaScript-Modul-Funktionalität ist das dynamische Laden von Modulen. Dadurch können Sie Module dynamisch laden, nur wenn sie benötigt werden, anstatt alles im Voraus laden zu müssen. Dies hat einige offensichtliche Leistungs Vorteile; lassen Sie uns weiterlesen und sehen, wie es funktioniert.</p>\n<p>Diese neue Funktionalität erlaubt es Ihnen, <a href=\"/de/docs/Web/JavaScript/Reference/Operators/import\"><code>import()</code></a> als Funktion aufzurufen und den Pfad zum Modul als Parameter zu übergeben. Es gibt ein <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/Promise\"><code>Promise</code></a> zurück, das sich mit einem Modulobjekt erfüllt (siehe <a href=\"#erstellen_eines_modul-objekts\">Ein Modulobjekt erstellen</a>), das Ihnen Zugriff auf die Exporte 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>\n <strong>Hinweis:</strong> Dynamic import is permitted in the browser main thread, and in shared and dedicated workers.\n However <code>import()</code> will throw if called in a service worker or worklet.\n </p>\n</div>\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 basierend auf unserem Klassenbeispiel. Diesmal zeichnen wir jedoch nichts auf dem Canvas, wenn das Beispiel geladen wird. Stattdessen fügen wir drei Buttons hinzu - \"Circle\", \"Square\" und \"Triangle\" -, die beim Drücken 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 Modulausgaben bleiben unverändert wie zuvor.</p>\n<p>In <code>main.js</code> haben wir einen Verweis auf jeden Button mit einem <a href=\"/de/docs/Web/API/Document/querySelector\"><code>document.querySelector()</code></a>-Aufruf erfasst, beispielsweise:</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>Wir fügen dann jedem Button einen Ereignislistener hinzu, sodass beim Drücken das entsprechende 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, da die Erfüllung des Versprechens ein Modulobjekt zurückgibt, die Klasse dann als Subfeature des Objekts gemacht wird, weshalb wir jetzt den Konstruktor mit <code>Module.</code> davor verwenden müssen, 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. Wenn Sie also bereits ein bestehendes <code><script></code>-Tag in Ihrem HTML haben, das nicht <code>type=\"module\"</code> hat, können Sie trotzdem Code, der als Module verteilt wird, 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 ein Feature, das innerhalb von Modulen verfügbar ist. Dies bedeutet, dass das <code>await</code>-Schlüsselwort verwendet werden kann. Es erlaubt Modulen, wie große <a href=\"/de/docs/Learn/JavaScript/Asynchronous/Introducing\">asynchrone Funktionen</a> zu wirken, was bedeutet, dass Code vor der Verwendung in übergeordneten Modulen ausgewertet werde kann, jedoch ohne dass Geschwistermodule daran gehindert werden, geladen zu werden.</p>\n<p>Lassen Sie uns ein Beispiel betrachten. Sie können alle Dateien und den Code, der in diesem Abschnitt beschrieben wird, 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 finden, das auf den vorherigen Beispielen aufbaut.</p>\n<p>Zuerst deklarieren wir unsere Farbpalette in einer separaten Datei <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>:</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> 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 hier die letzte Exportzeile.</p>\n<p>Wir verwenden das Schlüsselwort <code>await</code>, bevor wir die Konstante <code>colors</code> angeben, um zu exportieren. Das bedeutet, dass alle anderen Module, die dieses Modul enthalten, warten, bis <code>colors</code> heruntergeladen und analysiert wurde, bevor es verwendet wird.</p>\n<p>Lassen Sie uns dieses Modul in unsere <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 einbeziehen:</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> anstelle 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>Das 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 nicht die Möglichkeit blockieren, andere Module zu laden. Zum Beispiel 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 geladen, während <code>colors</code> gefethcht wird.</p>"}},{"type":"prose","value":{"id":"importdeklarationen_sind_gehoben","title":"Importdeklarationen sind gehoben","isH3":false,"content":"<p>Importdeklarationen sind <a href=\"/de/docs/Glossary/Hoisting\">gehoben</a>. In diesem Fall bedeutet es, dass die importierten Werte im Code des Moduls auch vor der Stelle verfügbar sind, die sie deklariert, und dass die Seiteneffekte des importierten Moduls erzeugt werden, bevor der Rest des Codes des Moduls ausgeführt wird.</p>\n<p>Zum Beispiel würde in <code>main.js</code> der Import von <code>Canvas</code> in der Mitte des Codes immer noch 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 allgemein als gute Praxis angesehen, alle Ihre Importe an den Anfang des Codes zu stellen, 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://en.wikipedia.org/wiki/Directed_graph\" class=\"external\" target=\"_blank\">gerichteten Graphen</a>, der als \"Abhängigkeitsgraph\" bezeichnet wird. In einer idealen Welt ist dieser Graph <a href=\"https://en.wikipedia.org/wiki/Directed_acyclic_graph\" class=\"external\" target=\"_blank\">azyklisch</a>. In diesem Fall kann der Graph mit einer Tiefensuche-Traversierung ausgewertet werden.</p>\n<p>Zyklen sind jedoch oft unvermeidlich. Ein zyklischer Import tritt auf, wenn Modul <code>a</code> das Modul <code>b</code> importiert, aber <code>b</code> direkt oder indirekt von <code>a</code> abhängt. Ein 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 Variablen wird nur abgerufen, wenn die Variable tatsächlich verwendet wird (daher werden <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import#imported_values_can_only_be_modified_by_the_exporter\">Live-Bindungen</a> ermöglicht), und nur wenn die Variable zu diesem Zeitpunkt nicht initialisiert wurde, wird ein <a href=\"/de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init\"><code>ReferenceError</code></a> ausgelöst.</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, wenn das Modul ausgewertet wird, weder <code>b</code> noch <code>a</code> tatsächlich gelesen, sodass der Rest des Codes normal ausgeführt wird, und die beiden <code>export</code>-Deklarationen produzieren die Werte von <code>a</code> und <code>b</code>. Dann, nach dem Timeout, sind sowohl <code>a</code> als auch <code>b</code> verfügbar, sodass die beiden <code>console.log</code>-Anweisungen ebenfalls normal 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>Der Grund dafür ist, dass wenn JavaScript <code>a.js</code> auswertet, es 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>Wenn Sie andererseits den Code so ändern, dass <code>b</code> synchron, aber <code>a</code> asynchron verwendet wird, gelingt die Modulauswertung:</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>Der Grund dafür ist, 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 in der Regel zyklische Importe in Ihrem Projekt vermeiden, da sie Ihren Code fehleranfälliger machen. Einige gängige Methoden zur Eliminierung von Zyklen sind:</p>\n<ul>\n <li>Kombinieren Sie die beiden Module zu einem.</li>\n <li>Verschieben Sie den gemeinsam genutzten Code in ein drittes Modul.</li>\n <li>Verschieben Sie einen Teil des Codes von einem Modul in das andere.</li>\n</ul>\n<p>Zyklische Importe können jedoch auch auftreten, wenn Bibliotheken voneinander abhängig sind, was schwieriger zu beheben ist.</p>"}},{"type":"prose","value":{"id":"autorisierung_von_„isomorphen“_modulen","title":"Autorisierung von „isomorphen“ Modulen","isH3":false,"content":"<p>Die Einführung von Modulen ermutigt das JavaScript-Ökosystem, Code in modularer Weise zu verteilen und wiederzuverwenden. Das bedeutet jedoch nicht unbedingt, dass ein Stück JavaScript-Code in jeder Umgebung ausgeführt werden kann. Angenommen, Sie entdecken ein Modul, das SHA-Hashes des Passworts eines Benutzers generiert. Können Sie es im Browserfrontend verwenden? Können Sie es auf Ihrem Node.js-Server verwenden? Die Antwort lautet: es kommt darauf an.</p>\n<p>Module haben immer noch Zugriff auf globale Variablen, wie zuvor demonstriert. Wenn das Modul Verweise auf globale Variablen wie <code>window</code> enthält, kann es im Browser laufen, aber auf Ihrem Node.js-Server einen Fehler verursachen, da <code>window</code> dort nicht verfügbar ist. Darüber hinaus, wenn der Code Zugriff auf <code>process</code> erfordert, um funktionsfähig zu sein, kann er nur in Node.js verwendet werden.</p>\n<p>Um die Wiederverwendbarkeit eines Moduls zu maximieren, wird oft empfohlen, den Code \"isomorph\" zu gestalten — das heißt, er weist in jeder Laufzeitumgebung dasselbe Verhalten auf. Dies wird üblicherweise auf drei Arten erreicht:</p>\n<ul>\n <li>\n <p>Trennen Sie Ihre Module in „Kern“ und „Bindung“. Im Kern konzentrieren Sie sich auf die pure JavaScript-Logik wie das Berechnen des Hashs, ohne Zugriff auf DOM, Netzwerk, Dateisystem und stellen Sie Dienstprogrammfunktionen bereit. Beim Teil \"Bindungen\" können Sie aus dem globalen Kontext lesen und schreiben. Zum Beispiel, die Browser-Bindungen könnten wählen, den Wert aus einem Eingabefeld zu lesen, während die Node-Bindungen ihn aus <code>process.env</code> lesen könnten, aber Werte von beiden stellen weiterhin dieselbe Kernfunktion bereit und werden auf dieselbe Weise behandelt. Der Kern kann in jeder Umgebung importiert und auf dieselbe Weise verwendet werden, während nur die Bindung, die normalerweise leichtgewichtig ist, plattformabhängig sein muss.</p>\n </li>\n <li>\n <p>Überprüfen Sie, ob eine bestimmte globale Variable existiert, bevor Sie sie verwenden. Zum Beispiel, wenn Sie testen, ob <code>typeof window === \"undefined\"</code>, wissen Sie, dass Sie sich wahrscheinlich in einer Node.js-Umgebung befinden und nicht auf das DOM 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 im Endeffekt dasselbe Verhalten aufweisen (isomorph). Wenn es unmöglich ist, dieselbe Funktionalität zu bieten, oder wenn dies das Laden erheblicher Mengen von Code erfordert, während ein großer Teil ungenutzt bleibt, sollten besser unterschiedliche Bindungen verwendet werden.</p>\n </li>\n <li>\n <p>Verwenden Sie ein Polyfill, um eine Ausweichmöglichkeit für fehlende Funktionen bereitzustellen. Beispielsweise, wenn Sie die <a href=\"/de/docs/Web/API/Fetch_API\"><code>fetch</code></a>-Funktion verwenden möchten, die erst seit Node.js v18 unterstützt wird, können Sie eine ähnliche API wie die von <a href=\"https://www.npmjs.com/package/node-fetch\" class=\"external\" target=\"_blank\"><code>node-fetch</code></a> bereitgestellte verwenden. Sie können dies dynamisch durch 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>Die <a href=\"/de/docs/Web/JavaScript/Reference/Global_Objects/globalThis\"><code>globalThis</code></a>-Variable 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. Dennoch, mit dem Trend der Code-Wiederverwendbarkeit und Modularisierung, werden Sie ermutigt, Ihren Code plattformübergreifend zu gestalten, damit er von so vielen Menschen wie möglich genutzt werden kann. Laufzeiten wie Node.js implementieren auch aktiv Web-APIs wo möglich, 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önnen, wenn Sie Schwierigkeiten haben, Ihre Module zum Laufen zu bringen. Fühlen Sie sich frei, die Liste zu ergänzen, wenn Sie mehr entdecken!</p>\n<ul>\n <li>Wir haben dies bereits erwähnt, aber um es zu wiederholen: <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> wird empfohlen) geladen werden, andernfalls erhalten Sie einen strikten MIME-Typ-Überprüfungsfehler wie \"The server responded with a non-JavaScript MIME type\".</li>\n <li>Wenn Sie versuchen, die HTML-Datei lokal zu laden (d.h. mit einer <code>file://</code>-URL), stoßen Sie auf CORS-Fehler aufgrund von Sicherheitsanforderungen für JavaScript-Module. Sie müssen Ihr Testen über einen Server durchführen. GitHub Pages ist ideal, da es auch <code>.mjs</code>-Dateien mit dem korrekten MIME-Typ bereitstellt.</li>\n <li>Da <code>.mjs</code> eine nicht standardmäßige Dateierweiterung ist, erkennen einige Betriebssysteme sie möglicherweise nicht oder versuchen, sie durch etwas anderes zu ersetzen. Zum Beispiel haben wir festgestellt, dass macOS stillschweigend <code>.js</code> ans Ende von <code>.mjs</code>-Dateien anfügte und dann die Dateierweiterung automatisch versteckte. Alle unsere Dateien waren daher tatsächlich <code>x.mjs.js</code>. Sobald wir das automatische Verstecken von Dateierweiterungen deaktivierten und es trainierten, <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 modules</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 modules: A cartoon deep-dive</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: Modules</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><ul class=\"prev-next\">\n <li><a class=\"button secondary\" href=\"/de/docs/Web/JavaScript/Guide/Meta_programming\"><span class=\"button-wrap\"> Zurück </span></a></li>\n \n \n</ul>"}}],"toc":[{"text":"Hintergrund zu Modulen","id":"hintergrund_zu_modulen"},{"text":"Ein Beispiel einführen","id":"ein_beispiel_einführen"},{"text":"Grundlegende Beispielstruktur","id":"grundlegende_beispielstruktur"},{"text":"Exportieren von Modulfunktionen","id":"exportieren_von_modulfunktionen"},{"text":"Importieren von Funktionen in Ihr Skript","id":"importieren_von_funktionen_in_ihr_skript"},{"text":"Importieren von Modulen mit Importmaps","id":"importieren_von_modulen_mit_importmaps"},{"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":"Standardexports versus benannte Exporte","id":"standardexports_versus_benannte_exporte"},{"text":"Vermeidung von Namenskonflikten","id":"vermeidung_von_namenskonflikten"},{"text":"Importe und Exporte umbenennen","id":"importe_und_exporte_umbenennen"},{"text":"Erstellen eines Modul-Objekts","id":"erstellen_eines_modul-objekts"},{"text":"Module und Klassen","id":"module_und_klassen"},{"text":"Aggregation von Modulen","id":"aggregation_von_modulen"},{"text":"Dynamische Modulladung","id":"dynamische_modulladung"},{"text":"Top-Level-Await","id":"top-level-await"},{"text":"Importdeklarationen sind gehoben","id":"importdeklarationen_sind_gehoben"},{"text":"Zyklische Importe","id":"zyklische_importe"},{"text":"Autorisierung von „isomorphen“ Modulen","id":"autorisierung_von_„isomorphen“_modulen"},{"text":"Fehlerbehebung","id":"fehlerbehebung"},{"text":"Siehe auch","id":"siehe_auch"}],"summary":"Dieser Leitfaden bietet Ihnen alles, was Sie benötigen, um mit der JavaScript-Modul-Syntax zu beginnen.","popularity":0,"modified":null,"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":"中文 (简体)"}],"pageType":"unknown","source":{"folder":"de/web/javascript/guide/modules","github_url":"https://github.com/mdn/translated-content/blob/main/files/de/web/javascript/guide/modules/index.md","last_commit_url":"https://github.com/mdn/translated-content/commit/null","filename":"index.md"},"short_title":"JavaScript-Module","parents":[{"uri":"/de/docs/Web","title":"Web-Technologien 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"}],"pageTitle":"JavaScript-Module - JavaScript | MDN","noIndexing":false}}</script></body></html>