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>Einführung in eine vollständige Werkzeugkette - Lernen Sie Webentwicklung | MDN</title><link rel="alternate" title="Introducing a complete toolchain" href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" hrefLang="en"/><link rel="alternate" title="完全なツールチェーンの導入" href="https://developer.mozilla.org/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" hrefLang="ja"/><link rel="alternate" title="介绍完整的工具链" href="https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" hrefLang="zh"/><link rel="alternate" title="Einführung in eine vollständige Werkzeugkette" href="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" hrefLang="de"/><link rel="preload" as="font" type="font/woff2" href="/static/media/Inter.var.c2fe3cb2b7c746f7966a.woff2" crossorigin=""/><link rel="alternate" type="application/rss+xml" title="MDN Blog RSS Feed" href="https://developer.mozilla.org/en-US/blog/rss.xml" hrefLang="en"/><meta name="description" content="In den letzten Artikeln dieser Serie werden wir Ihr Wissen über Werkzeuge festigen, indem wir Sie durch den Prozess des Aufbaus einer Fallstudien-Werkzeugkette führen. Wir beginnen mit dem Einrichten einer vernünftigen Entwicklungsumgebung und der Implementierung von Transformationstools, bis hin zur tatsächlichen Bereitstellung Ihrer App. In diesem Artikel stellen wir die Fallstudie vor, richten unsere Entwicklungsumgebung ein und konfigurieren unsere Code-Transformationstools."/><meta property="og:url" content="https://developer.mozilla.org/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain"/><meta property="og:title" content="Einführung in eine vollständige Werkzeugkette - Lernen Sie Webentwicklung | MDN"/><meta property="og:type" content="website"/><meta property="og:locale" content="de"/><meta property="og:description" content="In den letzten Artikeln dieser Serie werden wir Ihr Wissen über Werkzeuge festigen, indem wir Sie durch den Prozess des Aufbaus einer Fallstudien-Werkzeugkette führen. Wir beginnen mit dem Einrichten einer vernünftigen Entwicklungsumgebung und der Implementierung von Transformationstools, bis hin zur tatsächlichen Bereitstellung Ihrer App. In diesem Artikel stellen wir die Fallstudie vor, richten unsere Entwicklungsumgebung ein und konfigurieren unsere Code-Transformationstools."/><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/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain"/><style media="print">.article-actions-container,.document-toc-container,.language-menu,.main-menu-toggle,.on-github,.page-footer,.place,.sidebar,.top-banner,.top-navigation-main,ul.prev-next{display:none!important}.main-page-content,.main-page-content pre{padding:2px}.main-page-content pre{border-left-width:2px}</style><script src="/static/js/gtag.js" defer=""></script><script defer="" src="/static/js/main.f565372a.js"></script><link href="/static/css/main.3d9e7a02.css" rel="stylesheet"/></head><body><script>if(document.body.addEventListener("load",(t=>{t.target.classList.contains("interactive")&&t.target.setAttribute("data-readystate","complete")}),{capture:!0}),window&&document.documentElement){const t={light:"#ffffff",dark:"#1b1b1b"};try{const e=window.localStorage.getItem("theme");e&&(document.documentElement.className=e,document.documentElement.style.backgroundColor=t[e]);const o=window.localStorage.getItem("nop");o&&(document.documentElement.dataset.nop=o)}catch(t){console.warn("Unable to read theme from localStorage",t)}}</script><div id="root"><ul id="nav-access" class="a11y-nav"><li><a id="skip-main" href="#content">Skip to main content</a></li><li><a id="skip-search" href="#top-nav-search-input">Skip to search</a></li><li><a id="skip-select-language" href="#languages-switcher-button">Skip to select language</a></li></ul><div class="page-wrapper category-learn 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 "><button type="button" id="references-button" class="top-level-entry menu-toggle" aria-controls="references-menu" aria-expanded="false">References</button><a href="/de/docs/Web" class="top-level-entry">References</a><ul id="references-menu" class="submenu references hidden inline-submenu-lg" aria-labelledby="references-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li><li class="html-link-container "><a href="/de/docs/Web/HTML" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Structure of content on the web</p></div></a></li><li class="css-link-container "><a href="/de/docs/Web/CSS" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Code used to describe document style</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Web/JavaScript" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">General-purpose scripting language</p></div></a></li><li class="http-link-container "><a href="/de/docs/Web/HTTP" class="submenu-item "><div class="submenu-icon http"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP</div><p class="submenu-item-description">Protocol for transmitting web resources</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Web/API" class="submenu-item "><div class="submenu-icon apis"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web APIs</div><p class="submenu-item-description">Interfaces for building web applications</p></div></a></li><li class="apis-link-container "><a href="/de/docs/Mozilla/Add-ons/WebExtensions" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Extensions</div><p class="submenu-item-description">Developing extensions for web browsers</p></div></a></li><li class=" "><a href="/de/docs/Web/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Build web projects usable for all</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Web" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Web Technology</div><p class="submenu-item-description">Web technology reference for developers</p></div></a></li></ul></li><li class="top-level-entry-container active"><button type="button" id="learn-button" class="top-level-entry menu-toggle" aria-controls="learn-menu" aria-expanded="false">Learn</button><a href="/de/docs/Learn_web_development" class="top-level-entry">Learn</a><ul id="learn-menu" class="submenu learn hidden inline-submenu-lg" aria-labelledby="learn-button"><li class="apis-link-container mobile-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview / MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="apis-link-container desktop-only "><a href="/de/docs/Learn_web_development" class="submenu-item "><div class="submenu-icon learn"></div><div class="submenu-content-container"><div class="submenu-item-heading">MDN Learning Area</div><p class="submenu-item-description">Learn web development</p></div></a></li><li class="html-link-container "><a href="/de/docs/Learn_web_development/Core/Structuring_content" class="submenu-item "><div class="submenu-icon html"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTML</div><p class="submenu-item-description">Learn to structure web content with HTML</p></div></a></li><li class="css-link-container "><a href="/de/docs/Learn_web_development/Core/Styling_basics" class="submenu-item "><div class="submenu-icon css"></div><div class="submenu-content-container"><div class="submenu-item-heading">CSS</div><p class="submenu-item-description">Learn to style content using CSS</p></div></a></li><li class="javascript-link-container "><a href="/de/docs/Learn_web_development/Core/Scripting" class="submenu-item "><div class="submenu-icon javascript"></div><div class="submenu-content-container"><div class="submenu-item-heading">JavaScript</div><p class="submenu-item-description">Learn to run scripts in the browser</p></div></a></li><li class=" "><a href="/de/docs/Learn_web_development/Core/Accessibility" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Accessibility</div><p class="submenu-item-description">Learn to make the web accessible to all</p></div></a></li></ul></li><li class="top-level-entry-container "><button type="button" id="mdn-plus-button" class="top-level-entry menu-toggle" aria-controls="mdn-plus-menu" aria-expanded="false">Plus</button><a href="/de/plus" class="top-level-entry">Plus</a><ul id="mdn-plus-menu" class="submenu mdn-plus hidden inline-submenu-lg" aria-labelledby="mdn-plus-button"><li class=" "><a href="/de/plus" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Overview</div><p class="submenu-item-description">A customized MDN experience</p></div></a></li><li class=" "><a href="/de/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li><li class=" "><a href="/de/plus/updates" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Updates</div><p class="submenu-item-description">All browser compatibility updates at a glance</p></div></a></li><li class=" "><a href="/en-US/plus/docs/features/overview" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Documentation</div><p class="submenu-item-description">Learn how to use MDN Plus</p></div></a></li><li class=" "><a href="/en-US/plus/docs/faq" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">FAQ</div><p class="submenu-item-description">Frequently asked questions about MDN Plus</p></div></a></li></ul></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/curriculum/">Curriculum <sup class="new">New</sup></a></li><li class="top-level-entry-container "><a class="top-level-entry menu-link" href="/en-US/blog/">Blog</a></li><li class="top-level-entry-container "><button type="button" id="tools-button" class="top-level-entry menu-toggle" aria-controls="tools-menu" aria-expanded="false">Tools</button><ul id="tools-menu" class="submenu tools hidden inline-submenu-lg" aria-labelledby="tools-button"><li class=" "><a href="/de/play" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">Playground</div><p class="submenu-item-description">Write, test and share your code</p></div></a></li><li class=" "><a href="/en-US/observatory" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">HTTP Observatory</div><p class="submenu-item-description">Scan a website for free</p></div></a></li><li class=" "><a href="/en-US/plus/ai-help" class="submenu-item "><div class="submenu-icon"></div><div class="submenu-content-container"><div class="submenu-item-heading">AI Help</div><p class="submenu-item-description">Get real-time assistance and support</p></div></a></li></ul></li></ul></nav><div class="header-search"><form action="/de/search" class="search-form search-widget" id="top-nav-search-form" role="search"><label id="top-nav-search-label" for="top-nav-search-input" class="visually-hidden">Search MDN</label><input aria-activedescendant="" aria-autocomplete="list" aria-controls="top-nav-search-menu" aria-expanded="false" aria-labelledby="top-nav-search-label" autoComplete="off" id="top-nav-search-input" role="combobox" type="search" class="search-input-field" name="q" placeholder=" " required="" value=""/><button type="button" class="button action has-icon clear-search-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear search input</span></span></button><button type="submit" class="button action has-icon search-button"><span class="button-wrap"><span class="icon icon-search "></span><span class="visually-hidden">Search</span></span></button><div id="top-nav-search-menu" role="listbox" aria-labelledby="top-nav-search-label"></div></form></div><div class="theme-switcher-menu"><button type="button" class="button action has-icon theme-switcher-menu small" aria-haspopup="menu"><span class="button-wrap"><span class="icon icon-theme-os-default "></span>Theme</span></button></div><ul class="auth-container"><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain" class="login-link" rel="nofollow">Log in</a></li><li><a href="/users/fxa/login/authenticate/?next=%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain" 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/Learn_web_development" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Lernen Sie Webentwicklung</span></a><meta property="position" content="1"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Erweiterungsmodule</span></a><meta property="position" content="2"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools" class="breadcrumb" property="item" typeof="WebPage"><span property="name">Verständnis von Client-seitigen Web-Entwicklungstools</span></a><meta property="position" content="3"/></li><li property="itemListElement" typeof="ListItem"><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" class="breadcrumb-current-page" property="item" typeof="WebPage"><span property="name">Einführung in eine vollständige Werkzeugkette</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/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" class="button submenu-item"><span>English (US)</span></a></li><li class=" "><a data-locale="ja" href="/ja/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" class="button submenu-item"><span>日本語</span></a></li><li class=" "><a data-locale="zh-CN" href="/zh-CN/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" class="button submenu-item"><span>中文 (简体)</span></a></li></ul></div></div></li></ul></div></div></div></div><div class="container"><div class="notecard experimental localized-content-note"><p><a href="https://github.com/orgs/mdn/discussions/741" class="external"><strong>Experiment</strong>: Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.</a></p></div></div><div class="main-wrapper"><div class="sidebar-container"><aside id="sidebar-quicklinks" class="sidebar"><button type="button" class="button action backdrop" aria-label="Collapse sidebar"><span class="button-wrap"></span></button><nav aria-label="Related Topics" class="sidebar-inner"><header class="sidebar-actions"><section class="sidebar-filter-container"><div class="sidebar-filter "><label id="sidebar-filter-label" class="sidebar-filter-label" for="sidebar-filter-input"><span class="icon icon-filter"></span><span class="visually-hidden">Filter sidebar</span></label><input id="sidebar-filter-input" autoComplete="off" class="sidebar-filter-input-field false" type="text" placeholder="Filter" value=""/><button type="button" class="button action has-icon clear-sidebar-filter-button"><span class="button-wrap"><span class="icon icon-cancel "></span><span class="visually-hidden">Clear filter input</span></span></button></div></section></header><div class="sidebar-inner-nav"><div class="in-nav-toc"><div class="document-toc-container"><section class="document-toc"><header><h2 class="document-toc-heading">In diesem Artikel</h2></header><ul class="document-toc-list"><li class="document-toc-item "><a class="document-toc-link" href="#einführung_in_unsere_fallstudie">Einführung in unsere Fallstudie</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendete_werkzeuge_in_unserer_werkzeugkette">Verwendete Werkzeuge in unserer Werkzeugkette</a></li><li class="document-toc-item "><a class="document-toc-link" href="#werkzeugketten_und_ihre_inhärente_komplexität">Werkzeugketten und ihre inhärente Komplexität</a></li><li class="document-toc-item "><a class="document-toc-link" href="#überprüfung_der_voraussetzungen">Überprüfung der Voraussetzungen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einrichten_einer_entwicklungsumgebung">Einrichten einer Entwicklungsumgebung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#bau-_und_transformationswerkzeuge">Bau- und Transformationswerkzeuge</a></li><li class="document-toc-item "><a class="document-toc-link" href="#schreiben_des_quellcodes">Schreiben des Quellcodes</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ausführen_der_transformation">Ausführen der Transformation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</a></li></ul></section></div></div><div class="sidebar-body"><ol><li class="section"><a href="/de/docs/Learn_web_development/Getting_started">Einstiegsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup">Umgebung einrichten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software">Installation grundlegender Software</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web">Surfen im Web</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors">Code-Editor</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files">Umgang mit Dateien</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website">Ihre erste Website</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like">Wie wird Ihre Website aussehen?</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content">HTML: Erstellen der Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content">CSS: Gestaltung des Inhalts</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity">JavaScript: Interaktivität hinzufügen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Web_standards">Webstandards</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works">How the web works</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model">Das Modell der Webstandards</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites">Wie Browser Websites laden</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills">Soziale Kompetenzen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning">Forschung und Lernen</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork">Zusammenarbeit und Teamarbeit</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes">Workflows und Prozesse</a></li><li><a href="/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class="section"><a href="/de/docs/Learn_web_development/Core">Kernmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Structuring_content">Inhalte mit HTML strukturieren</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax">Grundlegende HTML-Syntax</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs">Überschriften und Absätze in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance">Hervorhebung und Wichtigkeit</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Lists">Listen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents">Strukturierung von Dokumenten</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features">Erweiterte Textfunktionen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Creating_links">Erstellen von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_images">HTML-Bilder</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio">HTML video und audio</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page">Herausforderung: Mozilla Splash-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics">Grundlagen von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility">Barrierefreiheit von HTML-Tabellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms">Formulare und Schaltflächen in HTML</a></li><li><a href="/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML">Debugging von HTML</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Styling_basics">Grundlagen des CSS-Stylings</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS">Was ist CSS?</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Getting_started">Einstieg in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors">Grundlagen der CSS-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors">Attribut-Selektoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements">Pseudoklassen und Pseudoelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Combinators">Kombinatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Box_model">Das Box-Modell</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts">Umgang mit Konflikten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units">CSS-Werte und -Einheiten</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Sizing">Größenbestimmung von Elementen in CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders">Hintergründe und Rahmen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Overflow">Überlaufender Inhalt</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms">Bilder, Medien und Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Tables">Tabellen stylen</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS">Debugging CSS</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href="/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Text_styling">CSS-Textgestaltung</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Fundamentals">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_lists">Listen gestalten</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Styling_links">Gestaltung von Links</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Web_fonts">Webfonts</a></li><li><a href="/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/CSS_layout">CSS-Layout</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Introduction">Einführung in CSS-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Floats">Floats</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Positioning">Platzierung</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Flexbox">Flexbox</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Grids">CSS-Grid-Layout</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design">Responsives Design</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Media_queries">Grundlagen von Media Query</a></li><li><a href="/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Scripting">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript">Was ist JavaScript?</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/A_first_splash">Erster Einblick in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/What_went_wrong">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Variables">Speichern der benötigten Informationen — Variablen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Math">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Strings">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods">Nützliche String-Methoden</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Arrays">Arrays</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Conditionals">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Loops">Code-Schleifen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Functions">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function">Erstellen Sie Ihre eigene Funktion</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Return_values">Funktionsrückgabewerte</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Events">Einführung in Ereignisse</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Event_bubbling">Ereignis-Bubbling</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Image_gallery">Herausforderung: Bildergalerie</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Object_basics">JavaScript-Objektgrundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/DOM_scripting">Einführung in DOM-Scripting</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Network_requests">Netzwerkanfragen mit JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/JSON">Arbeiten mit JSON</a></li><li><a href="/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript">Debugging JavaScript and handling errors</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction">Einführung in client-seitige Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features">Hauptmerkmale von Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started">Erste Schritte mit React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning">Beginn unserer React To-Do-Liste</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components">Komponenten in unserer React-App erstellen</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state">React Interaktivität: Events und State</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility">Barrierefreiheit in React</a></li><li><a href="/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources">React-Ressourcen</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Core/Accessibility">Barrierefreiheit</a></summary><ol><li><a href="/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility">Was ist Barrierefreiheit?</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Tooling">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/HTML">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Multimedia">Barrierefreie Multimedia-Inhalte</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Mobile">Mobile Accessibility</a></li><li><a href="/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Core/Design_for_developers">Design für Entwickler:innen</a></li><li><a href="/de/docs/Learn_web_development/Core/Version_control">Versionskontrolle</a></li><li class="section"><a href="/de/docs/Learn_web_development/Extensions">Erweiterungsmodule</a></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects">Advanced JavaScript objects</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes">Objektprototypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming">Objektorientierte Programmierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript">Klassen in JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice">Objektbaupraxis</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs">Client-seitige Web-APIs</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction">Einführung in Web-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs">Video- und Audio-APIs</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics">Zeichnen von Grafiken</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage">Client-seitiger Speicher</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs">Third-party APIs</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Async_JS">Asynchrones JavaScript</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing">Einführung in asynchrones JavaScript</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Promises">Anleitung zur Verwendung von Promises</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API">Wie man eine Promise-basierte API implementiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers">Einführung in Worker</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Forms">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Your_first_form">Ihr erstes Formular</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form">Wie man ein Webformular strukturiert</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls">Grundlegende native Formularsteuerungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types">Die HTML5-Eingabetypen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls">Andere Formularelemente</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms">Styling von Webformularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling">Fortgeschrittenes Formular-Styling</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes">UI-Pseudoklassen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Form_validation">Client-seitige Formularvalidierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data">Senden von Formulardaten</a></li></ol></details></li><li class="toggle"><details open=""><summary><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools">Verständnis für clientseitige Tools</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Überblick über Client-seitige Tools</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Grundlagen des Paketmanagements</a></li><li><em><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain" aria-current="page">Einführung in eine vollständige Werkzeugkette</a></em></li><li><a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung unserer App</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side">Serverseitige Programmierung</a></summary><ol><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps">Erste Schritte auf der Serverseite</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction">Einführung in die Server-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview">Überblick über Client-Server</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks">Server-seitige Web-Frameworks</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security">Website-Sicherheit</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django">Django Web-Framework (Python)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction">Einführung in Django</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Models">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security">Django Webanwendungssicherheit</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs">Express Web-Framework (Node.js)</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction">Einführung in Express/Node</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Performance">Web-Performance</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Performance/why_web_performance">Das "Warum" der Web-Performance</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance">Was ist Web-Performance?</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance">Wahrgenommene Leistung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance">Leistungsmessung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/Multimedia">Multimedia: Bilder</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/video">Multimedia: video</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/JavaScript">JavaScript-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/HTML">HTML-Performance-Optimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/CSS">CSS-Leistungsoptimierung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Extensions/Testing">Tests</a></summary><ol><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Introduction">Einführung in das Cross-Browser-Testing</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies">Strategien zur Durchführung von Tests</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Feature_detection">Implementierung der Funktionsprüfung</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Automated_testing">Einführung in automatisiertes Testen</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/Extensions/Transform_animate">CSS transformieren und animieren</a></li><li><a href="/de/docs/Learn_web_development/Extensions/Security_privacy">Sicherheit und Datenschutz</a></li><li class="section">Weitere Ressourcen</li><li class="toggle"><details><summary><a href="/de/docs/Learn_web_development/Howto">Häufige Probleme lösen</a></summary><ol><li><a href="/de/docs/Learn_web_development/Howto/Solve_HTML_problems">Häufige HTML-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_CSS_problems">Häufige CSS-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems">Häufige JavaScript-Probleme lösen</a></li><li><a href="/de/docs/Learn_web_development/Howto/Web_mechanics">Webmechanik</a></li><li><a href="/de/docs/Learn_web_development/Howto/Tools_and_setup">Tools und Einrichtung</a></li><li><a href="/de/docs/Learn_web_development/Howto/Design_and_accessibility">Design und Barrierefreiheit</a></li></ol></details></li><li><a href="/de/docs/Learn_web_development/About">Über</a></li><li><a href="/de/docs/Learn_web_development/Educators">Ressourcen für Lehrkräfte</a></li><li><a href="/de/docs/Learn_web_development/Changelog">Änderungsprotokoll</a></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="#einführung_in_unsere_fallstudie">Einführung in unsere Fallstudie</a></li><li class="document-toc-item "><a class="document-toc-link" href="#verwendete_werkzeuge_in_unserer_werkzeugkette">Verwendete Werkzeuge in unserer Werkzeugkette</a></li><li class="document-toc-item "><a class="document-toc-link" href="#werkzeugketten_und_ihre_inhärente_komplexität">Werkzeugketten und ihre inhärente Komplexität</a></li><li class="document-toc-item "><a class="document-toc-link" href="#überprüfung_der_voraussetzungen">Überprüfung der Voraussetzungen</a></li><li class="document-toc-item "><a class="document-toc-link" href="#einrichten_einer_entwicklungsumgebung">Einrichten einer Entwicklungsumgebung</a></li><li class="document-toc-item "><a class="document-toc-link" href="#bau-_und_transformationswerkzeuge">Bau- und Transformationswerkzeuge</a></li><li class="document-toc-item "><a class="document-toc-link" href="#schreiben_des_quellcodes">Schreiben des Quellcodes</a></li><li class="document-toc-item "><a class="document-toc-link" href="#ausführen_der_transformation">Ausführen der Transformation</a></li><li class="document-toc-item "><a class="document-toc-link" href="#zusammenfassung">Zusammenfassung</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>Einführung in eine vollständige Werkzeugkette</h1></header><div class="section-content"><ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools"><span class="button-wrap"> Übersicht: Verständnis von Client-seitigen Web-Entwicklungstools</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment"><span class="button-wrap"> Weiter </span></a></li></ul> <p>In den letzten Artikeln dieser Serie werden wir Ihr Wissen über Werkzeuge festigen, indem wir Sie durch den Prozess des Aufbaus einer Fallstudien-Werkzeugkette führen. Wir beginnen mit dem Einrichten einer vernünftigen Entwicklungsumgebung und der Implementierung von Transformationstools, bis hin zur tatsächlichen Bereitstellung Ihrer App. In diesem Artikel stellen wir die Fallstudie vor, richten unsere Entwicklungsumgebung ein und konfigurieren unsere Code-Transformationstools.</p> <figure class="table-container"><table> <tbody> <tr> <th scope="row">Voraussetzungen:</th> <td> Vertrautheit mit den Grundlagen der <a href="/de/docs/Learn_web_development/Core/Structuring_content">HTML</a>, <a href="/de/docs/Learn_web_development/Core/Styling_basics">CSS</a> und <a href="/de/docs/Learn_web_development/Core/Scripting">JavaScript</a> Sprachen. </td> </tr> <tr> <th scope="row">Ziel:</th> <td> Festigung dessen, was wir bisher gelernt haben, indem wir eine vollständige Werkzeugketten-Fallstudie bearbeiten. </td> </tr> </tbody> </table></figure> <p>Es gibt in der Tat unbegrenzte Kombinationen von Werkzeugen und Möglichkeiten, sie zu nutzen. Was Sie in diesem Artikel und dem nächsten sehen, ist nur <em>eine</em> Möglichkeit, wie die vorgestellten Werkzeuge für ein Projekt verwendet werden können.</p> <div class="notecard note"> <p><strong>Hinweis:</strong> Es ist auch erwähnenswert, dass nicht alle dieser Werkzeuge über die Kommandozeile ausgeführt werden müssen. Viele der heutigen Code-Editoren (wie VS Code) bieten Integrationssupport für eine Vielzahl von Werkzeugen über Plugins.</p> </div></div><section aria-labelledby="einführung_in_unsere_fallstudie"><h2 id="einführung_in_unsere_fallstudie"><a href="#einführung_in_unsere_fallstudie">Einführung in unsere Fallstudie</a></h2><div class="section-content"><p>Die Werkzeugkette, die wir in diesem Artikel erstellen, wird verwendet, um eine Mini-Website zu erstellen und bereitzustellen, die Daten über das <a href="https://github.com/mdn/content" class="external" target="_blank">mdn/content</a> Repository anzeigt und ihre Daten von der <a href="https://docs.github.com/en/rest/metrics/community" class="external" target="_blank">GitHub API</a> bezieht.</p></div></section><section aria-labelledby="verwendete_werkzeuge_in_unserer_werkzeugkette"><h2 id="verwendete_werkzeuge_in_unserer_werkzeugkette"><a href="#verwendete_werkzeuge_in_unserer_werkzeugkette">Verwendete Werkzeuge in unserer Werkzeugkette</a></h2><div class="section-content"><p>In diesem Artikel werden wir die folgenden Werkzeuge und Funktionen verwenden:</p> <ul> <li><a href="https://react.dev/learn/writing-markup-with-jsx" class="external" target="_blank">JSX</a>, ein Satz von Syntaxerweiterungen in Verbindung mit <a href="https://react.dev/" class="external" target="_blank">React</a>, der es Ihnen ermöglicht, z. B. Komponentenstrukturen in JavaScript zu definieren. Sie müssen React nicht kennen, um diesem Tutorial zu folgen, aber wir haben es aufgenommen, um Ihnen eine Vorstellung davon zu geben, wie eine nicht-native Websprache in eine Werkzeugkette integriert werden könnte.</li> <li>Die neuesten eingebauten JavaScript-Funktionen (zum Zeitpunkt des Schreibens), wie <a href="/de/docs/Web/JavaScript/Reference/Statements/import"><code>import</code></a>.</li> <li>Nützliche Entwicklungswerkzeuge wie <a href="https://prettier.io/" class="external" target="_blank">Prettier</a> zum Formatieren und <a href="https://eslint.org/" class="external" target="_blank">ESLint</a> zum Linting.</li> <li><a href="https://postcss.org/" class="external" target="_blank">PostCSS</a> um CSS-Verschachtelungsfähigkeiten bereitzustellen.</li> <li><a href="https://vite.dev/" class="external" target="_blank">Vite</a> um unseren Code zu kompilieren und zu minimieren und um automatisch eine Menge Konfigurationsdateien zu erstellen.</li> <li><a href="/de/docs/Learn_web_development/Core/Version_control">GitHub</a> zum Verwalten unserer Quellcode-Kontrolle und um schließlich unsere Seite (mit GitHub Pages) bereitzustellen.</li> </ul> <p>Es ist möglich, dass Ihnen nicht alle oben genannten Funktionen und Werkzeuge oder deren Funktionsweise vertraut sind, aber keine Panik — wir werden jedes Teil erklären, während wir diesen Artikel durchgehen.</p></div></section><section aria-labelledby="werkzeugketten_und_ihre_inhärente_komplexität"><h2 id="werkzeugketten_und_ihre_inhärente_komplexität"><a href="#werkzeugketten_und_ihre_inhärente_komplexität">Werkzeugketten und ihre inhärente Komplexität</a></h2><div class="section-content"><p>Wie bei jeder Kette gilt: Je mehr Glieder Sie in Ihrer Werkzeugkette haben, desto komplexer und potenziell anfälliger ist sie — beispielsweise könnte sie komplexer zu konfigurieren sein und leichter brechen. Umgekehrt gilt: Je weniger Glieder, desto widerstandsfähiger ist die Werkzeugkette.</p> <p>Alle Webprojekte werden unterschiedlich sein, und Sie müssen überlegen, welche Teile Ihrer Werkzeugkette notwendig sind und jeden Teil sorgfältig abwägen.</p> <p>Die kleinste Werkzeugkette ist eine, die keine Glieder hat. Sie würden das HTML von Hand codieren, "vanilla JavaScript" (d. h. ohne Frameworks oder Zwischenlanguages) verwenden und alles manuell auf einen Server zur Bereitstellung hochladen.</p> <p>Allerdings profitieren kompliziertere Softwareanforderungen wahrscheinlich von der Nutzung von Werkzeugen, um den Entwicklungsprozess zu vereinfachen. Darüber hinaus sollten Sie Tests durchführen, bevor Sie Ihre Software auf Ihren Produktionsserver bereitstellen, um sicherzustellen, dass sie wie beabsichtigt funktioniert — das klingt bereits nach einer notwendigen Werkzeugkette.</p> <p>Für unser Beispielprojekt werden wir eine Werkzeugkette verwenden, die speziell darauf ausgelegt ist, unsere Softwareentwicklung zu unterstützen und die technischen Entscheidungen während der Softwaredesignphase zu tragen. Wir werden jedoch auf nicht notwendiges Werkzeug verzichten, um die Komplexität so gering wie möglich zu halten.</p></div></section><section aria-labelledby="überprüfung_der_voraussetzungen"><h2 id="überprüfung_der_voraussetzungen"><a href="#überprüfung_der_voraussetzungen">Überprüfung der Voraussetzungen</a></h2><div class="section-content"><p>Sie sollten den größten Teil der Software bereits installiert haben, wenn Sie die vorherigen Kapitel befolgt haben. Hier ist, was Sie haben sollten, bevor Sie zu den eigentlichen Einrichtungsschritten übergehen. Diese müssen nur einmal durchgeführt werden und Sie müssen diese nicht für zukünftige Projekte wiederholen.</p></div></section><section aria-labelledby="erstellen_eines_github-kontos"><h3 id="erstellen_eines_github-kontos"><a href="#erstellen_eines_github-kontos">Erstellen eines GitHub-Kontos</a></h3><div class="section-content"><p>Neben den Tools, die wir installieren werden und die zu unserer Werkzeugkette beitragen, müssen Sie ein Konto bei GitHub erstellen, wenn Sie das Tutorial vollständig abschließen möchten. Sie können jedoch trotzdem den lokalen Entwicklungsteil ohne es verfolgen. Wie bereits erwähnt, ist GitHub ein Quellcode-Repository-Dienst, der Community-Funktionen wie Fehlerverfolgung, das Verfolgen von Projektveröffentlichungen und vieles mehr bietet. Im nächsten Kapitel werden wir in ein GitHub-Code-Repository einchecken, was einen Kaskadeneffekt auslöst, der (hoffentlich) die gesamte Software ins Web bringt.</p> <p>Melden Sie sich bei <a href="https://github.com/" class="external" target="_blank">GitHub</a> an, indem Sie auf der Startseite auf den Link <em>Sign Up</em> klicken, wenn Sie noch kein Konto haben, und folgen Sie den Anweisungen.</p></div></section><section aria-labelledby="installation_von_git"><h3 id="installation_von_git"><a href="#installation_von_git">Installation von Git</a></h3><div class="section-content"><p>Wir werden eine weitere Software installieren, git, um uns bei der Versionskontrolle zu unterstützen.</p> <p>Es ist möglich, dass Sie schon von "git" gehört haben. <a href="https://git-scm.com/" class="external" target="_blank">Git</a> ist derzeit das beliebteste Quellcode-Versionierungstool, das Entwicklern zur Verfügung steht — Versionskontrolle bietet viele Vorteile, wie z.B. eine Möglichkeit zur Sicherung Ihrer Arbeit an einem entfernten Ort und einen Mechanismus, in einem Team am selben Projekt zu arbeiten, ohne Angst zu haben, den Code eines anderen zu überschreiben.</p> <p>Es mag für einige offensichtlich sein, aber es sei gesagt: Git ist nicht dasselbe wie GitHub. Git ist das Versionskontrollwerkzeug, während <a href="https://github.com/" class="external" target="_blank">GitHub</a> ein Online-Speicher für Git-Repositories ist (plus eine Reihe nützlicher Werkzeuge für die Arbeit damit). Beachten Sie, dass es, obwohl wir GitHub in diesem Kapitel verwenden, mehrere Alternativen gibt, darunter <a href="https://about.gitlab.com/" class="external" target="_blank">GitLab</a> und <a href="https://www.atlassian.com/software/bitbucket" class="external" target="_blank">Bitbucket</a>, und Sie könnten sogar Ihre eigenen Git-Repositories hosten.</p> <p>Die Verwendung von Versionskontrolle in Ihren Projekten und deren Einbindung als Teil der Werkzeugkette wird die Evolution Ihres Codes verwalten. Es bietet eine Möglichkeit, "Blöcke" von Arbeit mit Kommentaren wie "X neues Feature implementiert" oder "Bug Z jetzt behoben aufgrund von Y Änderungen" zu commiten.</p> <p>Versionskontrolle kann Ihnen auch erlauben, Ihr Projekt zu "verzweigen", d.h. eine separate Version zu erstellen und neue Funktionalitäten auszuprobieren, ohne dass diese Änderungen Ihren ursprünglichen Code betreffen.</p> <p>Schließlich kann es Ihnen helfen, Änderungen rückgängig zu machen oder Ihren Code zurückzusetzen auf eine frühere Version "wann es funktionierte", falls ein Fehler eingeführt wurde und Sie Schwierigkeiten haben, ihn zu beheben — etwas, das alle Entwickler ab und zu tun müssen!</p> <p>Git kann <a href="https://git-scm.com/downloads" class="external" target="_blank">über die Git-SCM-Website heruntergeladen und installiert werden</a> — laden Sie den relevanten Installer für Ihr System herunter, führen Sie ihn aus und folgen Sie den Anweisungen auf dem Bildschirm. Das ist alles, was Sie für den Moment tun müssen.</p> <p>Sie können mit Git auf verschiedene Arten interagieren, von der Nutzung der Kommandozeile zum Ausführen von Befehlen, zur Verwendung einer <a href="https://git-scm.com/downloads/guis" class="external" target="_blank">Git-GUI-App</a> zum Ausführen derselben Befehle durch Drücken von Tasten, oder sogar direkt innerhalb Ihres Code-Editors, wie im folgenden Beispiel in Visual Studio Code gezeigt:</p> <p><img src="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/vscode-git.png" alt="Git-Integration in VS Code gezeigt" width="1060" height="720" loading="lazy"></p></div></section><section aria-labelledby="bestehendes_projekt"><h3 id="bestehendes_projekt"><a href="#bestehendes_projekt">Bestehendes Projekt</a></h3><div class="section-content"><p>Wir werden auf dem Projekt aufbauen, das wir bereits im vorherigen Kapitel begonnen haben, also stellen Sie sicher, dass Sie die Anweisungen in <a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management">Package management</a> befolgen, um das Projekt zuerst einzurichten. Zur Wiederholung, hier ist was Sie haben sollten:</p> <ul> <li>Node.js und npm installiert.</li> <li>Ein neues Projekt namens <code>npm-experiment</code> (oder ein anderer Name).</li> <li>Vite als Entwicklungsabhängigkeit installiert.</li> <li>Das <code>plotly.js-dist-min</code> Paket als Abhängigkeit installiert.</li> <li>Einige benutzerdefinierte Skripte in package.json definiert.</li> <li>Die Dateien <code>index.html</code> und <code>src/main.jsx</code> erstellt.</li> </ul> <p>Wie wir in <a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview">Kapitel 1</a> besprochen haben, wird die Werkzeugkette in die folgenden Phasen strukturiert:</p> <ul> <li><strong>Entwicklungsumgebung</strong>: Die Werkzeuge, die am grundlegendsten sind, um Ihren Code auszuführen. Dieser Teil wurde im vorherigen Kapitel bereits eingerichtet.</li> <li><strong>Sicherheitsnetz</strong>: Die Softwareentwicklungserfahrung stabil und effizienter gestalten. Wir könnten dies auch als unsere Entwicklungsumgebung bezeichnen.</li> <li><strong>Transformation</strong>: Werkzeuge, die uns ermöglichen, die neuesten Funktionen einer Sprache (z.B. JavaScript) oder einer ganz anderen Sprache (z.B. JSX oder TypeScript) in unserem Entwicklungsprozess zu verwenden und unseren Code dann so zu transformieren, dass die Produktionsversion auf zahlreichen Browsern ausgeführt wird, sowohl modernen als auch älteren.</li> <li><strong>Nach der Entwicklung</strong>: Werkzeuge, die nach Abschluss der Entwicklungsphase ins Spiel kommen, um sicherzustellen, dass Ihre Software ins Web gelangt und weiterhin läuft. In dieser Fallstudie werden wir uns damit beschäftigen, Ihrem Code Tests hinzuzufügen und Ihre App mithilfe von GitHub Pages bereitzustellen, damit sie im gesamten Web verfügbar ist.</li> </ul> <p>Lassen Sie uns damit anfangen und mit unserer Entwicklungsumgebung beginnen. Wir werden die gleichen Schritte befolgen, wie ein echtes Projekt eingerichtet wird, so dass Sie sich in Zukunft, wenn Sie ein neues Projekt einrichten, auf dieses Kapitel beziehen und die Schritte erneut befolgen können.</p></div></section><section aria-labelledby="einrichten_einer_entwicklungsumgebung"><h2 id="einrichten_einer_entwicklungsumgebung"><a href="#einrichten_einer_entwicklungsumgebung">Einrichten einer Entwicklungsumgebung</a></h2><div class="section-content"><p>Dieser Teil der Werkzeugkette wird manchmal als Verzögerung der eigentlichen Arbeit angesehen, und es kann sehr leicht passieren, dass man in ein "Kaninhole" von Werkzeugen fällt, in dem man viel Zeit damit verbringt, die Umgebung "genau richtig" einzustellen.</p> <p>Aber man kann das alltägliche Arbeitsumgebung auf die gleiche Weise sehen. Der Stuhl muss bequem sein und in einer guten Position sein, um bei Ihrer Haltung zu helfen. Sie brauchen Strom, WLAN und USB-Anschlüsse! Möglicherweise gibt es wichtige Dekorationen oder Musik, die bei Ihrem geistigen Zustand helfen — diese sind alle wichtig, um Ihre bestmögliche Arbeit zu leisten, und sie sollten auch nur einmal eingerichtet werden müssen, wenn es richtig gemacht wird.</p> <p>In gleicher Weise sollte das Einrichten Ihrer Entwicklungsumgebung, wenn es gut gemacht ist, nur einmal durchgeführt werden müssen und in vielen zukünftigen Projekten wiederverwendbar sein. Sie werden wahrscheinlich diesen Teil der Werkzeugkette halb regulär überprüfen und überlegen, ob es Upgrades oder Änderungen gibt, die Sie einführen sollten, aber das sollte nicht allzu oft erforderlich sein.</p> <p>Ihre Werkzeugkette hängt von Ihren eigenen Bedürfnissen ab, aber für dieses Beispiel einer ziemlich vollständigen Werkzeugkette, werden die im Voraus installierten/initialisierten Werkzeuge folgende sein:</p> <ul> <li>Bibliotheksinstallationswerkzeuge — zum Hinzufügen von Abhängigkeiten.</li> <li>Code-Versionskontrolle.</li> <li>Code-Aufbereitungswerkzeuge — zum Aufbereiten von JavaScript, CSS und HTML.</li> <li>Code-Linting-Werkzeuge — zum Linting unseres Codes.</li> </ul></div></section><section aria-labelledby="bibliotheksinstallationswerkzeuge"><h3 id="bibliotheksinstallationswerkzeuge"><a href="#bibliotheksinstallationswerkzeuge">Bibliotheksinstallationswerkzeuge</a></h3><div class="section-content"><p>Sie haben dies bereits getan, aber zur einfachen Referenz, hier sind die Befehle (ausgeführt im Stammverzeichnis des <code>npm-experiment</code> Verzeichnisses), um ein npm-Paket initialisieren und die notwendigen Abhängigkeiten zu installieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm init npm install --save-dev vite npm install plotly.js-dist-min </code></pre></div></div></section><section aria-labelledby="code-versionskontrolle"><h3 id="code-versionskontrolle"><a href="#code-versionskontrolle">Code-Versionskontrolle</a></h3><div class="section-content"><p>Geben Sie den folgenden Befehl ein, um die Quellcodekontrollfunktionalität von git im Verzeichnis zu starten:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>git init </code></pre></div> <p>Standardmäßig verfolgt git die Änderungen aller Dateien. Es gibt jedoch einige generierte Dateien, die wir nicht verfolgen müssen, da sie kein Code sind, den wir geschrieben haben und jederzeit neu generiert werden können. Wir können git anweisen, diese Dateien zu ignorieren, indem wir eine <code>.gitignore</code> Datei im Stammverzeichnis des Projekts erstellen. Fügen Sie folgenden Inhalt in die Datei ein:</p> <pre class="brush: plain notranslate">node_modules dist </pre></div></section><section aria-labelledby="code-aufbereitungswerkzeuge"><h3 id="code-aufbereitungswerkzeuge"><a href="#code-aufbereitungswerkzeuge">Code-Aufbereitungswerkzeuge</a></h3><div class="section-content"><p>Wir werden Prettier verwenden, das wir zuerst in Kapitel 2 kennengelernt haben, um unseren Code in diesem Projekt aufzubereiten. Wir werden Prettier erneut in diesem Projekt installieren. Installieren Sie es mit dem folgenden Befehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev prettier </code></pre></div> <p>Beachten Sie erneut, dass wir <code>--save-dev</code> verwenden, um es als Entwicklungsabhängigkeit hinzuzufügen, da wir es nur während der Entwicklung verwenden.</p> <p>Wie viele kürzlich entwickelte Werkzeuge kommt auch Prettier mit "vernünftigen Standardeinstellungen". Das bedeutet, dass Sie Prettier verwenden können, ohne etwas konfigurieren zu müssen (wenn Sie mit den <a href="https://prettier.io/docs/en/configuration.html" class="external" target="_blank">Standardeinstellungen</a> zufrieden sind). Dies lässt Ihnen mehr Zeit für das Wesentliche: die kreative Arbeit. Zur Demonstration werden wir eine Konfigurationsdatei hinzufügen. Erstellen Sie im Stammverzeichnis Ihres <code>npm-experiment</code> Verzeichnisses eine Datei namens <code>.prettierrc.json</code>. Fügen Sie folgenden Inhalt hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>{ "bracketSameLine": true } </code></pre></div> <p>Mit dieser Einstellung wird Prettier das <code>></code> einer mehrzeiligen HTML (HTML, JSX, Vue, Angular) Eröffnungs-Tag am Ende der letzten Zeile anstatt allein in der nächsten Zeile anzeigen. Dies ist das Format, das MDN selbst verwendet. Sie können mehr über die <a href="https://prettier.io/docs/en/configuration.html" class="external" target="_blank">Konfiguration von Prettier</a> in der Dokumentation erfahren.</p> <p>Standardmäßig formatiert Prettier alle von Ihnen angegebenen Dateien. Allerdings müssen wir generierte Dateien nicht formatieren, oder es gibt möglicherweise bestimmten Legacy-Code, den wir nicht anrühren möchten. Wir können Prettier anweisen, diese Dateien immer zu ignorieren, indem wir eine <code>.prettierignore</code> Datei im Stammverzeichnis des Projekts erstellen. Fügen Sie folgenden Inhalt in die Datei ein:</p> <pre class="brush: plain notranslate">node_modules dist </pre> <p>Es hat den gleichen Inhalt wie <code>.gitignore</code>, aber in einem realen Projekt möchten Sie möglicherweise andere Dateien für Prettier als für git ignorieren.</p> <p>Jetzt, wo Prettier installiert und konfiguriert ist, kann das Aufbereiten und Ausführen von Code über die Kommandozeile erfolgen, z.B.:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npx prettier --write ./index.html </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Im obigen Befehl verwenden wir Prettier mit dem <code>--write</code> Flag. Prettier versteht dies so, dass es "wenn es ein Problem in meinem Codeformat gibt, gehen Sie vor und beheben Sie es, dann speichern Sie meine Datei". Dies ist für unseren Entwicklungsprozess in Ordnung, aber wir können auch <code>prettier</code> ohne das Flag verwenden und es wird nur die Datei überprüfen. Das Überprüfen der Datei (und das nicht Speichern) ist nützlich für Zwecke wie Überprüfungen, die vor einer Veröffentlichung durchgeführt werden — d.h. "veröffentlichen Sie keinen Code, der nicht richtig formatiert wurde."</p> </div> <p>Sie können auch <code>./index.html</code> durch jede andere Datei oder Ordner ersetzen, um sie zu formatieren. Beispielsweise wird <code>.</code> alles im aktuellen Verzeichnis formatieren. Für den Fall, dass Sie sich die Syntax nicht merken können, können Sie es auch als benutzerdefiniertes Skript in Ihre package.json einfügen:</p> <div class="code-example"><div class="example-header"><span class="language-name">json</span></div><pre class="brush: json notranslate"><code>"scripts": { // ... "format": "prettier --write ." }, </code></pre></div> <p>Jetzt können Sie Folgendes ausführen, um das Verzeichnis zu formatieren:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm run format </code></pre></div> <p>Es kann dennoch mühsam sein, den Befehl jedes Mal auszuführen, wenn wir etwas ändern, und es gibt einige Möglichkeiten, diesen Prozess zu automatisieren:</p> <ul> <li>Verwendung spezieller "git hooks", um zu testen, ob der Code vor einem Commit formatiert ist.</li> <li>Verwendung von Code-Editor-Plugins, um Prettier-Befehle jedes Mal auszuführen, wenn eine Datei gespeichert wird.</li> </ul> <div class="notecard note"> <p><strong>Hinweis:</strong> Was ist ein git Hook? Git (nicht GitHub) bietet ein System, das uns erlaubt, Vor- und Nachaktionen an Aufgaben zu hängen, die wir mit git ausführen (wie das Committen Ihres Codes). Obwohl git Hooks ein wenig zu kompliziert sein können (nach Meinung dieses Autors), können sie sehr mächtig sein, wenn sie eingerichtet sind. Wenn Sie daran interessiert sind, Hooks zu verwenden, ist <a href="https://github.com/typicode/husky" class="external" target="_blank">Husky</a> ein stark vereinfachter Einstieg in die Verwendung von Hooks.</p> </div> <p>Für VS Code ist eine nützliche Erweiterung der <a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode" class="external" target="_blank">Prettier Code Formatter von Esben Petersen</a>, die VS Code automatisch den Code bei jedem Speichern zu formatieren. Das bedeutet, dass jede Datei im Projekt, an dem wir arbeiten, schön formatiert wird, einschließlich HTML, CSS, JavaScript, JSON, Markdown und mehr. Alles, was der Editor benötigt, ist das Aktivieren von "Format on Save".</p></div></section><section aria-labelledby="code-linting-werkzeuge"><h3 id="code-linting-werkzeuge"><a href="#code-linting-werkzeuge">Code-Linting-Werkzeuge</a></h3><div class="section-content"><p>Linting hilft bei der Code-Qualität, ist aber auch eine Möglichkeit, potenzielle Fehler früher während der Entwicklung zu erkennen. Es ist eine Schlüsselingredienz einer guten Werkzeugkette und eine, die viele Entwicklungsprojekte standardmäßig einbeziehen werden.</p> <p>Webentwicklungslinting-Werkzeuge existieren meist für JavaScript (obwohl es einige für HTML und CSS gibt). Das macht Sinn: wenn ein unbekanntes HTML-Element oder ungültige CSS-Eigenschaft verwendet wird, aufgrund der resilienten Natur dieser beiden Sprachen wird nichts Großes brechen. JavaScript ist viel fragiler — das versehentliche Aufrufen einer Funktion, die nicht existiert, führt dazu, dass Ihr JavaScript fehlschlägt; JavaScript-Linting ist daher sehr wichtig, insbesondere für größere Projekte.</p> <p>Das Standardwerkzeug für JavaScript-Linting ist <a href="https://eslint.org/" class="external" target="_blank">ESLint</a>. Es ist ein äußerst mächtiges und vielseitiges Werkzeug, kann jedoch knifflig zu konfigurieren sein und es ist leicht möglich, viele Stunden damit zu verbringen, eine Konfiguration <em>genau richtig</em> zu bekommen!</p> <p>ESLint wird über npm installiert, also haben Sie wie in Kapitel 2 besprochen die Wahl, dieses Werkzeug lokal oder global zu installieren, aber eine lokale Installation ist sehr zu empfehlen, da Sie für jedes Projekt ohnehin eine Konfigurationsdatei haben müssen. Denken Sie an den Befehl, um auszuführen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev eslint@8 @eslint/js globals </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> <code>eslint@8</code> installiert die Version 8 von ESLint, während die neueste Version v9 ist. Dies liegt daran, dass <code>eslint-plugin-react</code>, das wir später verwenden werden, <a href="https://github.com/jsx-eslint/eslint-plugin-react/issues/3699" class="external" target="_blank">noch nicht v9 unterstützt</a>.</p> </div> <p>Das <code>@eslint/js</code> Paket bietet vordefinierte ESLint-Konfigurationen, während das <code>globals</code> Paket eine Liste bekannter globaler Namen in jeder Umgebung bereitstellt. Wir werden sie später in der Konfiguration verwenden. Aus der Box wird ESLint beklagen, dass es die Konfigurationsdatei nicht finden kann, wenn Sie es mit <code>npx eslint</code> ausführen:</p> <pre class="brush: plain notranslate">Oops! Something went wrong! :( ESLint: 8.57.0 ESLint couldn't find a configuration file. To set up a configuration file for this project, please run: ... </pre> <p>Hier ist ein minimales Beispiel, das funktioniert (in einer Datei namens <code>eslint.config.js</code>, im Stammverzeichnis des Projekts):</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import js from "@eslint/js"; import globals from "globals"; export default [ js.configs.recommended, { ignores: ["node_modules", "dist"], }, { files: ["**/*.{js,jsx}"], languageOptions: { globals: { ...globals.browser, }, }, }, ]; </code></pre></div> <p>Die obenstehende ESLint-Konfiguration:</p> <ul> <li>Aktiviert die "empfohlenen" ESLint-Einstellungen</li> <li>Weist ESLint an, die generierten Dateien zu ignorieren, wie wir es bereits bei den anderen Werkzeugen getan haben</li> <li>Weist ESLint an, <code>.js</code> und <code>.jsx</code> Dateien beim Linting einzubeziehen</li> <li>Informiert ESLint über die Existenz der globalen Variablen des Browsers (verwendet von Lint-Regeln wie <code>no-undef</code> zum Überprüfen nicht existenter Variablen).</li> </ul> <p>Der ESLint-Parser versteht JSX standardmäßig nicht, und seine empfohlenen Regeln behandeln keine React-spezifischen Semantiken. Daher werden wir etwas mehr Konfiguration hinzufügen, um es zu ermöglichen, JSX und React ordnungsgemäß zu unterstützen. Installieren Sie zuerst <code>eslint-plugin-react</code> und <code>eslint-plugin-react-hooks</code>, die Regeln für korrektes und idiomatisches React bereitstellen:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks </code></pre></div> <p>Aktualisieren Sie dann die ESLint-Konfigurationsdatei, um die empfohlenen Konfigurationen dieser Plugins einzuschließen, die sowohl die empfohlenen Regeln lädt als auch die Parser-Optionen für JSX setzt:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import js from "@eslint/js"; import globals from "globals"; import reactRecommended from "eslint-plugin-react/configs/recommended.js"; import reactJSXRuntime from "eslint-plugin-react/configs/jsx-runtime.js"; import reactHooksPlugin from "eslint-plugin-react-hooks"; export default [ js.configs.recommended, { ignores: ["node_modules", "dist"], }, { files: ["**/*.{js,jsx}"], languageOptions: { globals: { ...globals.browser, }, }, settings: { react: { version: "detect", }, }, }, reactRecommended, reactJSXRuntime, { plugins: { "react-hooks": reactHooksPlugin, }, rules: reactHooksPlugin.configs.recommended.rules, }, ]; </code></pre></div> <div class="notecard note"> <p><strong>Hinweis:</strong> Unsere Konfiguration für <code>eslint-plugin-react-hooks</code> ist etwas umständlich im Vergleich zu den einzeiligen Ergänzungen für <code>eslint-plugin-react</code> Konfigurationen. Dies liegt daran, dass <code>eslint-plugin-react-hooks</code> das neue ESLint-Konfigurationsformat noch nicht unterstützt. Weitere Informationen finden Sie unter <a href="https://github.com/facebook/react/issues/28313" class="external" target="_blank">facebook/react#28313</a>.</p> </div> <p>Es gibt eine vollständige <a href="https://eslint.org/docs/latest/rules/" class="external" target="_blank">Liste der ESLint-Regeln</a>, die Sie nach Belieben anpassen und konfigurieren können, und viele Unternehmen und Teams haben ihre <a href="https://www.npmjs.com/search?q=keywords:eslintconfig" class="external" target="_blank">eigenen ESLint-Konfigurationen</a> veröffentlicht, die manchmal nützlich sein können, entweder um Inspiration zu bekommen oder um eine auszuwählen, die Ihren eigenen Standards entspricht. Ein Vorwarnung allerdings: ESLint-Konfiguration ist ein sehr tiefes Kaninchenloch!</p> <p>Im Interesse der Einfachheit werden wir in diesem Kapitel nicht alle Funktionen von ESLint erkunden, da diese Konfiguration für unser spezielles Projekt und dessen Anforderungen funktioniert. Beachten Sie jedoch, dass, wenn Sie eine Regel verfeinern und durchsetzen möchten, wie Ihr Code aussieht (oder validiert wird), es sehr wahrscheinlich ist, dass es mit der richtigen ESLint-Konfiguration durchgeführt werden kann.</p> <p>Wie bei anderen Werkzeugen ist die Code-Editor-Integration für ESLint in der Regel gut und möglicherweise nützlicher, da es uns sofortiges Feedback geben kann, wenn Probleme bei der Arbeit auftauchen:</p> <p><img src="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/eslint-error.png" alt="ESLint-Fehlerintegration in VS Code gezeigt" width="2044" height="636" loading="lazy"></p> <p>Das ist unser Entwicklungsumgebung-Setup zu diesem Zeitpunkt abgeschlossen. Nun sind wir (fast) bereit, zu codieren.</p></div></section><section aria-labelledby="bau-_und_transformationswerkzeuge"><h2 id="bau-_und_transformationswerkzeuge"><a href="#bau-_und_transformationswerkzeuge">Bau- und Transformationswerkzeuge</a></h2><div class="section-content"></div></section><section aria-labelledby="javascript-transformation"><h3 id="javascript-transformation"><a href="#javascript-transformation">JavaScript-Transformation</a></h3><div class="section-content"><p>Für dieses Projekt, wie oben erwähnt, wird React verwendet, was auch bedeutet, dass JSX im Quellcode verwendet wird. Das Projekt wird auch die neuesten JavaScript-Funktionen verwenden. Ein unmittelbares Problem ist, dass kein Browser native Unterstützung für JSX bietet; es ist eine Zwischenlanguage, die dazu gedacht ist, in Sprachen übersetzt zu werden, die der Browser in der Produktionsversion versteht. Wenn der Browser versucht, das Quell-JavaScript auszuführen, wird er sofort Fehler anzeigen; das Projekt benötigt ein Bauwerkzeug, um den Quellcode in etwas zu transformieren, das der Browser ohne Probleme konsumieren kann.</p> <p>Es gibt eine Reihe von Auswahlmöglichkeiten für Transformationswerkzeuge, und obwohl Babel ein besonders beliebtes ist, werden wir in Vite ein integriertes Plugin verwenden: <code>@vitejs/plugin-react</code>. Installieren Sie es mit dem folgenden Befehl:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install --save-dev @vitejs/plugin-react </code></pre></div> <p>Wir haben noch keine Vite-Konfiguration! Fügen Sie eine an der Stelle <code>vite.config.js</code> im Stammverzeichnis des Projekts hinzu:</p> <div class="code-example"><div class="example-header"><span class="language-name">js</span></div><pre class="brush: js notranslate"><code>import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; export default defineConfig({ plugins: [react()], base: "/npm-experiment/", }); </code></pre></div> <p>Lesen Sie die <a href="https://vite.dev/guide/" class="external" target="_blank">Vite-Dokumentation</a> für weitere Informationen darüber, wie Sie Vite konfigurieren können. Da unsere Seite auf GitHub Pages bereitgestellt wird, wird sie unter <code>https://your-username.github.io/your-repo-name</code> gehostet, also sollten Sie die <code>base</code> Option entsprechend dem Namen Ihres GitHub-Repositorys einstellen — aber Sie können es später immer noch anpassen, wenn wir zur <a href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment">Bereitstellung</a> kommen.</p></div></section><section aria-labelledby="css-transformation"><h3 id="css-transformation"><a href="#css-transformation">CSS-Transformation</a></h3><div class="section-content"><p>Unser CSS kann auch Syntax verwenden, die von Browsern nicht verstanden wird. Zum Beispiel können Sie eine Syntax verwenden, die erst in den letzten wenigen Browserversionen implementiert wurde, was bedeutet, dass ältere Browser daran scheitern werden und einen gebrochenen Stil anzeigen. Wir können ein Werkzeug verwenden, um unser CSS in ein Format zu transformieren, das alle Browser, die wir anvisieren, verstehen können.</p> <p><a href="https://postcss.org/" class="external" target="_blank">PostCSS</a> ist ein CSS-Postprozessor-Werkzeug. Im Vergleich zu Bauwerkzeugen wie <a href="https://sass-lang.com/" class="external" target="_blank">Sass</a> ist PostCSS dazu gedacht, <em>standardmäßiges</em> CSS zu schreiben (das heißt, CSS-Syntax, die eines Tages in Browsern eintreten könnte), während Sass eine eigene Sprache ist, die zu CSS compiliert wird. PostCSS ist näher am Web und hat eine viel geringere Lernkurve. <a href="https://vite.dev/guide/features.html#postcss" class="external" target="_blank">Vite unterstützt PostCSS standardmäßig</a>, also müssen Sie nur <a href="https://github.com/postcss/postcss#usage" class="external" target="_blank">PostCSS konfigurieren</a>, wenn Sie irgendwelche Funktionen kompilieren möchten. Sehen Sie sich den <a href="https://preset-env.cssdb.org/features/" class="external" target="_blank">cssdb</a> für die unterstützten Funktionen an.</p> <p>Für unsere Zwecke werden wir eine andere CSS-Transformation demonstrieren: <a href="https://vite.dev/guide/features.html#css-modules" class="external" target="_blank">CSS-Module</a>. Es ist eine der Möglichkeiten, <em>CSS-Modularisierung</em> zu erreichen. Denken Sie daran, dass CSS-Selektoren alle global sind, so dass, wenn Sie einen Klassennamen wie <code>.button</code> haben, alle Elemente mit dem Klassennamen <code>button</code> auf die gleiche Weise gestylt werden. Dies führt oft zu Namenskonflikten — stellen Sie sich vor, alle Ihre JavaScript-Variablen wären im globalen Rahmen definiert! CSS-Module lösen dieses Problem, indem sie den Klassennamen einzigartig für die Seiten machen, die sie verwenden. Um zu verstehen, wie es funktioniert, nachdem Sie den Quellcode heruntergeladen haben, können Sie sehen, wie wir die <code>.module.css</code> Dateien verwenden, und lesen Sie auch die <a href="https://github.com/css-modules/css-modules" class="external" target="_blank">CSS-Module-Dokumentation</a>.</p> <p>Obwohl diese Phase unserer Werkzeugkette ziemlich schmerzhaft sein kann, weil wir ein Werkzeug gewählt haben, das absichtlich versucht, die Konfiguration und Komplexität zu reduzieren, gibt es während der Entwicklungsphase tatsächlich nichts weiter, was wir tun müssen. Module werden korrekt importiert, verschachteltes CSS wird korrekt in "reguläres CSS" transformiert, und unsere Entwicklung wird nicht durch den Bauprozess behindert.</p> <p>Jetzt ist unsere Software bereit, geschrieben zu werden!</p></div></section><section aria-labelledby="schreiben_des_quellcodes"><h2 id="schreiben_des_quellcodes"><a href="#schreiben_des_quellcodes">Schreiben des Quellcodes</a></h2><div class="section-content"><p>Jetzt, da wir die vollständige Entwicklungswerkzeugkette eingerichtet haben, ist es normalerweise an der Zeit, echten Code zu schreiben — der Teil, auf den Sie die meiste Zeit investieren sollten. Für unsere Zwecke jedoch werden wir einfach bestehenden Quellcode kopieren und so tun, als hätten wir ihn geschrieben. Wir werden Ihnen nicht beibringen, wie sie funktionieren, da das nicht der Punkt dieses Kapitels ist. Sie sind lediglich hier, um die Werkzeuge auszuführen, damit wir Ihnen beibringen können, wie <em>sie</em> funktionieren.</p> <p>Um an die Code-Dateien zu gelangen, besuchen Sie <a href="https://github.com/mdn/client-toolchain-example" class="external" target="_blank">https://github.com/mdn/client-toolchain-example</a> und laden Sie den Inhalt dieses Repos herunter und entpacken Sie ihn irgendwo auf Ihrer lokalen Festplatte. Sie können das gesamte Projekt als Zip-Datei herunterladen, indem Sie <em>Clone or download</em> > <em>Download ZIP</em> auswählen.</p> <p><img src="/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/github-repo.png" alt="Das GitHub-Beispiel-Repo" width="1848" height="956" loading="lazy"></p> <p>Kopieren Sie jetzt den Inhalt des <code>src</code> Verzeichnisses des Projekts und verwenden Sie ihn, um Ihr aktuelles <code>src</code> Verzeichnis zu ersetzen. Sie müssen sich keine Sorgen um die anderen Dateien machen.</p> <p>Installieren Sie auch einige Abhängigkeiten, die der Quellcode verwendet:</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm install react react-dom @tanstack/react-query </code></pre></div> <p>Wir haben unsere Projektdateien an Ort und Stelle. Das ist alles, was wir im Moment tun müssen!</p></div></section><section aria-labelledby="ausführen_der_transformation"><h2 id="ausführen_der_transformation"><a href="#ausführen_der_transformation">Ausführen der Transformation</a></h2><div class="section-content"><p>Um mit unserem Projekt zu arbeiten, werden wir den Vite-Server auf der Kommandozeile starten. Im Standardmodus wird er auf Änderungen in Ihrem Code achten und den Server aktualisieren. Das ist schön, weil wir nicht ständig zwischen dem Code und der Kommandozeile hin und her wechseln müssen.</p> <ol> <li> <p>Um Vite im Hintergrund zu starten, gehen Sie zu Ihrem Terminal und führen Sie den folgenden Befehl aus (unter Verwendung des zuvor definierten benutzerdefinierten Skripts):</p> <div class="code-example"><div class="example-header"><span class="language-name">bash</span></div><pre class="brush: bash notranslate"><code>npm run dev </code></pre></div> <p>Sie sollten eine Ausgabe wie diese sehen (sobald die Abhängigkeiten installiert sind):</p> <pre class="brush: plain notranslate">> client-toolchain-example@1.0.0 dev > vite Re-optimizing dependencies because lockfile has changed VITE v5.2.13 ready in 157 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help </pre> <p>Der Server läuft nun auf der URL, die ausgegeben wurde (in diesem Fall localhost:5173).</p> </li> <li> <p>Gehen Sie zu dieser URL in Ihrem Browser und Sie werden die Beispiel-App laufen sehen!</p> </li> </ol> <p>Nun können wir einige Änderungen vornehmen und ihre Auswirkungen live beobachten.</p> <ol> <li>Laden Sie die Datei <code>src/App.jsx</code> in Ihrem bevorzugten Texteditor.</li> <li>Ersetzen Sie alle Vorkommen von <code>mdn/content</code> durch Ihr bevorzugtes GitHub-Repository, z.B. <code>facebook/react</code>.</li> <li>Speichern Sie die Datei und gehen Sie dann sofort zurück zur App, die in Ihrem Browser läuft. Sie werden feststellen, dass sich der Browser automatisch aktualisiert hat und die Diagramme sich verändert haben!</li> </ol> <p>Sie können auch versuchen, ESLint und Prettier zu verwenden — versuchen Sie absichtlich, viel von dem Leerraum aus einer Ihrer Dateien zu entfernen und führen Sie Prettier darauf aus, um es zu bereinigen, oder führen Sie einen Syntaxfehler in eine Ihrer JavaScript-Dateien ein und sehen Sie, welche Fehler ESLint Ihnen gibt, wenn Sie den <code>eslint</code> Befehl ausführen, oder in Ihrem Editor.</p></div></section><section aria-labelledby="zusammenfassung"><h2 id="zusammenfassung"><a href="#zusammenfassung">Zusammenfassung</a></h2><div class="section-content"><p>Wir haben in diesem Kapitel einen langen Weg zurückgelegt und eine recht schöne lokale Entwicklungsumgebung aufgebaut, um eine Anwendung zu erstellen.</p> <p>An diesem Punkt der Websoftwareentwicklung würden Sie normalerweise Ihren Code für die Software erstellen, die Sie beabsichtigen zu bauen. Da dieses Modul jedoch darum geht, die Werkzeuge der Webentwicklung zu lernen und nicht den Webentwicklungscode selbst, werden wir Ihnen keinen tatsächlichen Code beibringen — Sie finden diese Informationen im Rest von MDN!</p> <p>Stattdessen haben wir ein Beispielprojekt für Sie geschrieben, mit dem Sie Ihre Werkzeuge verwenden können. Wir empfehlen Ihnen, den Rest des Kapitels mit unserem Beispielcode durchzuarbeiten und dann können Sie versuchen, den Inhalt des <code>src</code> Verzeichnisses durch Ihr eigenes Projekt zu ersetzen und dieses stattdessen auf GitHub Pages zu veröffentlichen! In der Tat wird die Bereitstellung auf GitHub Pages das Endziel des nächsten Kapitels sein!</p> <ul class="prev-next"><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management"><span class="button-wrap"> Zurück </span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools"><span class="button-wrap"> Übersicht: Verständnis von Client-seitigen Web-Entwicklungstools</span></a></li><li><a class="button secondary" href="/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment"><span class="button-wrap"> Weiter </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/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md?plain=1" title="Folder: de/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain (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%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain&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%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fintroducing_complete_toolchain%60%0A*+MDN+URL%3A+https%3A%2F%2Fdeveloper.mozilla.org%2Fde%2Fdocs%2FLearn_web_development%2FExtensions%2FClient-side_tools%2FIntroducing_complete_toolchain%0A*+GitHub+URL%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fblob%2Fmain%2Ffiles%2Fde%2Flearn_web_development%2Fextensions%2Fclient-side_tools%2Fintroducing_complete_toolchain%2Findex.md%0A*+Last+commit%3A+https%3A%2F%2Fgithub.com%2Fmdn%2Ftranslated-content-de%2Fcommit%2Fa9ae3ca8fa861428155736e55ef5dd328d17e589%0A*+Document+last+modified%3A+2025-02-16T00%3A21%3A06.000Z%0A%0A%3C%2Fdetails%3E" title="This will take you to GitHub to file a new issue." target="_blank" rel="noopener noreferrer">Fehler mit dieser Übersetzung melden</a></div></div></aside></main></div></div><footer id="nav-footer" class="page-footer"><div class="page-footer-grid"><div class="page-footer-logo-col"><a href="/" class="mdn-footer-logo" aria-label="MDN homepage"><svg width="48" height="17" viewBox="0 0 48 17" fill="none" xmlns="http://www.w3.org/2000/svg"><title id="mdn-footer-logo-svg">MDN logo</title><path d="M20.04 16.512H15.504V10.416C15.504 9.488 15.344 8.824 15.024 8.424C14.72 8.024 14.264 7.824 13.656 7.824C12.92 7.824 12.384 8.064 12.048 8.544C11.728 9.024 11.568 9.64 11.568 10.392V14.184H13.008V16.512H8.472V10.416C8.472 9.488 8.312 8.824 7.992 8.424C7.688 8.024 7.232 7.824 6.624 7.824C5.872 7.824 5.336 8.064 5.016 8.544C4.696 9.024 4.536 9.64 4.536 10.392V14.184H6.6V16.512H0V14.184H1.44V8.04H0.024V5.688H4.536V7.32C5.224 6.088 6.32 5.472 7.824 5.472C8.608 5.472 9.328 5.664 9.984 6.048C10.64 6.432 11.096 7.016 11.352 7.8C11.992 6.248 13.168 5.472 14.88 5.472C15.856 5.472 16.72 5.776 17.472 6.384C18.224 6.992 18.6 7.936 18.6 9.216V14.184H20.04V16.512Z" fill="currentColor"></path><path d="M33.6714 16.512H29.1354V14.496C28.8314 15.12 28.3834 15.656 27.7914 16.104C27.1994 16.536 26.4154 16.752 25.4394 16.752C24.0154 16.752 22.8954 16.264 22.0794 15.288C21.2634 14.312 20.8554 12.984 20.8554 11.304C20.8554 9.688 21.2554 8.312 22.0554 7.176C22.8554 6.04 24.0634 5.472 25.6794 5.472C26.5594 5.472 27.2794 5.648 27.8394 6C28.3994 6.352 28.8314 6.8 29.1354 7.344V2.352H26.9754V0H32.2314V14.184H33.6714V16.512ZM29.1354 11.04V10.776C29.1354 9.88 28.8954 9.184 28.4154 8.688C27.9514 8.176 27.3674 7.92 26.6634 7.92C25.9754 7.92 25.3674 8.176 24.8394 8.688C24.3274 9.2 24.0714 10.008 24.0714 11.112C24.0714 12.152 24.3114 12.944 24.7914 13.488C25.2714 14.032 25.8394 14.304 26.4954 14.304C27.3114 14.304 27.9514 13.96 28.4154 13.272C28.8954 12.584 29.1354 11.84 29.1354 11.04Z" fill="currentColor"></path><path d="M47.9589 16.512H41.9829V14.184H43.4229V10.416C43.4229 9.488 43.2629 8.824 42.9429 8.424C42.6389 8.024 42.1829 7.824 41.5749 7.824C40.8389 7.824 40.2709 8.056 39.8709 8.52C39.4709 8.968 39.2629 9.56 39.2469 10.296V14.184H40.6869V16.512H34.7109V14.184H36.1509V8.04H34.5909V5.688H39.2469V7.344C39.9669 6.096 41.1269 5.472 42.7269 5.472C43.7509 5.472 44.6389 5.776 45.3909 6.384C46.1429 6.992 46.5189 7.936 46.5189 9.216V14.184H47.9589V16.512Z" fill="currentColor"></path></svg></a><p>Your blueprint for a better internet.</p><ul class="social-icons"><li><a href="https://mastodon.social/@mdn" target="_blank" rel="me noopener noreferrer"><span class="icon icon-mastodon"></span><span class="visually-hidden">MDN on Mastodon</span></a></li><li><a href="https://twitter.com/mozdevnet" target="_blank" rel="noopener noreferrer"><span class="icon icon-twitter-x"></span><span class="visually-hidden">MDN on X (formerly Twitter)</span></a></li><li><a href="https://github.com/mdn/" target="_blank" rel="noopener noreferrer"><span class="icon icon-github-mark-small"></span><span class="visually-hidden">MDN on GitHub</span></a></li><li><a href="/en-US/blog/rss.xml" target="_blank"><span class="icon icon-feed"></span><span class="visually-hidden">MDN Blog RSS Feed</span></a></li></ul></div><div class="page-footer-nav-col-1"><h2 class="footer-nav-heading">MDN</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a href="/en-US/about">About</a></li><li class="footer-nav-item"><a href="/en-US/blog/">Blog</a></li><li class="footer-nav-item"><a href="https://www.mozilla.org/en-US/careers/listings/?team=ProdOps" target="_blank" rel="noopener noreferrer">Careers</a></li><li class="footer-nav-item"><a href="/en-US/advertising">Advertise with us</a></li></ul></div><div class="page-footer-nav-col-2"><h2 class="footer-nav-heading">Support</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="https://support.mozilla.org/products/mdn-plus">Product help</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/MDN/Community/Issues">Report an issue</a></li></ul></div><div class="page-footer-nav-col-3"><h2 class="footer-nav-heading">Our communities</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/en-US/community">MDN Community</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="https://discourse.mozilla.org/c/mdn/236" target="_blank" rel="noopener noreferrer">MDN Forum</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/discord" target="_blank" rel="noopener noreferrer">MDN Chat</a></li></ul></div><div class="page-footer-nav-col-4"><h2 class="footer-nav-heading">Developers</h2><ul class="footer-nav-list"><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Web">Web Technologies</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/docs/Learn">Learn Web Development</a></li><li class="footer-nav-item"><a class="footer-nav-link" href="/de/plus">MDN Plus</a></li><li class="footer-nav-item"><a href="https://hacks.mozilla.org/" target="_blank" rel="noopener noreferrer">Hacks Blog</a></li></ul></div><div class="page-footer-moz"><a href="https://www.mozilla.org/" class="footer-moz-logo-link" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" width="137" height="32" fill="none" viewBox="0 0 267.431 62.607"><path fill="currentColor" d="m13.913 23.056 5.33 25.356h2.195l5.33-25.356h14.267v38.976h-7.578V29.694h-2.194l-7.264 32.337h-7.343L9.418 29.694H7.223v32.337H-.354V23.056Zm47.137 9.123c9.12 0 14.423 5.385 14.423 15.214s-5.33 15.214-14.423 15.214c-9.12 0-14.423-5.385-14.423-15.214 0-9.855 5.304-15.214 14.423-15.214m0 24.363c4.285 0 6.428-2.196 6.428-7.032v-4.287c0-4.836-2.143-7.032-6.428-7.032s-6.428 2.196-6.428 7.032v4.287c0 4.836 2.143 7.032 6.428 7.032m18.473-.157 15.47-18.01h-15.26v-5.647h24.352v5.646L88.616 56.385h15.704v5.646H79.523Zm29.318-23.657h11.183V62.03h-7.578V38.375h-3.632v-5.646zm3.605-9.672h7.578v5.646h-7.578zm13.17 0h11.21v38.976h-7.578v-33.33h-3.632zm16.801 0H153.6v38.976h-7.577v-33.33h-3.632v-5.646zm29.03 9.123c4.442 0 7.394 2.143 8.231 5.881h2.194v-5.332h9.276v5.646h-3.632v18.011h3.632v5.646h-4.442c-3.135 0-4.834-1.699-4.834-4.836V56.7h-2.194c-.81 3.738-3.789 5.881-8.23 5.881-6.978 0-11.916-5.829-11.916-15.214 0-9.384 4.938-15.187 11.915-15.187m2.3 24.363c4.284 0 6.192-2.196 6.192-7.032v-4.287c0-4.836-1.908-7.032-6.193-7.032-4.18 0-6.193 2.196-6.193 7.032v4.287c0 4.836 2.012 7.032 6.193 7.032m48.34 5.489h-7.577V0h7.577zm6.585-29.643h32.165v-2.196l-21.295-7.634v-6.143l21.295-7.633V6.588h-25.345V0h32.165v12.522l-17.35 5.881V20.6l17.35 5.882v12.521h-38.985zm0-25.801h6.794v6.796h-6.794z"></path></svg></a><ul class="footer-moz-list"><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Website Privacy Notice</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/privacy/websites/#cookies" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Cookies</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/legal/terms/mozilla" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Legal</a></li><li class="footer-moz-item"><a href="https://www.mozilla.org/about/governance/policies/participation/" class="footer-moz-link" target="_blank" rel="noopener noreferrer">Community Participation Guidelines</a></li></ul></div><div class="page-footer-legal"><p id="license" class="page-footer-legal-text">Visit <a href="https://www.mozilla.org" target="_blank" rel="noopener noreferrer">Mozilla Corporation’s</a> not-for-profit parent, the <a target="_blank" rel="noopener noreferrer" href="https://foundation.mozilla.org/">Mozilla Foundation</a>.<br/>Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under <a href="/de/docs/MDN/Writing_guidelines/Attrib_copyright_license">a Creative Commons license</a>.</p></div></div></footer></div><script type="application/json" id="hydration">{"url":"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain","doc":{"body":[{"type":"prose","value":{"id":null,"title":null,"isH3":false,"content":"<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\"><span class=\"button-wrap\"> Übersicht: Verständnis von Client-seitigen Web-Entwicklungstools</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>\n<p>In den letzten Artikeln dieser Serie werden wir Ihr Wissen über Werkzeuge festigen, indem wir Sie durch den Prozess des Aufbaus einer Fallstudien-Werkzeugkette führen. Wir beginnen mit dem Einrichten einer vernünftigen Entwicklungsumgebung und der Implementierung von Transformationstools, bis hin zur tatsächlichen Bereitstellung Ihrer App. In diesem Artikel stellen wir die Fallstudie vor, richten unsere Entwicklungsumgebung ein und konfigurieren unsere Code-Transformationstools.</p>\n<figure class=\"table-container\"><table>\n <tbody>\n <tr>\n <th scope=\"row\">Voraussetzungen:</th>\n <td>\n Vertrautheit mit den Grundlagen der <a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">HTML</a>,\n <a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">CSS</a> und\n <a href=\"/de/docs/Learn_web_development/Core/Scripting\">JavaScript</a> Sprachen.\n </td>\n </tr>\n <tr>\n <th scope=\"row\">Ziel:</th>\n <td>\n Festigung dessen, was wir bisher gelernt haben, indem wir eine vollständige Werkzeugketten-Fallstudie bearbeiten.\n </td>\n </tr>\n </tbody>\n</table></figure>\n<p>Es gibt in der Tat unbegrenzte Kombinationen von Werkzeugen und Möglichkeiten, sie zu nutzen. Was Sie in diesem Artikel und dem nächsten sehen, ist nur <em>eine</em> Möglichkeit, wie die vorgestellten Werkzeuge für ein Projekt verwendet werden können.</p>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nEs ist auch erwähnenswert, dass nicht alle dieser Werkzeuge über die Kommandozeile ausgeführt werden müssen. Viele der heutigen Code-Editoren (wie VS Code) bieten Integrationssupport für eine Vielzahl von Werkzeugen über Plugins.</p>\n</div>"}},{"type":"prose","value":{"id":"einführung_in_unsere_fallstudie","title":"Einführung in unsere Fallstudie","isH3":false,"content":"<p>Die Werkzeugkette, die wir in diesem Artikel erstellen, wird verwendet, um eine Mini-Website zu erstellen und bereitzustellen, die Daten über das <a href=\"https://github.com/mdn/content\" class=\"external\" target=\"_blank\">mdn/content</a> Repository anzeigt und ihre Daten von der <a href=\"https://docs.github.com/en/rest/metrics/community\" class=\"external\" target=\"_blank\">GitHub API</a> bezieht.</p>"}},{"type":"prose","value":{"id":"verwendete_werkzeuge_in_unserer_werkzeugkette","title":"Verwendete Werkzeuge in unserer Werkzeugkette","isH3":false,"content":"<p>In diesem Artikel werden wir die folgenden Werkzeuge und Funktionen verwenden:</p>\n<ul>\n<li><a href=\"https://react.dev/learn/writing-markup-with-jsx\" class=\"external\" target=\"_blank\">JSX</a>, ein Satz von Syntaxerweiterungen in Verbindung mit <a href=\"https://react.dev/\" class=\"external\" target=\"_blank\">React</a>, der es Ihnen ermöglicht, z. B. Komponentenstrukturen in JavaScript zu definieren. Sie müssen React nicht kennen, um diesem Tutorial zu folgen, aber wir haben es aufgenommen, um Ihnen eine Vorstellung davon zu geben, wie eine nicht-native Websprache in eine Werkzeugkette integriert werden könnte.</li>\n<li>Die neuesten eingebauten JavaScript-Funktionen (zum Zeitpunkt des Schreibens), wie <a href=\"/de/docs/Web/JavaScript/Reference/Statements/import\"><code>import</code></a>.</li>\n<li>Nützliche Entwicklungswerkzeuge wie <a href=\"https://prettier.io/\" class=\"external\" target=\"_blank\">Prettier</a> zum Formatieren und <a href=\"https://eslint.org/\" class=\"external\" target=\"_blank\">ESLint</a> zum Linting.</li>\n<li><a href=\"https://postcss.org/\" class=\"external\" target=\"_blank\">PostCSS</a> um CSS-Verschachtelungsfähigkeiten bereitzustellen.</li>\n<li><a href=\"https://vite.dev/\" class=\"external\" target=\"_blank\">Vite</a> um unseren Code zu kompilieren und zu minimieren und um automatisch eine Menge Konfigurationsdateien zu erstellen.</li>\n<li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">GitHub</a> zum Verwalten unserer Quellcode-Kontrolle und um schließlich unsere Seite (mit GitHub Pages) bereitzustellen.</li>\n</ul>\n<p>Es ist möglich, dass Ihnen nicht alle oben genannten Funktionen und Werkzeuge oder deren Funktionsweise vertraut sind, aber keine Panik — wir werden jedes Teil erklären, während wir diesen Artikel durchgehen.</p>"}},{"type":"prose","value":{"id":"werkzeugketten_und_ihre_inhärente_komplexität","title":"Werkzeugketten und ihre inhärente Komplexität","isH3":false,"content":"<p>Wie bei jeder Kette gilt: Je mehr Glieder Sie in Ihrer Werkzeugkette haben, desto komplexer und potenziell anfälliger ist sie — beispielsweise könnte sie komplexer zu konfigurieren sein und leichter brechen. Umgekehrt gilt: Je weniger Glieder, desto widerstandsfähiger ist die Werkzeugkette.</p>\n<p>Alle Webprojekte werden unterschiedlich sein, und Sie müssen überlegen, welche Teile Ihrer Werkzeugkette notwendig sind und jeden Teil sorgfältig abwägen.</p>\n<p>Die kleinste Werkzeugkette ist eine, die keine Glieder hat. Sie würden das HTML von Hand codieren, \"vanilla JavaScript\" (d. h. ohne Frameworks oder Zwischenlanguages) verwenden und alles manuell auf einen Server zur Bereitstellung hochladen.</p>\n<p>Allerdings profitieren kompliziertere Softwareanforderungen wahrscheinlich von der Nutzung von Werkzeugen, um den Entwicklungsprozess zu vereinfachen. Darüber hinaus sollten Sie Tests durchführen, bevor Sie Ihre Software auf Ihren Produktionsserver bereitstellen, um sicherzustellen, dass sie wie beabsichtigt funktioniert — das klingt bereits nach einer notwendigen Werkzeugkette.</p>\n<p>Für unser Beispielprojekt werden wir eine Werkzeugkette verwenden, die speziell darauf ausgelegt ist, unsere Softwareentwicklung zu unterstützen und die technischen Entscheidungen während der Softwaredesignphase zu tragen. Wir werden jedoch auf nicht notwendiges Werkzeug verzichten, um die Komplexität so gering wie möglich zu halten.</p>"}},{"type":"prose","value":{"id":"überprüfung_der_voraussetzungen","title":"Überprüfung der Voraussetzungen","isH3":false,"content":"<p>Sie sollten den größten Teil der Software bereits installiert haben, wenn Sie die vorherigen Kapitel befolgt haben. Hier ist, was Sie haben sollten, bevor Sie zu den eigentlichen Einrichtungsschritten übergehen. Diese müssen nur einmal durchgeführt werden und Sie müssen diese nicht für zukünftige Projekte wiederholen.</p>"}},{"type":"prose","value":{"id":"erstellen_eines_github-kontos","title":"Erstellen eines GitHub-Kontos","isH3":true,"content":"<p>Neben den Tools, die wir installieren werden und die zu unserer Werkzeugkette beitragen, müssen Sie ein Konto bei GitHub erstellen, wenn Sie das Tutorial vollständig abschließen möchten. Sie können jedoch trotzdem den lokalen Entwicklungsteil ohne es verfolgen. Wie bereits erwähnt, ist GitHub ein Quellcode-Repository-Dienst, der Community-Funktionen wie Fehlerverfolgung, das Verfolgen von Projektveröffentlichungen und vieles mehr bietet. Im nächsten Kapitel werden wir in ein GitHub-Code-Repository einchecken, was einen Kaskadeneffekt auslöst, der (hoffentlich) die gesamte Software ins Web bringt.</p>\n<p>Melden Sie sich bei <a href=\"https://github.com/\" class=\"external\" target=\"_blank\">GitHub</a> an, indem Sie auf der Startseite auf den Link <em>Sign Up</em> klicken, wenn Sie noch kein Konto haben, und folgen Sie den Anweisungen.</p>"}},{"type":"prose","value":{"id":"installation_von_git","title":"Installation von Git","isH3":true,"content":"<p>Wir werden eine weitere Software installieren, git, um uns bei der Versionskontrolle zu unterstützen.</p>\n<p>Es ist möglich, dass Sie schon von \"git\" gehört haben. <a href=\"https://git-scm.com/\" class=\"external\" target=\"_blank\">Git</a> ist derzeit das beliebteste Quellcode-Versionierungstool, das Entwicklern zur Verfügung steht — Versionskontrolle bietet viele Vorteile, wie z.B. eine Möglichkeit zur Sicherung Ihrer Arbeit an einem entfernten Ort und einen Mechanismus, in einem Team am selben Projekt zu arbeiten, ohne Angst zu haben, den Code eines anderen zu überschreiben.</p>\n<p>Es mag für einige offensichtlich sein, aber es sei gesagt: Git ist nicht dasselbe wie GitHub. Git ist das Versionskontrollwerkzeug, während <a href=\"https://github.com/\" class=\"external\" target=\"_blank\">GitHub</a> ein Online-Speicher für Git-Repositories ist (plus eine Reihe nützlicher Werkzeuge für die Arbeit damit). Beachten Sie, dass es, obwohl wir GitHub in diesem Kapitel verwenden, mehrere Alternativen gibt, darunter <a href=\"https://about.gitlab.com/\" class=\"external\" target=\"_blank\">GitLab</a> und <a href=\"https://www.atlassian.com/software/bitbucket\" class=\"external\" target=\"_blank\">Bitbucket</a>, und Sie könnten sogar Ihre eigenen Git-Repositories hosten.</p>\n<p>Die Verwendung von Versionskontrolle in Ihren Projekten und deren Einbindung als Teil der Werkzeugkette wird die Evolution Ihres Codes verwalten. Es bietet eine Möglichkeit, \"Blöcke\" von Arbeit mit Kommentaren wie \"X neues Feature implementiert\" oder \"Bug Z jetzt behoben aufgrund von Y Änderungen\" zu commiten.</p>\n<p>Versionskontrolle kann Ihnen auch erlauben, Ihr Projekt zu \"verzweigen\", d.h. eine separate Version zu erstellen und neue Funktionalitäten auszuprobieren, ohne dass diese Änderungen Ihren ursprünglichen Code betreffen.</p>\n<p>Schließlich kann es Ihnen helfen, Änderungen rückgängig zu machen oder Ihren Code zurückzusetzen auf eine frühere Version \"wann es funktionierte\", falls ein Fehler eingeführt wurde und Sie Schwierigkeiten haben, ihn zu beheben — etwas, das alle Entwickler ab und zu tun müssen!</p>\n<p>Git kann <a href=\"https://git-scm.com/downloads\" class=\"external\" target=\"_blank\">über die Git-SCM-Website heruntergeladen und installiert werden</a> — laden Sie den relevanten Installer für Ihr System herunter, führen Sie ihn aus und folgen Sie den Anweisungen auf dem Bildschirm. Das ist alles, was Sie für den Moment tun müssen.</p>\n<p>Sie können mit Git auf verschiedene Arten interagieren, von der Nutzung der Kommandozeile zum Ausführen von Befehlen, zur Verwendung einer <a href=\"https://git-scm.com/downloads/guis\" class=\"external\" target=\"_blank\">Git-GUI-App</a> zum Ausführen derselben Befehle durch Drücken von Tasten, oder sogar direkt innerhalb Ihres Code-Editors, wie im folgenden Beispiel in Visual Studio Code gezeigt:</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/vscode-git.png\" alt=\"Git-Integration in VS Code gezeigt\" width=\"1060\" height=\"720\" loading=\"lazy\"></p>"}},{"type":"prose","value":{"id":"bestehendes_projekt","title":"Bestehendes Projekt","isH3":true,"content":"<p>Wir werden auf dem Projekt aufbauen, das wir bereits im vorherigen Kapitel begonnen haben, also stellen Sie sicher, dass Sie die Anweisungen in <a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Package management</a> befolgen, um das Projekt zuerst einzurichten. Zur Wiederholung, hier ist was Sie haben sollten:</p>\n<ul>\n<li>Node.js und npm installiert.</li>\n<li>Ein neues Projekt namens <code>npm-experiment</code> (oder ein anderer Name).</li>\n<li>Vite als Entwicklungsabhängigkeit installiert.</li>\n<li>Das <code>plotly.js-dist-min</code> Paket als Abhängigkeit installiert.</li>\n<li>Einige benutzerdefinierte Skripte in package.json definiert.</li>\n<li>Die Dateien <code>index.html</code> und <code>src/main.jsx</code> erstellt.</li>\n</ul>\n<p>Wie wir in <a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Kapitel 1</a> besprochen haben, wird die Werkzeugkette in die folgenden Phasen strukturiert:</p>\n<ul>\n<li><strong>Entwicklungsumgebung</strong>: Die Werkzeuge, die am grundlegendsten sind, um Ihren Code auszuführen. Dieser Teil wurde im vorherigen Kapitel bereits eingerichtet.</li>\n<li><strong>Sicherheitsnetz</strong>: Die Softwareentwicklungserfahrung stabil und effizienter gestalten. Wir könnten dies auch als unsere Entwicklungsumgebung bezeichnen.</li>\n<li><strong>Transformation</strong>: Werkzeuge, die uns ermöglichen, die neuesten Funktionen einer Sprache (z.B. JavaScript) oder einer ganz anderen Sprache (z.B. JSX oder TypeScript) in unserem Entwicklungsprozess zu verwenden und unseren Code dann so zu transformieren, dass die Produktionsversion auf zahlreichen Browsern ausgeführt wird, sowohl modernen als auch älteren.</li>\n<li><strong>Nach der Entwicklung</strong>: Werkzeuge, die nach Abschluss der Entwicklungsphase ins Spiel kommen, um sicherzustellen, dass Ihre Software ins Web gelangt und weiterhin läuft. In dieser Fallstudie werden wir uns damit beschäftigen, Ihrem Code Tests hinzuzufügen und Ihre App mithilfe von GitHub Pages bereitzustellen, damit sie im gesamten Web verfügbar ist.</li>\n</ul>\n<p>Lassen Sie uns damit anfangen und mit unserer Entwicklungsumgebung beginnen. Wir werden die gleichen Schritte befolgen, wie ein echtes Projekt eingerichtet wird, so dass Sie sich in Zukunft, wenn Sie ein neues Projekt einrichten, auf dieses Kapitel beziehen und die Schritte erneut befolgen können.</p>"}},{"type":"prose","value":{"id":"einrichten_einer_entwicklungsumgebung","title":"Einrichten einer Entwicklungsumgebung","isH3":false,"content":"<p>Dieser Teil der Werkzeugkette wird manchmal als Verzögerung der eigentlichen Arbeit angesehen, und es kann sehr leicht passieren, dass man in ein \"Kaninhole\" von Werkzeugen fällt, in dem man viel Zeit damit verbringt, die Umgebung \"genau richtig\" einzustellen.</p>\n<p>Aber man kann das alltägliche Arbeitsumgebung auf die gleiche Weise sehen. Der Stuhl muss bequem sein und in einer guten Position sein, um bei Ihrer Haltung zu helfen. Sie brauchen Strom, WLAN und USB-Anschlüsse! Möglicherweise gibt es wichtige Dekorationen oder Musik, die bei Ihrem geistigen Zustand helfen — diese sind alle wichtig, um Ihre bestmögliche Arbeit zu leisten, und sie sollten auch nur einmal eingerichtet werden müssen, wenn es richtig gemacht wird.</p>\n<p>In gleicher Weise sollte das Einrichten Ihrer Entwicklungsumgebung, wenn es gut gemacht ist, nur einmal durchgeführt werden müssen und in vielen zukünftigen Projekten wiederverwendbar sein. Sie werden wahrscheinlich diesen Teil der Werkzeugkette halb regulär überprüfen und überlegen, ob es Upgrades oder Änderungen gibt, die Sie einführen sollten, aber das sollte nicht allzu oft erforderlich sein.</p>\n<p>Ihre Werkzeugkette hängt von Ihren eigenen Bedürfnissen ab, aber für dieses Beispiel einer ziemlich vollständigen Werkzeugkette, werden die im Voraus installierten/initialisierten Werkzeuge folgende sein:</p>\n<ul>\n<li>Bibliotheksinstallationswerkzeuge — zum Hinzufügen von Abhängigkeiten.</li>\n<li>Code-Versionskontrolle.</li>\n<li>Code-Aufbereitungswerkzeuge — zum Aufbereiten von JavaScript, CSS und HTML.</li>\n<li>Code-Linting-Werkzeuge — zum Linting unseres Codes.</li>\n</ul>"}},{"type":"prose","value":{"id":"bibliotheksinstallationswerkzeuge","title":"Bibliotheksinstallationswerkzeuge","isH3":true,"content":"<p>Sie haben dies bereits getan, aber zur einfachen Referenz, hier sind die Befehle (ausgeführt im Stammverzeichnis des <code>npm-experiment</code> Verzeichnisses), um ein npm-Paket initialisieren und die notwendigen Abhängigkeiten zu installieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm init\nnpm install --save-dev vite\nnpm install plotly.js-dist-min\n</code></pre></div>"}},{"type":"prose","value":{"id":"code-versionskontrolle","title":"Code-Versionskontrolle","isH3":true,"content":"<p>Geben Sie den folgenden Befehl ein, um die Quellcodekontrollfunktionalität von git im Verzeichnis zu starten:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>git init\n</code></pre></div>\n<p>Standardmäßig verfolgt git die Änderungen aller Dateien. Es gibt jedoch einige generierte Dateien, die wir nicht verfolgen müssen, da sie kein Code sind, den wir geschrieben haben und jederzeit neu generiert werden können. Wir können git anweisen, diese Dateien zu ignorieren, indem wir eine <code>.gitignore</code> Datei im Stammverzeichnis des Projekts erstellen. Fügen Sie folgenden Inhalt in die Datei ein:</p>\n<pre class=\"brush: plain notranslate\">node_modules\ndist\n</pre>"}},{"type":"prose","value":{"id":"code-aufbereitungswerkzeuge","title":"Code-Aufbereitungswerkzeuge","isH3":true,"content":"<p>Wir werden Prettier verwenden, das wir zuerst in Kapitel 2 kennengelernt haben, um unseren Code in diesem Projekt aufzubereiten. Wir werden Prettier erneut in diesem Projekt installieren. Installieren Sie es mit dem folgenden Befehl:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev prettier\n</code></pre></div>\n<p>Beachten Sie erneut, dass wir <code>--save-dev</code> verwenden, um es als Entwicklungsabhängigkeit hinzuzufügen, da wir es nur während der Entwicklung verwenden.</p>\n<p>Wie viele kürzlich entwickelte Werkzeuge kommt auch Prettier mit \"vernünftigen Standardeinstellungen\". Das bedeutet, dass Sie Prettier verwenden können, ohne etwas konfigurieren zu müssen (wenn Sie mit den <a href=\"https://prettier.io/docs/en/configuration.html\" class=\"external\" target=\"_blank\">Standardeinstellungen</a> zufrieden sind). Dies lässt Ihnen mehr Zeit für das Wesentliche: die kreative Arbeit. Zur Demonstration werden wir eine Konfigurationsdatei hinzufügen. Erstellen Sie im Stammverzeichnis Ihres <code>npm-experiment</code> Verzeichnisses eine Datei namens <code>.prettierrc.json</code>. Fügen Sie folgenden Inhalt hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>{\n \"bracketSameLine\": true\n}\n</code></pre></div>\n<p>Mit dieser Einstellung wird Prettier das <code>></code> einer mehrzeiligen HTML (HTML, JSX, Vue, Angular) Eröffnungs-Tag am Ende der letzten Zeile anstatt allein in der nächsten Zeile anzeigen. Dies ist das Format, das MDN selbst verwendet. Sie können mehr über die <a href=\"https://prettier.io/docs/en/configuration.html\" class=\"external\" target=\"_blank\">Konfiguration von Prettier</a> in der Dokumentation erfahren.</p>\n<p>Standardmäßig formatiert Prettier alle von Ihnen angegebenen Dateien. Allerdings müssen wir generierte Dateien nicht formatieren, oder es gibt möglicherweise bestimmten Legacy-Code, den wir nicht anrühren möchten. Wir können Prettier anweisen, diese Dateien immer zu ignorieren, indem wir eine <code>.prettierignore</code> Datei im Stammverzeichnis des Projekts erstellen. Fügen Sie folgenden Inhalt in die Datei ein:</p>\n<pre class=\"brush: plain notranslate\">node_modules\ndist\n</pre>\n<p>Es hat den gleichen Inhalt wie <code>.gitignore</code>, aber in einem realen Projekt möchten Sie möglicherweise andere Dateien für Prettier als für git ignorieren.</p>\n<p>Jetzt, wo Prettier installiert und konfiguriert ist, kann das Aufbereiten und Ausführen von Code über die Kommandozeile erfolgen, z.B.:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npx prettier --write ./index.html\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nIm obigen Befehl verwenden wir Prettier mit dem <code>--write</code> Flag. Prettier versteht dies so, dass es \"wenn es ein Problem in meinem Codeformat gibt, gehen Sie vor und beheben Sie es, dann speichern Sie meine Datei\". Dies ist für unseren Entwicklungsprozess in Ordnung, aber wir können auch <code>prettier</code> ohne das Flag verwenden und es wird nur die Datei überprüfen. Das Überprüfen der Datei (und das nicht Speichern) ist nützlich für Zwecke wie Überprüfungen, die vor einer Veröffentlichung durchgeführt werden — d.h. \"veröffentlichen Sie keinen Code, der nicht richtig formatiert wurde.\"</p>\n</div>\n<p>Sie können auch <code>./index.html</code> durch jede andere Datei oder Ordner ersetzen, um sie zu formatieren. Beispielsweise wird <code>.</code> alles im aktuellen Verzeichnis formatieren. Für den Fall, dass Sie sich die Syntax nicht merken können, können Sie es auch als benutzerdefiniertes Skript in Ihre package.json einfügen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">json</span></div><pre class=\"brush: json notranslate\"><code>\"scripts\": {\n // ...\n \"format\": \"prettier --write .\"\n},\n</code></pre></div>\n<p>Jetzt können Sie Folgendes ausführen, um das Verzeichnis zu formatieren:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm run format\n</code></pre></div>\n<p>Es kann dennoch mühsam sein, den Befehl jedes Mal auszuführen, wenn wir etwas ändern, und es gibt einige Möglichkeiten, diesen Prozess zu automatisieren:</p>\n<ul>\n<li>Verwendung spezieller \"git hooks\", um zu testen, ob der Code vor einem Commit formatiert ist.</li>\n<li>Verwendung von Code-Editor-Plugins, um Prettier-Befehle jedes Mal auszuführen, wenn eine Datei gespeichert wird.</li>\n</ul>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nWas ist ein git Hook? Git (nicht GitHub) bietet ein System, das uns erlaubt, Vor- und Nachaktionen an Aufgaben zu hängen, die wir mit git ausführen (wie das Committen Ihres Codes). Obwohl git Hooks ein wenig zu kompliziert sein können (nach Meinung dieses Autors), können sie sehr mächtig sein, wenn sie eingerichtet sind. Wenn Sie daran interessiert sind, Hooks zu verwenden, ist <a href=\"https://github.com/typicode/husky\" class=\"external\" target=\"_blank\">Husky</a> ein stark vereinfachter Einstieg in die Verwendung von Hooks.</p>\n</div>\n<p>Für VS Code ist eine nützliche Erweiterung der <a href=\"https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode\" class=\"external\" target=\"_blank\">Prettier Code Formatter von Esben Petersen</a>, die VS Code automatisch den Code bei jedem Speichern zu formatieren. Das bedeutet, dass jede Datei im Projekt, an dem wir arbeiten, schön formatiert wird, einschließlich HTML, CSS, JavaScript, JSON, Markdown und mehr. Alles, was der Editor benötigt, ist das Aktivieren von \"Format on Save\".</p>"}},{"type":"prose","value":{"id":"code-linting-werkzeuge","title":"Code-Linting-Werkzeuge","isH3":true,"content":"<p>Linting hilft bei der Code-Qualität, ist aber auch eine Möglichkeit, potenzielle Fehler früher während der Entwicklung zu erkennen. Es ist eine Schlüsselingredienz einer guten Werkzeugkette und eine, die viele Entwicklungsprojekte standardmäßig einbeziehen werden.</p>\n<p>Webentwicklungslinting-Werkzeuge existieren meist für JavaScript (obwohl es einige für HTML und CSS gibt). Das macht Sinn: wenn ein unbekanntes HTML-Element oder ungültige CSS-Eigenschaft verwendet wird, aufgrund der resilienten Natur dieser beiden Sprachen wird nichts Großes brechen. JavaScript ist viel fragiler — das versehentliche Aufrufen einer Funktion, die nicht existiert, führt dazu, dass Ihr JavaScript fehlschlägt; JavaScript-Linting ist daher sehr wichtig, insbesondere für größere Projekte.</p>\n<p>Das Standardwerkzeug für JavaScript-Linting ist <a href=\"https://eslint.org/\" class=\"external\" target=\"_blank\">ESLint</a>. Es ist ein äußerst mächtiges und vielseitiges Werkzeug, kann jedoch knifflig zu konfigurieren sein und es ist leicht möglich, viele Stunden damit zu verbringen, eine Konfiguration <em>genau richtig</em> zu bekommen!</p>\n<p>ESLint wird über npm installiert, also haben Sie wie in Kapitel 2 besprochen die Wahl, dieses Werkzeug lokal oder global zu installieren, aber eine lokale Installation ist sehr zu empfehlen, da Sie für jedes Projekt ohnehin eine Konfigurationsdatei haben müssen. Denken Sie an den Befehl, um auszuführen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev eslint@8 @eslint/js globals\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong> <code>eslint@8</code> installiert die Version 8 von ESLint, während die neueste Version v9 ist. Dies liegt daran, dass <code>eslint-plugin-react</code>, das wir später verwenden werden, <a href=\"https://github.com/jsx-eslint/eslint-plugin-react/issues/3699\" class=\"external\" target=\"_blank\">noch nicht v9 unterstützt</a>.</p>\n</div>\n<p>Das <code>@eslint/js</code> Paket bietet vordefinierte ESLint-Konfigurationen, während das <code>globals</code> Paket eine Liste bekannter globaler Namen in jeder Umgebung bereitstellt. Wir werden sie später in der Konfiguration verwenden. Aus der Box wird ESLint beklagen, dass es die Konfigurationsdatei nicht finden kann, wenn Sie es mit <code>npx eslint</code> ausführen:</p>\n<pre class=\"brush: plain notranslate\">Oops! Something went wrong! :(\n\nESLint: 8.57.0\n\nESLint couldn't find a configuration file. To set up a configuration file for this project, please run:\n\n...\n</pre>\n<p>Hier ist ein minimales Beispiel, das funktioniert (in einer Datei namens <code>eslint.config.js</code>, im Stammverzeichnis des Projekts):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import js from \"@eslint/js\";\nimport globals from \"globals\";\n\nexport default [\n js.configs.recommended,\n {\n ignores: [\"node_modules\", \"dist\"],\n },\n {\n files: [\"**/*.{js,jsx}\"],\n languageOptions: {\n globals: {\n ...globals.browser,\n },\n },\n },\n];\n</code></pre></div>\n<p>Die obenstehende ESLint-Konfiguration:</p>\n<ul>\n<li>Aktiviert die \"empfohlenen\" ESLint-Einstellungen</li>\n<li>Weist ESLint an, die generierten Dateien zu ignorieren, wie wir es bereits bei den anderen Werkzeugen getan haben</li>\n<li>Weist ESLint an, <code>.js</code> und <code>.jsx</code> Dateien beim Linting einzubeziehen</li>\n<li>Informiert ESLint über die Existenz der globalen Variablen des Browsers (verwendet von Lint-Regeln wie <code>no-undef</code> zum Überprüfen nicht existenter Variablen).</li>\n</ul>\n<p>Der ESLint-Parser versteht JSX standardmäßig nicht, und seine empfohlenen Regeln behandeln keine React-spezifischen Semantiken. Daher werden wir etwas mehr Konfiguration hinzufügen, um es zu ermöglichen, JSX und React ordnungsgemäß zu unterstützen. Installieren Sie zuerst <code>eslint-plugin-react</code> und <code>eslint-plugin-react-hooks</code>, die Regeln für korrektes und idiomatisches React bereitstellen:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks\n</code></pre></div>\n<p>Aktualisieren Sie dann die ESLint-Konfigurationsdatei, um die empfohlenen Konfigurationen dieser Plugins einzuschließen, die sowohl die empfohlenen Regeln lädt als auch die Parser-Optionen für JSX setzt:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import js from \"@eslint/js\";\nimport globals from \"globals\";\nimport reactRecommended from \"eslint-plugin-react/configs/recommended.js\";\nimport reactJSXRuntime from \"eslint-plugin-react/configs/jsx-runtime.js\";\nimport reactHooksPlugin from \"eslint-plugin-react-hooks\";\n\nexport default [\n js.configs.recommended,\n {\n ignores: [\"node_modules\", \"dist\"],\n },\n {\n files: [\"**/*.{js,jsx}\"],\n languageOptions: {\n globals: {\n ...globals.browser,\n },\n },\n settings: {\n react: {\n version: \"detect\",\n },\n },\n },\n reactRecommended,\n reactJSXRuntime,\n {\n plugins: {\n \"react-hooks\": reactHooksPlugin,\n },\n rules: reactHooksPlugin.configs.recommended.rules,\n },\n];\n</code></pre></div>\n<div class=\"notecard note\">\n<p><strong>Hinweis:</strong>\nUnsere Konfiguration für <code>eslint-plugin-react-hooks</code> ist etwas umständlich im Vergleich zu den einzeiligen Ergänzungen für <code>eslint-plugin-react</code> Konfigurationen. Dies liegt daran, dass <code>eslint-plugin-react-hooks</code> das neue ESLint-Konfigurationsformat noch nicht unterstützt. Weitere Informationen finden Sie unter <a href=\"https://github.com/facebook/react/issues/28313\" class=\"external\" target=\"_blank\">facebook/react#28313</a>.</p>\n</div>\n<p>Es gibt eine vollständige <a href=\"https://eslint.org/docs/latest/rules/\" class=\"external\" target=\"_blank\">Liste der ESLint-Regeln</a>, die Sie nach Belieben anpassen und konfigurieren können, und viele Unternehmen und Teams haben ihre <a href=\"https://www.npmjs.com/search?q=keywords:eslintconfig\" class=\"external\" target=\"_blank\">eigenen ESLint-Konfigurationen</a> veröffentlicht, die manchmal nützlich sein können, entweder um Inspiration zu bekommen oder um eine auszuwählen, die Ihren eigenen Standards entspricht. Ein Vorwarnung allerdings: ESLint-Konfiguration ist ein sehr tiefes Kaninchenloch!</p>\n<p>Im Interesse der Einfachheit werden wir in diesem Kapitel nicht alle Funktionen von ESLint erkunden, da diese Konfiguration für unser spezielles Projekt und dessen Anforderungen funktioniert. Beachten Sie jedoch, dass, wenn Sie eine Regel verfeinern und durchsetzen möchten, wie Ihr Code aussieht (oder validiert wird), es sehr wahrscheinlich ist, dass es mit der richtigen ESLint-Konfiguration durchgeführt werden kann.</p>\n<p>Wie bei anderen Werkzeugen ist die Code-Editor-Integration für ESLint in der Regel gut und möglicherweise nützlicher, da es uns sofortiges Feedback geben kann, wenn Probleme bei der Arbeit auftauchen:</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/eslint-error.png\" alt=\"ESLint-Fehlerintegration in VS Code gezeigt\" width=\"2044\" height=\"636\" loading=\"lazy\"></p>\n<p>Das ist unser Entwicklungsumgebung-Setup zu diesem Zeitpunkt abgeschlossen. Nun sind wir (fast) bereit, zu codieren.</p>"}},{"type":"prose","value":{"id":"bau-_und_transformationswerkzeuge","title":"Bau- und Transformationswerkzeuge","isH3":false,"content":""}},{"type":"prose","value":{"id":"javascript-transformation","title":"JavaScript-Transformation","isH3":true,"content":"<p>Für dieses Projekt, wie oben erwähnt, wird React verwendet, was auch bedeutet, dass JSX im Quellcode verwendet wird. Das Projekt wird auch die neuesten JavaScript-Funktionen verwenden. Ein unmittelbares Problem ist, dass kein Browser native Unterstützung für JSX bietet; es ist eine Zwischenlanguage, die dazu gedacht ist, in Sprachen übersetzt zu werden, die der Browser in der Produktionsversion versteht. Wenn der Browser versucht, das Quell-JavaScript auszuführen, wird er sofort Fehler anzeigen; das Projekt benötigt ein Bauwerkzeug, um den Quellcode in etwas zu transformieren, das der Browser ohne Probleme konsumieren kann.</p>\n<p>Es gibt eine Reihe von Auswahlmöglichkeiten für Transformationswerkzeuge, und obwohl Babel ein besonders beliebtes ist, werden wir in Vite ein integriertes Plugin verwenden: <code>@vitejs/plugin-react</code>. Installieren Sie es mit dem folgenden Befehl:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install --save-dev @vitejs/plugin-react\n</code></pre></div>\n<p>Wir haben noch keine Vite-Konfiguration! Fügen Sie eine an der Stelle <code>vite.config.js</code> im Stammverzeichnis des Projekts hinzu:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">js</span></div><pre class=\"brush: js notranslate\"><code>import { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\n\nexport default defineConfig({\n plugins: [react()],\n base: \"/npm-experiment/\",\n});\n</code></pre></div>\n<p>Lesen Sie die <a href=\"https://vite.dev/guide/\" class=\"external\" target=\"_blank\">Vite-Dokumentation</a> für weitere Informationen darüber, wie Sie Vite konfigurieren können. Da unsere Seite auf GitHub Pages bereitgestellt wird, wird sie unter <code>https://your-username.github.io/your-repo-name</code> gehostet, also sollten Sie die <code>base</code> Option entsprechend dem Namen Ihres GitHub-Repositorys einstellen — aber Sie können es später immer noch anpassen, wenn wir zur <a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung</a> kommen.</p>"}},{"type":"prose","value":{"id":"css-transformation","title":"CSS-Transformation","isH3":true,"content":"<p>Unser CSS kann auch Syntax verwenden, die von Browsern nicht verstanden wird. Zum Beispiel können Sie eine Syntax verwenden, die erst in den letzten wenigen Browserversionen implementiert wurde, was bedeutet, dass ältere Browser daran scheitern werden und einen gebrochenen Stil anzeigen. Wir können ein Werkzeug verwenden, um unser CSS in ein Format zu transformieren, das alle Browser, die wir anvisieren, verstehen können.</p>\n<p><a href=\"https://postcss.org/\" class=\"external\" target=\"_blank\">PostCSS</a> ist ein CSS-Postprozessor-Werkzeug. Im Vergleich zu Bauwerkzeugen wie <a href=\"https://sass-lang.com/\" class=\"external\" target=\"_blank\">Sass</a> ist PostCSS dazu gedacht, <em>standardmäßiges</em> CSS zu schreiben (das heißt, CSS-Syntax, die eines Tages in Browsern eintreten könnte), während Sass eine eigene Sprache ist, die zu CSS compiliert wird. PostCSS ist näher am Web und hat eine viel geringere Lernkurve. <a href=\"https://vite.dev/guide/features.html#postcss\" class=\"external\" target=\"_blank\">Vite unterstützt PostCSS standardmäßig</a>, also müssen Sie nur <a href=\"https://github.com/postcss/postcss#usage\" class=\"external\" target=\"_blank\">PostCSS konfigurieren</a>, wenn Sie irgendwelche Funktionen kompilieren möchten. Sehen Sie sich den <a href=\"https://preset-env.cssdb.org/features/\" class=\"external\" target=\"_blank\">cssdb</a> für die unterstützten Funktionen an.</p>\n<p>Für unsere Zwecke werden wir eine andere CSS-Transformation demonstrieren: <a href=\"https://vite.dev/guide/features.html#css-modules\" class=\"external\" target=\"_blank\">CSS-Module</a>. Es ist eine der Möglichkeiten, <em>CSS-Modularisierung</em> zu erreichen. Denken Sie daran, dass CSS-Selektoren alle global sind, so dass, wenn Sie einen Klassennamen wie <code>.button</code> haben, alle Elemente mit dem Klassennamen <code>button</code> auf die gleiche Weise gestylt werden. Dies führt oft zu Namenskonflikten — stellen Sie sich vor, alle Ihre JavaScript-Variablen wären im globalen Rahmen definiert! CSS-Module lösen dieses Problem, indem sie den Klassennamen einzigartig für die Seiten machen, die sie verwenden. Um zu verstehen, wie es funktioniert, nachdem Sie den Quellcode heruntergeladen haben, können Sie sehen, wie wir die <code>.module.css</code> Dateien verwenden, und lesen Sie auch die <a href=\"https://github.com/css-modules/css-modules\" class=\"external\" target=\"_blank\">CSS-Module-Dokumentation</a>.</p>\n<p>Obwohl diese Phase unserer Werkzeugkette ziemlich schmerzhaft sein kann, weil wir ein Werkzeug gewählt haben, das absichtlich versucht, die Konfiguration und Komplexität zu reduzieren, gibt es während der Entwicklungsphase tatsächlich nichts weiter, was wir tun müssen. Module werden korrekt importiert, verschachteltes CSS wird korrekt in \"reguläres CSS\" transformiert, und unsere Entwicklung wird nicht durch den Bauprozess behindert.</p>\n<p>Jetzt ist unsere Software bereit, geschrieben zu werden!</p>"}},{"type":"prose","value":{"id":"schreiben_des_quellcodes","title":"Schreiben des Quellcodes","isH3":false,"content":"<p>Jetzt, da wir die vollständige Entwicklungswerkzeugkette eingerichtet haben, ist es normalerweise an der Zeit, echten Code zu schreiben — der Teil, auf den Sie die meiste Zeit investieren sollten. Für unsere Zwecke jedoch werden wir einfach bestehenden Quellcode kopieren und so tun, als hätten wir ihn geschrieben. Wir werden Ihnen nicht beibringen, wie sie funktionieren, da das nicht der Punkt dieses Kapitels ist. Sie sind lediglich hier, um die Werkzeuge auszuführen, damit wir Ihnen beibringen können, wie <em>sie</em> funktionieren.</p>\n<p>Um an die Code-Dateien zu gelangen, besuchen Sie <a href=\"https://github.com/mdn/client-toolchain-example\" class=\"external\" target=\"_blank\">https://github.com/mdn/client-toolchain-example</a> und laden Sie den Inhalt dieses Repos herunter und entpacken Sie ihn irgendwo auf Ihrer lokalen Festplatte. Sie können das gesamte Projekt als Zip-Datei herunterladen, indem Sie <em>Clone or download</em> > <em>Download ZIP</em> auswählen.</p>\n<p><img src=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain/github-repo.png\" alt=\"Das GitHub-Beispiel-Repo\" width=\"1848\" height=\"956\" loading=\"lazy\"></p>\n<p>Kopieren Sie jetzt den Inhalt des <code>src</code> Verzeichnisses des Projekts und verwenden Sie ihn, um Ihr aktuelles <code>src</code> Verzeichnis zu ersetzen. Sie müssen sich keine Sorgen um die anderen Dateien machen.</p>\n<p>Installieren Sie auch einige Abhängigkeiten, die der Quellcode verwendet:</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm install react react-dom @tanstack/react-query\n</code></pre></div>\n<p>Wir haben unsere Projektdateien an Ort und Stelle. Das ist alles, was wir im Moment tun müssen!</p>"}},{"type":"prose","value":{"id":"ausführen_der_transformation","title":"Ausführen der Transformation","isH3":false,"content":"<p>Um mit unserem Projekt zu arbeiten, werden wir den Vite-Server auf der Kommandozeile starten. Im Standardmodus wird er auf Änderungen in Ihrem Code achten und den Server aktualisieren. Das ist schön, weil wir nicht ständig zwischen dem Code und der Kommandozeile hin und her wechseln müssen.</p>\n<ol>\n<li>\n<p>Um Vite im Hintergrund zu starten, gehen Sie zu Ihrem Terminal und führen Sie den folgenden Befehl aus (unter Verwendung des zuvor definierten benutzerdefinierten Skripts):</p>\n<div class=\"code-example\"><div class=\"example-header\"><span class=\"language-name\">bash</span></div><pre class=\"brush: bash notranslate\"><code>npm run dev\n</code></pre></div>\n<p>Sie sollten eine Ausgabe wie diese sehen (sobald die Abhängigkeiten installiert sind):</p>\n<pre class=\"brush: plain notranslate\">> client-toolchain-example@1.0.0 dev\n> vite\n\nRe-optimizing dependencies because lockfile has changed\n\n VITE v5.2.13 ready in 157 ms\n\n ➜ Local: http://localhost:5173/\n ➜ Network: use --host to expose\n ➜ press h + enter to show help\n</pre>\n<p>Der Server läuft nun auf der URL, die ausgegeben wurde (in diesem Fall localhost:5173).</p>\n</li>\n<li>\n<p>Gehen Sie zu dieser URL in Ihrem Browser und Sie werden die Beispiel-App laufen sehen!</p>\n</li>\n</ol>\n<p>Nun können wir einige Änderungen vornehmen und ihre Auswirkungen live beobachten.</p>\n<ol>\n<li>Laden Sie die Datei <code>src/App.jsx</code> in Ihrem bevorzugten Texteditor.</li>\n<li>Ersetzen Sie alle Vorkommen von <code>mdn/content</code> durch Ihr bevorzugtes GitHub-Repository, z.B. <code>facebook/react</code>.</li>\n<li>Speichern Sie die Datei und gehen Sie dann sofort zurück zur App, die in Ihrem Browser läuft. Sie werden feststellen, dass sich der Browser automatisch aktualisiert hat und die Diagramme sich verändert haben!</li>\n</ol>\n<p>Sie können auch versuchen, ESLint und Prettier zu verwenden — versuchen Sie absichtlich, viel von dem Leerraum aus einer Ihrer Dateien zu entfernen und führen Sie Prettier darauf aus, um es zu bereinigen, oder führen Sie einen Syntaxfehler in eine Ihrer JavaScript-Dateien ein und sehen Sie, welche Fehler ESLint Ihnen gibt, wenn Sie den <code>eslint</code> Befehl ausführen, oder in Ihrem Editor.</p>"}},{"type":"prose","value":{"id":"zusammenfassung","title":"Zusammenfassung","isH3":false,"content":"<p>Wir haben in diesem Kapitel einen langen Weg zurückgelegt und eine recht schöne lokale Entwicklungsumgebung aufgebaut, um eine Anwendung zu erstellen.</p>\n<p>An diesem Punkt der Websoftwareentwicklung würden Sie normalerweise Ihren Code für die Software erstellen, die Sie beabsichtigen zu bauen. Da dieses Modul jedoch darum geht, die Werkzeuge der Webentwicklung zu lernen und nicht den Webentwicklungscode selbst, werden wir Ihnen keinen tatsächlichen Code beibringen — Sie finden diese Informationen im Rest von MDN!</p>\n<p>Stattdessen haben wir ein Beispielprojekt für Sie geschrieben, mit dem Sie Ihre Werkzeuge verwenden können. Wir empfehlen Ihnen, den Rest des Kapitels mit unserem Beispielcode durchzuarbeiten und dann können Sie versuchen, den Inhalt des <code>src</code> Verzeichnisses durch Ihr eigenes Projekt zu ersetzen und dieses stattdessen auf GitHub Pages zu veröffentlichen! In der Tat wird die Bereitstellung auf GitHub Pages das Endziel des nächsten Kapitels sein!</p>\n<ul class=\"prev-next\"><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\"><span class=\"button-wrap\"> Zurück </span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\"><span class=\"button-wrap\"> Übersicht: Verständnis von Client-seitigen Web-Entwicklungstools</span></a></li><li><a class=\"button secondary\" href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\"><span class=\"button-wrap\"> Weiter </span></a></li></ul>"}}],"isActive":true,"isMarkdown":true,"isTranslated":true,"locale":"de","mdn_url":"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain","modified":"2025-02-16T00:21:06.000Z","native":"Deutsch","noIndexing":false,"other_translations":[{"locale":"en-US","title":"Introducing a complete toolchain","native":"English (US)"},{"locale":"ja","title":"完全なツールチェーンの導入","native":"日本語"},{"locale":"zh-CN","title":"介绍完整的工具链","native":"中文 (简体)"}],"pageTitle":"Einführung in eine vollständige Werkzeugkette - Lernen Sie Webentwicklung | MDN","parents":[{"uri":"/de/docs/Learn_web_development","title":"Lernen Sie Webentwicklung"},{"uri":"/de/docs/Learn_web_development/Extensions","title":"Erweiterungsmodule"},{"uri":"/de/docs/Learn_web_development/Extensions/Client-side_tools","title":"Verständnis von Client-seitigen Web-Entwicklungstools"},{"uri":"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain","title":"Einführung in eine vollständige Werkzeugkette"}],"popularity":null,"short_title":"Einführung in eine vollständige Werkzeugkette","sidebarHTML":"<ol><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Getting_started\">Einstiegsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup\">Umgebung einrichten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Installing_software\">Installation grundlegender Software</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web\">Surfen im Web</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Code_editors\">Code-Editor</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Dealing_with_files\">Umgang mit Dateien</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Environment_setup/Command_line\">Leitfaden für die Befehlszeilen-Einführung</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website\">Ihre erste Website</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/What_will_your_website_look_like\">Wie wird Ihre Website aussehen?</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Creating_the_content\">HTML: Erstellen der Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Styling_the_content\">CSS: Gestaltung des Inhalts</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Adding_interactivity\">JavaScript: Interaktivität hinzufügen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website\">Veröffentlichen Ihrer Website</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards\">Webstandards</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_the_web_works\">How the web works</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/The_web_standards_model\">Das Modell der Webstandards</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Web_standards/How_browsers_load_websites\">Wie Browser Websites laden</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills\">Soziale Kompetenzen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Research_and_learning\">Forschung und Lernen</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork\">Zusammenarbeit und Teamarbeit</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Workflows_and_processes\">Workflows und Prozesse</a></li><li><a href=\"/de/docs/Learn_web_development/Getting_started/Soft_skills/Job_interviews\">Erfolgreich in Vorstellungsgesprächen</a></li></ol></details></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Core\">Kernmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Structuring_content\">Inhalte mit HTML strukturieren</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Basic_HTML_syntax\">Grundlegende HTML-Syntax</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Webpage_metadata\">Was befindet sich im Kopf? Metadaten einer Webseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Headings_and_paragraphs\">Überschriften und Absätze in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Emphasis_and_importance\">Hervorhebung und Wichtigkeit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Lists\">Listen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_documents\">Strukturierung von Dokumenten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Advanced_text_features\">Erweiterte Textfunktionen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Creating_links\">Erstellen von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Marking_up_a_letter\">Herausforderung: Eine E-Mail korrekt auszeichnen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Structuring_a_page_of_content\">Herausforderung: Strukturierung einer Inhaltsseite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_images\">HTML-Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio\">HTML video und audio</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Mozilla_splash_page\">Herausforderung: Mozilla Splash-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_table_basics\">Grundlagen von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Table_accessibility\">Barrierefreiheit von HTML-Tabellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Planet_data_table\">Herausforderung: Strukturierung einer Planeten-Datentabelle</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/HTML_forms\">Formulare und Schaltflächen in HTML</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML\">Debugging von HTML</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Styling_basics\">Grundlagen des CSS-Stylings</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/What_is_CSS\">Was ist CSS?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Getting_started\">Einstieg in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Styling_a_bio_page\">Herausforderung: Gestaltung einer Biografie-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Basic_selectors\">Grundlagen der CSS-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Attribute_selectors\">Attribut-Selektoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Pseudo_classes_and_elements\">Pseudoklassen und Pseudoelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Combinators\">Kombinatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Box_model\">Das Box-Modell</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts\">Umgang mit Konflikten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Values_and_units\">CSS-Werte und -Einheiten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Sizing\">Größenbestimmung von Elementen in CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Backgrounds_and_borders\">Hintergründe und Rahmen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Overflow\">Überlaufender Inhalt</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Images_media_forms\">Bilder, Medien und Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Tables\">Tabellen stylen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Debugging_CSS\">Debugging CSS</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension\">Herausforderung: Grundlegendes CSS-Verständnis</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper\">Herausforderung: Erstellung eines ansprechenden Briefpapiers</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Styling_basics/Cool-looking_box\">Herausforderung: Eine cool aussehende Box</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Text_styling\">CSS-Textgestaltung</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Fundamentals\">Grundlegendes zur Text- und Schriftgestaltung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_lists\">Listen gestalten</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Styling_links\">Gestaltung von Links</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Web_fonts\">Webfonts</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Text_styling/Typesetting_a_homepage\">Herausforderung: Setzen einer Startseite für eine Gemeinschaftsschule</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/CSS_layout\">CSS-Layout</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Introduction\">Einführung in CSS-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Floats\">Floats</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Positioning\">Platzierung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Flexbox\">Flexbox</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Grids\">CSS-Grid-Layout</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Responsive_Design\">Responsives Design</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Media_queries\">Grundlagen von Media Query</a></li><li><a href=\"/de/docs/Learn_web_development/Core/CSS_layout/Fundamental_Layout_Comprehension\">Herausforderung: Grundlegendes Verständnis von Layouts</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Scripting\">Dynamisches Scripting mit JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_is_JavaScript\">Was ist JavaScript?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/A_first_splash\">Erster Einblick in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/What_went_wrong\">Was ist schiefgelaufen? JavaScript-Fehlerbehebung</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Variables\">Speichern der benötigten Informationen — Variablen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Math\">Grundlegende Mathematik in JavaScript – Zahlen und Operatoren</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Strings\">Umgang mit Text — Zeichenketten in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Useful_string_methods\">Nützliche String-Methoden</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Arrays\">Arrays</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Silly_story_generator\">Herausforderung: Blödsinnige Geschichtengenerator</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Conditionals\">Entscheidungen in Ihrem Code treffen — Konditionalen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Loops\">Code-Schleifen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Functions\">Funktionen — wiederverwendbare Codeblöcke</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Build_your_own_function\">Erstellen Sie Ihre eigene Funktion</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Return_values\">Funktionsrückgabewerte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Events\">Einführung in Ereignisse</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Event_bubbling\">Ereignis-Bubbling</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Image_gallery\">Herausforderung: Bildergalerie</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Object_basics\">JavaScript-Objektgrundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/DOM_scripting\">Einführung in DOM-Scripting</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Network_requests\">Netzwerkanfragen mit JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/JSON\">Arbeiten mit JSON</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Scripting/Debugging_JavaScript\">Debugging JavaScript and handling errors</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries\">JavaScript-Frameworks und -Bibliotheken</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Introduction\">Einführung in client-seitige Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/Main_features\">Hauptmerkmale von Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started\">Erste Schritte mit React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_todo_list_beginning\">Beginn unserer React To-Do-Liste</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_components\">Komponenten in unserer React-App erstellen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_events_state\">React Interaktivität: Events und State</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_interactivity_filtering_conditional_rendering\">Reaktivität in React: Bearbeiten, Filtern, bedingtes Rendern</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_accessibility\">Barrierefreiheit in React</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Frameworks_libraries/React_resources\">React-Ressourcen</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Core/Accessibility\">Barrierefreiheit</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/What_is_accessibility\">Was ist Barrierefreiheit?</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Tooling\">Barrierefreiheitstools und unterstützende Technologien</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/HTML\">HTML: Eine gute Grundlage für Barrierefreiheit</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/CSS_and_JavaScript\">CSS and JavaScript Zugänglichkeitsbest Practices</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/WAI-ARIA_basics\">WAI-ARIA Grundlagen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Multimedia\">Barrierefreie Multimedia-Inhalte</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Mobile\">Mobile Accessibility</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Accessibility/Accessibility_troubleshooting\">Herausforderung: Barrierefreiheits-Fehlerbehebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Core/Design_for_developers\">Design für Entwickler:innen</a></li><li><a href=\"/de/docs/Learn_web_development/Core/Version_control\">Versionskontrolle</a></li><li class=\"section\"><a href=\"/de/docs/Learn_web_development/Extensions\">Erweiterungsmodule</a></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects\">Advanced JavaScript objects</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_prototypes\">Objektprototypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object-oriented_programming\">Objektorientierte Programmierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Classes_in_JavaScript\">Klassen in JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Object_building_practice\">Objektbaupraxis</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Advanced_JavaScript_objects/Adding_bouncing_balls_features\">Herausforderung: Hinzufügen von Funktionen zu unserem hüpfenden Ball-Demo</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs\">Client-seitige Web-APIs</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Introduction\">Einführung in Web-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Video_and_audio_APIs\">Video- und Audio-APIs</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Drawing_graphics\">Zeichnen von Grafiken</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Client-side_storage\">Client-seitiger Speicher</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_APIs/Third_party_APIs\">Third-party APIs</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS\">Asynchrones JavaScript</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing\">Einführung in asynchrones JavaScript</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Promises\">Anleitung zur Verwendung von Promises</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Implementing_a_promise-based_API\">Wie man eine Promise-basierte API implementiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Introducing_workers\">Einführung in Worker</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Async_JS/Sequencing_animations\">Herausforderung: Animationen sequenzieren</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Forms\">Webformulare — Arbeiten mit Benutzerdaten</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Your_first_form\">Ihr erstes Formular</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/How_to_structure_a_web_form\">Wie man ein Webformular strukturiert</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Basic_native_form_controls\">Grundlegende native Formularsteuerungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/HTML5_input_types\">Die HTML5-Eingabetypen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Other_form_controls\">Andere Formularelemente</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Styling_web_forms\">Styling von Webformularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Advanced_form_styling\">Fortgeschrittenes Formular-Styling</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/UI_pseudo-classes\">UI-Pseudoklassen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Form_validation\">Client-seitige Formularvalidierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Forms/Sending_and_retrieving_form_data\">Senden von Formulardaten</a></li></ol></details></li><li class=\"toggle\"><details open=\"\"><summary><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools\">Verständnis für clientseitige Tools</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Overview\">Überblick über Client-seitige Tools</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Package_management\">Grundlagen des Paketmanagements</a></li><li><em><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Introducing_complete_toolchain\" aria-current=\"page\">Einführung in eine vollständige Werkzeugkette</a></em></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Client-side_tools/Deployment\">Bereitstellung unserer App</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side\">Serverseitige Programmierung</a></summary><ol><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps\">Erste Schritte auf der Serverseite</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Introduction\">Einführung in die Server-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Client-Server_overview\">Überblick über Client-Server</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Web_frameworks\">Server-seitige Web-Frameworks</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/First_steps/Website_security\">Website-Sicherheit</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django\">Django Web-Framework (Python)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Introduction\">Einführung in Django</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/development_environment\">Einrichten einer Django-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Tutorial_local_library_website\">Django Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/skeleton_website\">Django-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Models\">Django Tutorial Teil 3: Verwenden von Modellen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Admin_site\">Django Tutorial Teil 4: Die Django Admin-Seite</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Home_page\">Django Tutorial Teil 5: Erstellen unserer Homepage</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Generic_views\">Django Tutorial Teil 6: Generische Listen- und Detailansichten</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Sessions\">Django-Tutorial Teil 7: Sitzungs-Framework</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Authentication\">Django-Tutorial Teil 8: Benutzer-Authentifizierung und -Berechtigungen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Forms\">Django Tutorial Teil 9: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Testing\">Django Tutorial Teil 10: Testen einer Django-Webanwendung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/Deployment\">Django-Tutorial Teil 11: Bereitstellung von Django für die Produktion</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/web_application_security\">Django Webanwendungssicherheit</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Django/django_assessment_blog\">Bewertung: DIY Django Mini-Blog</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs\">Express Web-Framework (Node.js)</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Introduction\">Einführung in Express/Node</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/development_environment\">Einrichten einer Node-Entwicklungsumgebung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Tutorial_local_library_website\">Express Tutorial: Die Website der lokalen Bibliothek</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/skeleton_website\">Express-Tutorial Teil 2: Erstellen einer Skelett-Website</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/mongoose\">Express-Tutorial Teil 3: Verwendung einer Datenbank (mit Mongoose)</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/routes\">Express Tutorial Teil 4: Routen und Controller</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/Displaying_data\">Express Tutorial Teil 5: Bibliotheksdaten anzeigen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/forms\">Express Tutorial Teil 6: Arbeiten mit Formularen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Server-side/Express_Nodejs/deployment\">Express Tutorial Teil 7: Bereitstellung im Produktionsumfeld</a></li></ol></details></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Performance\">Web-Performance</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/why_web_performance\">Das \"Warum\" der Web-Performance</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/What_is_web_performance\">Was ist Web-Performance?</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Perceived_performance\">Wahrgenommene Leistung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Measuring_performance\">Leistungsmessung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/Multimedia\">Multimedia: Bilder</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/video\">Multimedia: video</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/JavaScript\">JavaScript-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/HTML\">HTML-Performance-Optimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/CSS\">CSS-Leistungsoptimierung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Performance/business_case_for_performance\">Der geschäftliche Nutzen der Web-Performance</a></li></ol></details></li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Extensions/Testing\">Tests</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Introduction\">Einführung in das Cross-Browser-Testing</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Testing_strategies\">Strategien zur Durchführung von Tests</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/HTML_and_CSS\">Umgang mit häufigen HTML- und CSS-Problemen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Feature_detection\">Implementierung der Funktionsprüfung</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Automated_testing\">Einführung in automatisiertes Testen</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Testing/Your_own_automation_environment\">Einrichtung Ihrer eigenen Testautomatisierungsumgebung</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Transform_animate\">CSS transformieren und animieren</a></li><li><a href=\"/de/docs/Learn_web_development/Extensions/Security_privacy\">Sicherheit und Datenschutz</a></li><li class=\"section\">Weitere Ressourcen</li><li class=\"toggle\"><details><summary><a href=\"/de/docs/Learn_web_development/Howto\">Häufige Probleme lösen</a></summary><ol><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_HTML_problems\">Häufige HTML-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_CSS_problems\">Häufige CSS-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Solve_JavaScript_problems\">Häufige JavaScript-Probleme lösen</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Web_mechanics\">Webmechanik</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Tools_and_setup\">Tools und Einrichtung</a></li><li><a href=\"/de/docs/Learn_web_development/Howto/Design_and_accessibility\">Design und Barrierefreiheit</a></li></ol></details></li><li><a href=\"/de/docs/Learn_web_development/About\">Über</a></li><li><a href=\"/de/docs/Learn_web_development/Educators\">Ressourcen für Lehrkräfte</a></li><li><a href=\"/de/docs/Learn_web_development/Changelog\">Änderungsprotokoll</a></li></ol>","source":{"folder":"de/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain","github_url":"https://github.com/mdn/translated-content-de/blob/main/files/de/learn_web_development/extensions/client-side_tools/introducing_complete_toolchain/index.md","last_commit_url":"https://github.com/mdn/translated-content-de/commit/a9ae3ca8fa861428155736e55ef5dd328d17e589","filename":"index.md"},"summary":"In den letzten Artikeln dieser Serie werden wir Ihr Wissen über Werkzeuge festigen, indem wir Sie durch den Prozess des Aufbaus einer Fallstudien-Werkzeugkette führen. Wir beginnen mit dem Einrichten einer vernünftigen Entwicklungsumgebung und der Implementierung von Transformationstools, bis hin zur tatsächlichen Bereitstellung Ihrer App. In diesem Artikel stellen wir die Fallstudie vor, richten unsere Entwicklungsumgebung ein und konfigurieren unsere Code-Transformationstools.","title":"Einführung in eine vollständige Werkzeugkette","toc":[{"text":"Einführung in unsere Fallstudie","id":"einführung_in_unsere_fallstudie"},{"text":"Verwendete Werkzeuge in unserer Werkzeugkette","id":"verwendete_werkzeuge_in_unserer_werkzeugkette"},{"text":"Werkzeugketten und ihre inhärente Komplexität","id":"werkzeugketten_und_ihre_inhärente_komplexität"},{"text":"Überprüfung der Voraussetzungen","id":"überprüfung_der_voraussetzungen"},{"text":"Einrichten einer Entwicklungsumgebung","id":"einrichten_einer_entwicklungsumgebung"},{"text":"Bau- und Transformationswerkzeuge","id":"bau-_und_transformationswerkzeuge"},{"text":"Schreiben des Quellcodes","id":"schreiben_des_quellcodes"},{"text":"Ausführen der Transformation","id":"ausführen_der_transformation"},{"text":"Zusammenfassung","id":"zusammenfassung"}],"pageType":"learn-module-chapter"}}</script></body></html>