Starten der React- und TypeScript-Komponentenbibliothek

Die meiste Zeit meiner Arbeit schreibe ich Backends, aber neulich gab es eine Aufgabe, eine Bibliothek von Komponenten auf React zu starten. Vor einigen Jahren, als die React-Version so klein war wie meine Erfahrung in der Front-End-Entwicklung, habe ich mich bereits dem Projektil genähert und es stellte sich als ungeschickt und ungeschickt heraus. Angesichts der Reife des aktuellen React-Ökosystems und meiner wachsenden Erfahrung wurde ich diesmal dazu inspiriert, alles gut und bequem zu machen. Infolgedessen hatte ich eine Lücke für die zukünftige Bibliothek, und um nichts zu vergessen und alles an einem Ort zu sammeln, wurde dieser Spickzettelartikel geschrieben, der auch denen helfen sollte, die nicht wissen, wo sie anfangen sollen. Mal sehen, was ich getan habe.

TL / DR: Code für eine startbereite Bibliothek kann auf github angezeigt werden

Das Problem kann von zwei Seiten angegangen werden:

1. Finden Sie ein fertiges Starter-Kit, eine Boilerplate oder einen Cli-Generator
2. Sammle alles selbst

Die erste Methode eignet sich für einen schnellen Start, wenn Sie sich absolut nicht mit der Konfiguration und Verbindung der erforderlichen Pakete befassen möchten. Diese Option eignet sich auch für Anfänger, die nicht wissen, wo sie anfangen sollen und was der Unterschied zwischen der Bibliothek und der regulären Anwendung sein sollte.

Zuerst ging ich den ersten Weg, aber dann beschloss ich, die Abhängigkeiten zu aktualisieren und ein paar weitere Pakete zu befestigen, und dann regneten alle Arten von Fehlern und Inkonsistenzen. Infolgedessen krempelte er die Ärmel hoch und machte alles selbst. Aber ich werde den Bibliotheksgenerator erwähnen.

Erstellen Sie eine Reaktionsbibliothek

Die meisten Entwickler, die sich mit React beschäftigen, haben von einem praktischen React-Anwendungsstarter gehört, mit dem Sie die Projektkonfiguration minimieren und angemessene Standardeinstellungen bereitstellen können - Create React App (CRA). Im Prinzip könnte es für die Bibliothek verwendet werden ( es gibt einen Artikel über das Habré ). Die Projektstruktur und der Ansatz zur Entwicklung des UI-Kits unterscheiden sich jedoch geringfügig vom üblichen SPA. Wir benötigen ein separates Verzeichnis mit Quellcodes von Komponenten (src), eine Sandbox für deren Entwicklung und Debugging (Beispiel), ein Dokumentations- und Demonstrationstool ("Schaufenster") und ein separates Verzeichnis mit für den Export vorbereiteten Dateien (dist). Außerdem werden Bibliothekskomponenten nicht zur SPA-Anwendung hinzugefügt, sondern über eine Indexdatei exportiert. Als ich darüber nachdachte , machte ich mich auf die Suche und entdeckte schnell ein ähnliches CRA-Paket - Creat React Library (CRL).

CRL ist wie CRA ein benutzerfreundliches CLI-Dienstprogramm. Mit ihm können Sie ein Projekt generieren. Es wird enthalten:

• Rollup zum Erstellen von cjs- und es-Modulen sowie einer Quellzuordnung mit Unterstützung für CSS-Module konfiguriert
• babel für die Transpilation in ES5
• Scherz für Tests
• TypeScript (TS) als Option, die wir verwenden möchten

Um das Bibliotheksprojekt zu generieren, können wir es tun ( npx erlaubt uns, Pakete nicht global zu installieren):

npx create-react-library 

Als Ergebnis des Dienstprogramms erhalten wir ein generiertes und einsatzbereites Projekt der Komponentenbibliothek.

 npx npm-check -u 

tsdx

Vielen Dank an den Benutzer StanEgo , der über eine hervorragende Alternative zu Create React Library - tsdx sprach . Dieses CLI-Dienstprogramm ähnelt auch CRA und erstellt mit einem Befehl die Basis für Ihre Bibliothek mit konfiguriertem Rollup, TS, Prettier, Husky, Jest und React. Und Reagieren ist eine Option. Einfach genug zu tun:

 npx tsdx create mytslib 

Infolgedessen werden die erforderlichen neuen Versionen der Pakete installiert und alle Einstellungen vorgenommen. Holen Sie sich ein CRL-ähnliches Projekt. Der Hauptunterschied zu CRL ist Zero-Config. Das heißt, die Rollup-Konfiguration ist in tsdx vor uns verborgen (genau wie CRA).

Nachdem ich die Dokumentation schnell durchgearbeitet hatte, fand ich nicht die empfohlenen Methoden für eine feinere Konfiguration oder etwas wie Auswerfen wie in CRA. Nachdem ich mir das Thema des Projekts angesehen hatte, stellte ich fest, dass es bisher keine solche Möglichkeit gibt . Bei einigen Projekten kann dies kritisch sein. In diesem Fall müssen Sie ein wenig mit Ihren Händen arbeiten. Wenn Sie es nicht benötigen, ist tsdx eine großartige Möglichkeit, schnell loszulegen.

Übernehmen Sie die Kontrolle selbst

Aber was ist, wenn Sie den zweiten Weg gehen und alles selbst sammeln? Beginnen wir also von vorne. Führen Sie npm init und generieren Sie package.json für die Bibliothek. Fügen Sie dort einige Informationen zu unserem Paket hinzu. Zum Beispiel schreiben wir die Mindestversionen für Node und Npm in das engines Feld. Die gesammelten und exportierten Dateien werden im dist Verzeichnis abgelegt. Wir geben dies im Feld files . Wir erstellen eine Bibliothek mit Reaktionskomponenten und hoffen, dass die Benutzer über die erforderlichen Pakete verfügen. Wir peerDependencies erforderlichen Mindestversionen von peerDependencies und peerDependencies react-dom im Feld peerDependencies .

Installieren Sie nun die React- und React react-dom Pakete und die erforderlichen Typen (da wir Komponenten in TypeScript sägen werden) als devDependencies (wie alle Pakete in diesem Artikel):

 npm install --save-dev react react-dom @types/react @types/react-dom 

Installieren Sie TypeScript:

 npm install --save-dev typescript 

Erstellen wir Konfigurationsdateien für den tsconfig.json und die Tests: tsconfig.json und tsconfig.test.json . Unser target wird in es5 , wir werden sourceMap usw. generieren. Eine vollständige Liste der möglichen Optionen und ihrer Bedeutung finden Sie in der Dokumentation . Vergessen Sie nicht, include Quellverzeichnis in das include , und fügen Sie die node_modules und dist im exclude . In package.json wir im Feld typings , wo die Typen für unsere Bibliothek typings werden sollen - dist/index .

Erstellen Sie das src Verzeichnis für die Quellkomponenten der Bibliothek. Fügen Sie alle möglichen kleinen Dinge hinzu, wie .gitignore . .editorconfig .gitignore , .editorconfig , eine Datei mit einer Lizenz und README.md .

Rollup

Wir werden Rollup für die Montage verwenden, wie von CRL vorgeschlagen. Erforderliche Pakete und Konfiguration, ich habe auch CRL ausspioniert. Im Allgemeinen hörte ich die Meinung, dass Rollup gut für Bibliotheken und Webpack für Anwendungen ist. Ich habe Webpack jedoch nicht konfiguriert (was CRA für mich tut), aber Rollup ist wirklich gut, einfach und schön.

Installieren:

 npm install --save-dev rollup rollup-plugin-babel rollup-plugin-commonjs rollup-plugin-node-resolve rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-typescript2 rollup-plugin-url @svgr/rollup 

package.json in package.json die Felder mit der Verteilung der gesammelten Bibliothekspakete hinzu, wie uns das rollup empfiehlt - pkg.module :

  "main": "dist/index.js", "module": "dist/index.es.js", "jsnext:main": "dist/index.es.js" 

 import typescript from 'rollup-plugin-typescript2'; import commonjs from 'rollup-plugin-commonjs'; import external from 'rollup-plugin-peer-deps-external'; import postcss from 'rollup-plugin-postcss'; import resolve from 'rollup-plugin-node-resolve'; import url from 'rollup-plugin-url'; import svgr from '@svgr/rollup'; import pkg from './package.json'; export default { input: 'src/index.tsx', output: [ { file: pkg.main, format: 'cjs', exports: 'named', sourcemap: true }, { file: pkg.module, format: 'es', exports: 'named', sourcemap: true } ], plugins: [ external(), postcss({ modules: false, extract: true, minimize: true, sourceMap: true }), url(), svgr(), resolve(), typescript({ rollupCommonJSResolveHack: true, clean: true }), commonjs() ] }; 

Die Konfiguration ist eine js-Datei oder vielmehr ein exportiertes Objekt. Geben Sie im input die Datei an, in der die Exporte für unsere Bibliothek registriert sind. output - beschreibt unsere Erwartungen an die Ausgabe - in welchem ​​Modul im Format kompiliert werden soll und wo es abgelegt werden soll.

Fügen Sie im Feld scripts package.json einen Befehl zum Erstellen hinzu ( "build": "rollup -c" ) und starten Sie die Assembly während der Entwicklung im "start": "rollup -c -w && npm run prettier-watch" ( "start": "rollup -c -w && npm run prettier-watch" ). .

Die erste Komponente und Exportdatei

Jetzt schreiben wir die einfachste Reaktionskomponente, um zu überprüfen, wie unsere Baugruppe funktioniert. Jede Komponente in der Bibliothek wird in einem separaten Verzeichnis im übergeordneten Verzeichnis src/components/ExampleComponent - src/components/ExampleComponent . Dieses Verzeichnis enthält alle Dateien, die der Komponente zugeordnet sind - tsx , css , test.tsx usw.
Lassen Sie uns einige tsx für die Komponente und die tsx Datei der Komponente selbst erstellen.

 /** * @class ExampleComponent */ import * as React from 'react'; import './ExampleComponent.css'; export interface Props { /** * Simple text prop **/ text: string; } /** My First component */ export class ExampleComponent extends React.Component<Props> { render() { const { text } = this.props; return ( <div className="test"> Example Component: {text} <p>Coool!</p> </div> ); } } export default ExampleComponent; 

Außerdem müssen Sie in src eine Datei mit Typen erstellen, die Bibliotheken gemeinsam haben, wobei ein Typ für css und svg deklariert wird (siehe CRL).

 /** * Default CSS definition for typescript, * will be overridden with file-specific definitions by rollup */ declare module '*.css' { const content: { [className: string]: string }; export default content; } interface SvgrComponent extends React.FunctionComponent<React.SVGAttributes<SVGElement>> {} declare module '*.svg' { const svgUrl: string; const svgComponent: SvgrComponent; export default svgUrl; export { svgComponent as ReactComponent }; } 

Alle exportierten Komponenten und CSS müssen in der Exportdatei angegeben werden. Wir haben es - src/index.tsx . Wenn einige CSS nicht im Projekt verwendet werden und nicht als Teil der in src/index.tsx importierten src/index.tsx , wird sie aus der Assembly entfernt, was in Ordnung ist.

 import { ExampleComponent, Props } from './ExampleComponent'; import './export.css'; export { ExampleComponent, Props }; 

Jetzt können Sie versuchen, die Bibliothek zu erstellen - npm run build . Infolgedessen startet das rollup und sammelt unsere Bibliothek in Bundles, die wir im dist Verzeichnis finden.

Als nächstes fügen wir einige Tools hinzu, um die Qualität unseres Entwicklungsprozesses und dessen Ergebnis zu verbessern.

Vergessen Sie die Code-Formatierung mit Prettier

Ich hasse es, in einer Codeüberprüfung auf eine Formatierung hinzuweisen, die für ein Projekt nachlässig oder nicht standardisiert ist, geschweige denn darüber zu streiten. Solche Mängel sollten natürlich behoben werden, aber Entwickler sollten sich darauf konzentrieren, was und wie der Code funktioniert und nicht wie er aussieht. Diese Korrekturen sind der erste Kandidat für die Automatisierung. Für diese Aufgabe gibt es ein wunderbares Paket - schöner . Installieren Sie es:

 npm install --save-dev prettier 

Fügen Sie eine Konfiguration hinzu, um die Formatierungsregeln ein wenig zu verfeinern.

 { "tabWidth": 3, "singleQuote": true, "jsxBracketSameLine": true, "arrowParens": "always", "printWidth": 100, "semi": true, "bracketSpacing": true } 

Die Bedeutung der verfügbaren Regeln sehen Sie in der Dokumentation . WebStrom schlägt nach dem Erstellen der Konfigurationsdatei selbst vor, beim Starten der Formatierung über die IDE prettier . Um zu verhindern, dass die Formatierung Zeit verschwendet, fügen Sie das /node_modules und /dist mithilfe der Datei .prettierignore zu den Ausnahmen .prettierignore (das Format ähnelt .gitignore ). Jetzt können Sie prettier indem Sie Formatierungsregeln auf den Quellcode anwenden:

 prettier --write "**/*" 

Um den Befehl nicht jedes Mal explizit mit Ihren Händen auszuführen und um sicherzustellen, dass der Code der anderen Projektentwickler auch prettier formatiert wird, fügen Sie den prettier Lauf am precommit-hook für die als staged markierten Dateien hinzu (über git add ). Dafür brauchen wir zwei Werkzeuge. Erstens ist es hasky , verantwortlich für die Ausführung von Befehlen vor dem Festschreiben , Drücken usw. Und zweitens ist es fusselfrei , wodurch verschiedene Linters für staged Dateien ausgeführt werden können. Wir müssen nur eine Zeile ausführen, um diese Pakete zu liefern und package.json zu package.json :

 npx mrm lint-staged 

Wir können nicht vor dem Festschreiben auf die Formatierung warten, sondern stellen sicher, dass prettier während unserer Arbeit ständig an geänderten Dateien arbeitet. Ja, wir brauchen ein anderes Paket - onchange . Sie können Änderungen an Dateien im Projekt überwachen und sofort den dafür erforderlichen Befehl ausführen. Installieren:

 npm install --save-dev --save-exact onchange 

Dann fügen wir den scripts Feldbefehle in package.json :

 "prettier-watch": "onchange 'src/**/*' -- prettier --write {{changed}}" 

In diesem Zusammenhang können alle Streitigkeiten über die Formatierung im Projekt als abgeschlossen betrachtet werden.

Vermeiden von Fehlern mit ESLint

ESLint ist seit langem ein Standard und findet sich in fast allen js und ts-Projekten. Er wird uns auch helfen. In der ESLint-Konfiguration vertraue ich CRA. Nehmen Sie einfach die erforderlichen Pakete von CRA und schließen Sie sie an unsere Bibliothek an. Fügen Sie außerdem Konfigurationen für TS und prettier (um Konflikte zwischen ESLint und prettier zu vermeiden):

 npm install --save-dev eslint eslint-config-react-app eslint-loader eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks @typescript-eslint/eslint-plugin @typescript-eslint/parser babel-eslint eslint-config-prettier eslint-plugin-prettier 

ESLint mithilfe der Konfigurationsdatei.

 { "extends": [ "plugin:@typescript-eslint/recommended", "react-app", "prettier", "prettier/@typescript-eslint" ], "plugins": [ "@typescript-eslint", "react" ], "rules": { "@typescript-eslint/no-empty-interface": "off", "@typescript-eslint/explicit-function-return-type": "off", "@typescript-eslint/explicit-member-accessibility": "off" } } 

Fügen Sie den Befehl lint - eslint src/**/* --ext .ts,.tsx --fix zum package.json von package.json . Jetzt können Sie eslint bis npm run lint .

Testen mit Scherz

Installieren und konfigurieren Sie Jest , eine Testbibliothek von Facebook, um Komponententests für Bibliothekskomponenten zu schreiben. Da jedoch wir kompilieren TS nicht über babel 7, sondern über tsc, dann müssen wir auch das ts-jest- Paket installieren:

 npm install --save-dev jest ts-jest @types/jest 

Damit Jest Importe von CSS oder anderen Dateien ordnungsgemäß akzeptieren kann, müssen Sie diese durch Mokami ersetzen. Erstellen Sie das Verzeichnis __mocks__ und erstellen Sie dort zwei Dateien.
styleMock.ts :

 module.exports = {}; 

fileMock.ts :

 module.exports = 'test-file-stub'; 

Erstellen Sie nun die Scherzkonfiguration.

 module.exports = { preset: 'ts-jest', testEnvironment: 'node', moduleNameMapper: { '\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.ts', '\\.(gif|ttf|eot|svg)$': '<rootDir>/__mocks__/fileMock.ts' } }; 

Wir werden den einfachsten Test für unsere ExampleComponent in ihr Verzeichnis schreiben.

 import { ExampleComponent } from './ExampleComponent'; describe('ExampleComponent', () => { it('is truthy', () => { expect(ExampleComponent).toBeTruthy(); }); }); 

Fügen Sie den Befehl test - npm run lint && jest zum package.json von package.json . Aus Gründen der Zuverlässigkeit fahren wir auch den Linter. Jetzt können Sie unsere Tests ausführen und sicherstellen, dass sie den npm run test . Damit die Tests während der Montage nicht in die ['src/**/*.test.(tsx|ts)'] , fügen Sie das exclude im Rollup Konfigurations-Plugin zum exclude - ['src/**/*.test.(tsx|ts)'] . Geben Sie die Ausführung von Tests im husky pre-commit hook bevor Sie lint-staged "pre-commit": "npm run test && lint-staged" - "pre-commit": "npm run test && lint-staged" .

Entwerfen, Dokumentieren und Bewundern von Komponenten mit einem Storybook

Jede Bibliothek benötigt eine gute Dokumentation für ihre erfolgreiche und produktive Nutzung. In der Bibliothek der Schnittstellenkomponenten möchten Sie nicht nur darüber lesen, sondern auch sehen, wie sie aussehen. Am besten berühren und ändern Sie sie. Um eine solche Wunschliste zu unterstützen, gibt es verschiedene Lösungen. Ich habe früher einen Styleguidist benutzt . Mit diesem Paket können Sie Dokumentation im Markdown-Format schreiben und Beispiele der beschriebenen React-Komponenten einfügen. Außerdem wird die Dokumentation gesammelt und daraus ein Site-Showcase-Katalog abgerufen, in dem Sie die Komponente finden, die Dokumentation darüber lesen, sich über ihre Parameter informieren und auch einen Zauberstab hineinstecken können.

Diesmal habe ich mich jedoch entschlossen, seinen Konkurrenten - Storybook - genauer anzusehen. Heute scheint es mit seinem Plugin-System leistungsfähiger zu sein. Darüber hinaus entwickelt es sich ständig weiter, hat eine große Community und wird in Kürze auch damit beginnen, seine Dokumentationsseiten mithilfe von Markdown-Dateien zu generieren. Ein weiterer Vorteil des Storybooks ist, dass es sich um eine Sandbox handelt - eine Umgebung für die isolierte Komponentenentwicklung. Dies bedeutet, dass wir für die Komponentenentwicklung keine vollwertigen Beispielanwendungen benötigen (wie CRL vorschlägt). Im Storybook schreiben wir stories - ts-Dateien, in denen wir unsere Komponenten mit einigen Eingabestützen auf spezielle Funktionen übertragen (es ist besser, den Code zu betrachten, um ihn klarer zu machen). Aus diesen stories wird eine Showcase-Anwendung erstellt.

Führen Sie das Skript aus, das das Storybook initialisiert:

 npx -p @storybook/cli sb init 

Freunde dich jetzt mit TS an. Dazu benötigen wir einige weitere Pakete und gleichzeitig werden wir einige nützliche Add-Ons hinzufügen:

 npm install --save-dev awesome-typescript-loader @types/storybook__react @storybook/addon-info react-docgen-typescript-loader @storybook/addon-actions @storybook/addon-knobs @types/storybook__addon-info @types/storybook__addon-knobs webpack-blocks 

Das Skript erstellte ein Verzeichnis mit der storybook Konfiguration - .storybook und ein Beispielverzeichnis, das wir rücksichtslos löschen. Und im Konfigurationsverzeichnis ändern wir die Erweiterungs- addons und die config in ts . Wir fügen der Datei addons.ts Addons addons.ts :

 import '@storybook/addon-actions/register'; import '@storybook/addon-links/register'; import '@storybook/addon-knobs/register'; 

Jetzt müssen Sie dem Storybook mithilfe der Webpack-Konfiguration im Verzeichnis .storybook .

 module.exports = ({ config }) => { config.module.rules.push({ test: /\.(ts|tsx)$/, use: [ { loader: require.resolve('awesome-typescript-loader') }, // Optional { loader: require.resolve('react-docgen-typescript-loader') } ] }); config.resolve.extensions.push('.ts', '.tsx'); return config; }; 

Lassen Sie uns die config.ts Konfiguration ein wenig optimieren und Dekoratoren hinzufügen, um Add-Ons mit all unseren Geschichten zu verbinden.

 import { configure } from '@storybook/react'; import { addDecorator } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { withKnobs } from '@storybook/addon-knobs'; // automatically import all files ending in *.stories.tsx const req = require.context('../src', true, /\.stories\.tsx$/); function loadStories() { req.keys().forEach(req); } configure(loadStories, module); addDecorator(withInfo); addDecorator(withKnobs); 

Wir werden unsere erste story in das Komponentenverzeichnis ExampleComponent

 import * as React from 'react'; import { storiesOf } from '@storybook/react'; import { ExampleComponent } from './ExampleComponent'; import { text } from '@storybook/addon-knobs/react'; const stories = storiesOf('ExampleComponent', module); stories.add('ExampleComponent', () => <ExampleComponent text={text('text', 'Some text')} />, { info: { inline: true }, text: ` ### Notes Simple example component ### Usage ~~~js <ExampleComponent text="Some text" /> ~~~ ` }); 

Beachten Sie nun, dass das Storybook-Initialisierungsskript den Befehl package.json zu package.json . Verwenden Sie es, um das npm run storybook . Das Storybook wird unter http://localhost:6006 zusammengestellt und ausgeführt. Vergessen Sie nicht, der Ausnahme für das typescript in der Rollup Konfiguration 'src/**/*.stories.tsx' .

Wir entwickeln uns

Nachdem Sie sich mit vielen praktischen Werkzeugen umgeben und auf die Arbeit vorbereitet haben, können Sie mit der Entwicklung neuer Komponenten beginnen. Jede Komponente wird in ihrem Verzeichnis in src/components mit dem Namen der Komponente abgelegt. Es enthält alle damit verbundenen Dateien - CSS, die Komponente selbst in der TsX-Datei, Tests, Storys. Wir starten das Storybook, erstellen Storys für die Komponente und schreiben dort Dokumentation dafür. Wir erstellen Tests und Tests. Der Import-Export der fertigen Komponente wird in index.ts .

Darüber hinaus können Sie sich bei npm anmelden und Ihre Bibliothek als neues npm-Paket veröffentlichen. Und Sie können es direkt aus dem Git-Repository von Master- und anderen Zweigen verbinden. Für mein Werkstück können Sie beispielsweise Folgendes tun:

 npm i -s git+https://github.com/jmorozov/react-library-example.git 

Damit in der Consumer-Anwendung der Bibliothek im Verzeichnis node_modules nur der Inhalt des Verzeichnisses dist im zusammengesetzten Zustand vorhanden ist, müssen Sie dem node_modules den Befehl "prepare": "npm run build" hinzufügen "prepare": "npm run build" .

Dank TS funktioniert auch die automatische Vervollständigung in der IDE.

Zusammenfassend

Mitte 2019 können Sie mit praktischen Entwicklungstools ziemlich schnell mit der Entwicklung Ihrer Komponentenbibliothek auf React und TypeScript beginnen. Dieses Ergebnis kann sowohl mit Hilfe eines automatisierten Dienstprogramms als auch im manuellen Modus erzielt werden. Der zweite Weg wird bevorzugt, wenn Sie aktuelle Pakete und mehr Kontrolle benötigen. Die Hauptsache ist, zu wissen, wo man gräbt, und anhand eines Beispiels in diesem Artikel hoffe ich, dass dies etwas einfacher geworden ist.

Hier können Sie auch das resultierende Werkstück aufnehmen.

Unter anderem gebe ich nicht vor, die ultimative Wahrheit zu sein, und beschäftige mich im Allgemeinen mit Front-End, sofern. Sie können alternative Pakete und Konfigurationsoptionen auswählen und Ihre Komponentenbibliothek erfolgreich erstellen. Ich würde mich freuen, wenn Sie Ihre Rezepte in den Kommentaren teilen. Viel Spaß beim Codieren!