Probleme und Lösungen beim Upgrade auf Storybook 7 (2023)

Märchenbuchist ein Tool für die UI-Entwicklung. Durch die Isolierung von Komponenten wird die Entwicklung schneller und einfacher. Dadurch können wir jeweils nur an einer Komponente arbeiten. Es optimiert die Entwicklung, das Testen und die Dokumentation der Benutzeroberfläche.

Storybook 7 wurde am 3. April 2023 veröffentlicht. Es ist die erste große Veröffentlichung seit über zwei Jahren und mit Abstand die größte überhaupt. Es bringt viele Funktionen mit sich:

• Erstklassiger Vite-Support
• Zero-Config-Unterstützung für NextJS und SvelteKit, unterstützt durch die neue Frameworks-API
• Component Story Format 3 (CSF3) mit verbesserter Typsicherheit
• MDX2-Unterstützung und optimierte Dokumentblöcke
• Aktualisierung des UI-Designs
• Verbesserte Interaktionstests und Testabdeckung
• Ökosystem-CI für bessere Stabilität und reibungslosere Upgrades

Wir waren beiMärchenbuch 6unter Verwendung von React und Webpack, wobei drei Storybooks in einem Monorepo definiert sind, einer Softwareentwicklungsstrategie, bei der der Code für mehrere Projekte im selben Repository gespeichert wird.

Wurzel
├── .Storybook
│ ├── main.js
│ └── Vorschau.jsx
├── node_modules
├── package.json
├── Komponenten
│ ├── .Storybook
│ │ ├── main.js
│ │ ├── Vorschau.jsx
│ │ └── style.css
│ └── package.json
└── Apps
├── .Storybook
│ ├── main.js
│ └── Vorschau.jsx
└── package.json

• Das Repository verfügt über eineWurzel, wo die globalepackage.jsonist definiert undnode_modulessind generiert.Komponentenist ein Projekt für gemeinsame Komponenten undAppsist ein Projekt für eine Unternehmensanwendung, die gemeinsame Komponenten verwendet„@product/components“: „link:../components“. Die Pakete innode_moduleswerden von beiden geteiltKomponentenUndApps.
• Wir haben drei Märchenbücher im Monorepo, dem RooTStorybook, die Komponente Storybook und die App Storybook. Das Wurzel-Storybook ist die Zusammensetzung der beiden anderen Storybooks.
• .märchenbuchist ein Ordner für die Storybook-Konfiguration.main.jsKonfiguriert den Speicherort der Story-Datei, Add-ons sowie benutzerdefinierte Webpack- und Babel-Konfigurationen.Vorschau.jslegt die globale Einstellung für Dekoratoren, Parameter und globale Typen fest.style.cssist einer vondie sechs Möglichkeiten, globale Stile zu definieren.

Die Aufgabe besteht darin, Storybooks auf Version 7 zu aktualisieren. Aufgrund eines komplizierten Storybook-Setups verläuft unsere Migration nicht so reibungslos wie bei früheren Versionen. Wir teilen die Erfahrungen mit der Migration in acht Schritten mit Ihnen und hoffen, dass sie Ihren Anwendungen helfen.

Hier ist die Zusammenfassung der Schritte:

• Schritt 1:Die Anforderungen erfüllen
• Schritt 2:Wählen Sie ein Migrationsskript
• Schritt 3:Führen Sie das Migrationsskript aus
• Schritt 4:Beheben Sie MDX2-Probleme
• Schritt 5:Wandernmain.jsUndVorschau.jszu TypeScript
• Schritt 6:Aktualisieren Sie die Komponente Storybook
• Schritt 7:Aktualisieren Sie die App Storybook
• Schritt 8:Entfernen Sie die Komposition Storybook

Storybook 7 erfordertKnoten 16 oder höher, und IE11 wird nicht mehr unterstützt. Die Zielbrowserversion istChrom >= 100. Es erfordert außerdem Webpack 5.

Storybook 7 unterstützt keine Storys, die verwendenGeschichtenVon. Diese Geschichten können jedoch weiterhin funktionieren, indem sie eingestellt werdenFeatures.storyStoreV7: falschInmain.js, mit der Leistungseinbuße.

Storybook 7 unterstützt MDX1 nicht. Es wird empfohlen, auf MDX2 zu migrieren, MDX1 kann jedoch durch Einstellung weiterhin funktionierenFeatures.legacyMdx1: wahrInmain.js.

Das direkte Schreiben von Geschichten in MDX ist in Storybook 7 veraltet. Es wird empfohlen, Geschichten mit Simple zu dokumentieren.mdxund schreiben Sie tatsächliche Geschichten in CSF3, einer verbesserten Version von CSF2, die das Schreiben von Geschichten mit Objekten erfordert.

Ein Storybook-Migrationsskript erfüllt zwei Aufgaben:

1. Aktualisieren Sie Storybook-Abhängigkeiten auf die neueste Version.
2. Führen Sie eine Sammlung von Automigrationen aus, die Folgendes bewirkt:

• Suchen Sie nach allgemeinen Upgrade-Aufgaben.
• Erläutern Sie die notwendigen Änderungen mit Links zu weiteren Informationen.
• Bitten Sie um Genehmigung und führen Sie dann die Aufgabe aus.

Es stehen drei Migrationsskripte zur Verfügung:automatisch migrieren,Aktualisierung, UndVorabversion.

Skript automatisch migrieren

Hier ist der Befehl zum Ausführen des Automigrate-Skripts:

$ npx storybook@next automatisch migrieren

Es führt standardmäßige Konfigurationsprüfungen durch, erklärt, was möglicherweise veraltet ist, und bietet an, das Problem automatisch zu beheben. Storybook-Pakete werden jedoch nicht aktualisiert.

Upgrade-Skript

Hier ist der Befehl zum Ausführen des Upgrade-Skripts:

$ npx storybook@neuestes Upgrade

Es aktualisiert die Storybook-Pakete auf die neueste stabile Version, führt Vertrauensprüfungen der Paketversionen durch und führt eine automatische Migration aus, um die Konfiguration zu überprüfen.

Vorabversionsskript

Hier ist der Befehl zum Ausführen des Vorabversionsskripts:

$ npx storybook@latest upgrade –prerelease

Storybook wird ständig weiterentwickelt und fast täglich werden Vorabversionen veröffentlicht. Probieren Sie neue Funktionen am besten aus, bevor sie allgemein verfügbar sind.

Das Upgrade-Skript ist die gebräuchlichste Methode zum Aktualisieren von Storybook und wir verwenden es, um den Migrationsprozess zu durchlaufen.

BeiWurzel, führen Sie das Skript aus:

$ npx storybook@neuestes Upgrade

Das Skript läuft in wenigen Schritten.

Installieren Sie Storybook 7-Pakete

Das Upgrade-Skript sucht nach den neuesten Versionen der Storybook-Pakete und zeigt an, was aktualisiert werden muss:

info @storybook/addon-actions ^6.5.16 → ^7.0.11
info @storybook/addon-essentials ^6.5.16 → ^7.0.11
info @storybook/addon-links ^6.5.16 → ^7.0.11
info @storybook/addons ^6.5.16 → ^7.0.11
info @storybook/react ^6.5.16 → ^7.0.11
info @storybook/theming ^6.5.16 → ^7.0.11
info eslint-plugin-storybook ^0.6.11 → ^0.6.12
info storybook-dark-mode ^2.1.1 → ^3.0.0

Es werden mehrere veraltete Pakete gefundenGarn.lockund gibt die Warnmeldungen aus:

WARNUNG Es wurden 5 veraltete Pakete gefunden (relativ zu „@storybook/addon-actions@7.0.11“).
WARNUNG Bitte stellen Sie sicher, dass Ihre Pakete aktualisiert sind, um ein konsistentes Erlebnis zu gewährleisten.
WARNUNG – @storybook/core-common@6.5.16
WARNUNG – @storybook/core-events@6.5.16
WARNUNG – @storybook/core@6.5.16
WARNUNG – @storybook/node-logger@6.5.16
WARNUNG – @storybook/telemetry@6.5.16
🔎 Überprüfung möglicher Migrationen.

DerDevDependenciesInpackage.jsonwerden auf Folgendes aktualisiert:

„devDependencies“: {
„@storybook/addon-actions“: „^7.0.11“,
„@storybook/addon-essentials“: „^7.0.11“,
„@storybook/addon-links“: „^7.0.11“,
„@storybook/addons“: „^7.0.11“,
„@storybook/core“: „^6.5.16“,
„@storybook/react“: „^7.0.11“,
"@storybook/theming": "^7.0.11",
„eslint-plugin-storybook“: „^0.6.12“,
„storybook-dark-mode“: „^3.0.0“
}

Ist Ihnen das aufgefallen?@storybook/coreist nicht aktualisiert? Wir müssen es manuell erledigen.

Installieren Sie die Storybook-Binärdatei und aktualisieren Sie Skripte

Storybook 6 verfügt über aufgerufene BinärdateienStart-MärchenbuchUndBuild-Storybook. In Storybook 7 werden diese Binärdateien entfernt und durch einen neuen CLI-Befehl ersetzt.Bilderbuch.Storybook-Entwicklerbeginnt ein Bilderbuch undBilderbuch bauenbaut ein Bilderbuch auf.

Bilderbuchsucht nach demRahmenFeld hineinmain.js, und verwenden Sie es, um zu bestimmen, wie ein Storybook gestartet oder erstellt werden soll. Der Vorteil dieser Änderung besteht darin, dass es nun möglich ist, mehrere Frameworks in einem Projekt zu installieren, ohne sich Gedanken über Hebeprobleme machen zu müssen.

Das Upgrade-Skript fragt zunächst, ob das installiert werden sollBilderbuchbinär.

🔎 habe eine „Storybook-Binary“-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ──────────────────────────────────────── ────────── ───────────────────╮
│ │
│ Wir haben festgestellt, dass Sie Storybook 7.0.11 ohne die Storybook-Binärdatei von Storybook verwenden. Ab Storybook 7.0 muss es installiert werden. │
│ │
│ │
│ Weitere Informationen: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ─╯
✔ Möchten Sie die „Storybook-Binary“-Migration für Ihr Projekt durchführen? (J/nein)

Typj, und es läuftBilderbuch-BinärdateiMigration.

Bilderbuchhinzugefügt wirdDevDependenciesInpackage.json:

„devDependencies“: {
„storybook“: „^7.0.11“
}

Anschließend fragt das Upgrade-Skript, ob Storybook repariert werden sollSkripteInpackage.json.

🔎 eine 'sb-scripts'-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ──────────────────────────────────────── ────────── ──────────────────────╮
│ │
│ Wir haben festgestellt, dass Sie Storybook 7.0.11 mit Skripten aus früheren Versionen von Storybook verwenden. │
│ Ab Storybook 7 wurden die Binärdateien „start-storybook“ und „build-storybook“ in „storybook dev“ bzw. „storybook build“ geändert. │
│ Um mit Storybook 7.0.11 arbeiten zu können, müssen Ihre Storybook-Skripte für die Verwendung der Binärdatei angepasst werden. Wir können sie für Sie anpassen: │
│ │
│ Build-Storybook │
│ von: │
│ Build-Storybook │
│ zu: │
│ Bilderbuch-Build │
│ │
│ Bilderbuch │
│ von: │
│ start-storybook -p 6006 │
│ zu: │
│ storybook dev -p 6006 │
│ │
│ Falls diese Migration nicht alle Ihre Skripte abdeckt oder Sie weitere Informationen wünschen: │
│ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#start-storybook--build-storybook-binaries-removed │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ────╯
✔ Möchten Sie die „sb-scripts“-Migration für Ihr Projekt ausführen? (J/nein)

Typj, und es läuftSB-SkripteMigration.

SkripteInpackage.jsonwerden aktualisiert, um den neuen CLI-Befehl zu verwenden.

"Skripte": {
„build-storybook“: „storybook build“,
„storybook“: „storybook dev -p 6006“,
}

Konfigurieren Sie Frameworks

Storybook 7 führt das Konzept von Frameworks ein, das die Konfiguration abstrahiertRenderer(Reagieren, Vue usw.),Bauherren(Webpack, Vite usw.) und Standardeinstellungen, um Integrationen einfacher zu machen.

Im Bilderbuch 7,Rahmenvereint aRendererund einBaumeister, mit Ausnahme einiger Pakete, die nicht mehrere Builder enthalten, wie z@storybook/angular, das nur Webpack 5-Unterstützung bietet.

Hier ist die Liste der Frameworks:

• @storybook/angular(wie Storybook 6)
• @storybook/ember(wie Storybook 6)
• @storybook/html-vite
• @storybook/html-webpack5
• @storybook/preact-vite
• @storybook/preact-webpack5
• @storybook/react-vite
• @storybook/react-webpack5
• @storybook/nextjs
• @storybook/server-webpack5
• @storybook/svelte-vite
• @storybook/svelte-webpack5
• @storybook/sveltekit
• @storybook/quick-view
• @storybook/vue-webpack5
• @storybook/vue3-vite
• @storybook/vue3-webpack5
• @storybook/web-components-vite
• @storybook/web-components-webpack5

Das Upgrade-Skript fragt, ob Frameworks eingerichtet werden sollen:

🔎 eine „Neue-Frameworks“-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ──────────────────────────────────────── ────────── ────────────────────────────────────╮
│ │
│ Wir haben festgestellt, dass Ihr Projekt nicht vollständig mit dem neuen Framework-Format 7 von Storybook eingerichtet ist. │
│ │
│ Storybook 7 führte das Konzept von Frameworks ein, das die Konfiguration für Renderer (z. B. React, Vue), Builder (z. B. Webpack, Vite) und │ abstrahiert
│ Standardeinstellungen, um Integrationen zu vereinfachen. │
│ │
│ Ihr Projekt sollte aktualisiert werden, um das Storybook-Framework zu verwenden: @storybook/react-webpack5. Wir können versuchen, dies automatisch für Sie zu erledigen. │
│ │
│ Hier sind die Schritte, die diese Migration zur Migration Ihres Projekts durchführt: │
│ – Fügen Sie die folgenden Abhängigkeiten hinzu: │
│ - * @storybook/react-webpack5 │
│ – Aktualisieren oder geben Sie das Framework-Feld in .storybook/main.js mit dem Wert „@storybook/react-webpack5“ an. │
│ │
│ │
│ Weitere Informationen zum neuen Framework-Format finden Sie unter: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ────────╯
? Möchten Sie die „Neue-Frameworks“-Migration für Ihr Projekt durchführen? › (J/nein)

Typj, und es läuftNeue FrameworksMigration.

Da es sich um eine React-Anwendung handelt,@storybook/react-webpack5hinzugefügt wirdDevDependenciesInpackage.json:

„devDependencies“: {
„@storybook/react-webpack5“: „^7.0.11“
}

main.jswurde mit dem aktualisiertRahmenFeld:

module.exports = {
...
Rahmen: {
Name: „@storybook/react-webpack5“,
Optionen: {}
}
};

Migrieren Sie MDX1 nach MDX2

MDX ermöglicht die Verwendung von JSX innerhalb von Markdown-Inhalten. Es kann Komponenten wie interaktive Diagramme oder Warnungen importieren und in eine Markdown-Datei einbetten. Version 2 von MDX (MDX2) wurde am 1. Februar 2022 veröffentlicht, mit besserer Leistung und verbesserter Syntax. Es unterstützt jede JSX-Laufzeit, einschließlich React, Preact, Vue, Emotion usw.

Storybook 7 verwendet zum Schreiben MDX2 anstelle von MDX1.stories.mdxDateien, die Geschichten definieren und dokumentieren. Das Upgrade-Skript erkennt, dass wir 84 haben.stories.mdxDateien und fragt, ob sie nach MDX2 migriert werden sollen:

🔎 eine 'mdx1to2'-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ──────────────────────────────────────── ───╮
│ │
│ Wir haben 84 „.stories.mdx“-Dateien in Ihrem Projekt gefunden. │
│ │
│ Storybook wurde auf MDX2 (https://mdxjs.com/blog/v2/) aktualisiert, das wichtige Änderungen von MDX1 enthält. │
│ Wir können versuchen, Ihre MDX-Dateien mithilfe einiger gängiger Muster automatisch auf das MDX2-Format zu aktualisieren. │
│ │
│ Nach Abschluss dieser Installation und bevor Sie Storybook starten, empfehlen wir dringend, den MDX2-Abschnitt zu lesen │
│ des 7.0-Migrationsleitfadens. Es enthält nützliche Tools zum Erkennen und Beheben verbleibender Probleme. │
│ │
│ https://storybook.js.org/migration-guides/7.0 │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ───────────────╯
? Möchten Sie die „mdx1to2“-Migration für Ihr Projekt durchführen? › (J/nein)

Typj, und es läuftmdx1to2Migration.

Tatsächlich wurden für diese 84 Dateien keine Änderungen vorgenommen.

Autodocs-Option konfigurieren

Geschichten direkt in MDX schreiben (.stories.mdxDateien) ist in Storybook 7 veraltet. Es wird empfohlen, Storys mit Simple zu dokumentieren.mdxund schreiben Sie Geschichten in CSF3, einer verbesserten Version von CSF2, die das Schreiben von Geschichten mit Objekten erfordert.

Bisher,Dokumenteist eine Registerkarte danebenLeinwand, wodurch jede Story im Dokumentansichtsmodus gerendert wird.

In Storybook7,AutodocsFügt zusätzliche Seitenleisteneinträge für Storys hinzu.

Autodocskann konfiguriert werdenmain.js, und der Ordnername ist konfigurierbar.

module.exports = {
Dokumente: {
Autodocs: wahr,
Standardname: 'Dokumente'
}
};

Autodocskann die folgenden drei Werte annehmen:

• WAHR: Es werden automatisch Dokumente für jede Story-Datei erstellt.
• FALSCH: Es werden nie Dokumente erstellt.
• Schild: Es werden nur Dokumente für Story-Dateien mit erstelltAutodocsSchild. Hier ist ein Beispiel:

Standard exportieren {
Komponente: MyComponent,
Tags: ['autodocs']
}

Das Upgrade-Skript fragt, ob die Einstellung vorgenommen werden sollAutodocszu wahr:

🔎 eine „autodocsTrue“-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ─────────────────────────────╮
│ │
│ Wir haben die Konfiguration von Autodocs (vorherige docsPage) geändert, daher jetzt der Wert: │
│ - docs.autodocs: true – bedeutet, dass für jede CSF-Datei automatisch Dokumente erstellt werden │
│ - docs.autodocs: 'tag' – bedeutet, dass nur Autodocs für CSF-Dateien mit dem Tag „autodocs“ erstellt werden │
│ – docs.autodocs: false – bedeutet, dass niemals Autodocs erstellt werden │
│ │
│ Basierend auf Ihrer vorherigen Konfiguration können wir „docs.autodocs“ so einstellen, dass Ihr altes Verhalten beibehalten wird: │
│ │
│ docs: { autodocs: true } │
│ │
│ Weitere Informationen: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ─╯
? Möchten Sie die „autodocsTrue“-Migration für Ihr Projekt ausführen? › (J/nein)

Typj, und es läuftautodocsTrueMigration.

main.jswurde mit dem aktualisiertDokumenteFeld:

module.exports = {
...
Rahmen: {
Name: „@storybook/react-webpack5“,
Optionen: {}
},
Dokumente: {
Autodocs: wahr
}
};

Erstellen Sie die Babel-Einstellungen von Root

Babel ist eine Toolchain, die hauptsächlich zum Konvertieren von ECMAScript 2015+ und/oder TypeScript-Code in eine abwärtskompatible Version von JavaScript in aktuellen und älteren Browsern oder Umgebungen verwendet wird. Storybook 7 verwendet jetzt ausschließlich den Babel-Modus v7. Standardmäßig,babelModeV7ist eingestellt aufWAHRInmain.js. Da es sich um den Standardwert handelt, ist die Einstellung nicht erforderlich.

module.exports = {
Merkmale: {
babelModeV7: wahr
}
}

Storybook liest die Babel-Konfiguration des Projekts,.babelrc.json,babel.config.js, usw.

Das Upgrade-Skript fragt, ob ein erstellt werden soll.babelrc.jsonDatei mit einigen Grundkonfigurationen und fügen Sie alle erforderlichen Pakete hinzudevDependencies.

🔎 eine „missing-babelrc“-Migration gefunden:
╭ Automigration erkannt ────────────────────────────────────── ───────── ──────────────────────────────────────── ────────── ────────────────────────────────────╮
│ │
│ Wir haben festgestellt, dass Ihr Projekt keine Babel-Konfiguration hat (.babelrc, babel.config.js usw.). │
│ │
│ In Version 6.x stellte Storybook standardmäßig eigene Babel-Einstellungen bereit. Jetzt verwendet Storybook die Babel-Konfiguration Ihres Projekts wieder, mit kleinen, │
│ Inkrementelle Updates von Storybook-Add-ons. │
│ │
│ Wenn Ihr Projekt keine Babel-Konfigurationsdatei hat, können wir für Sie eine generieren, die den 6.x-Standardeinstellungen entspricht. Bedenken Sie, dass dies │ sein kann
│ wirkt sich auf Ihr Projekt aus, wenn es Babel verwendet, und Sie müssen möglicherweise zusätzliche Änderungen basierend auf den Anforderungen Ihres Projekts vornehmen. │
│ │
│ Hinweis: Dieses automatische Setup funktioniert nicht in einem Monorepo. Informationen zum manuellen Einrichten von Babel finden Sie in der Babel-Dokumentation: │
│ https://babeljs.io/docs │
│ │
│ Wir können eine .babelrc.json-Datei mit einigen Grundkonfigurationen erstellen und alle erforderlichen Paket-DevDependencies hinzufügen. │
│ │
│ Weitere Informationen finden Sie im Migrationsleitfaden: │
│ https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#babel-mode-v7-exclusively │
│ │
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ────────╯
? Möchten Sie die „missing-babelrc“-Migration für Ihr Projekt ausführen? › (J/nein)

Typj, und es läuftfehlt-babelrcMigration, die fragt, ob hinzugefügt werden soll@babel/preset-env,@babel/preset-typescript, Und@babel/preset-react.

✔ Möchten Sie die TypeScript-Voreinstellung hinzufügen? … Ja
✔ Möchten Sie die React-Voreinstellung hinzufügen? … Ja
info Datei in root/.babelrc.json schreiben
✔ Sollen wir jetzt die erforderlichen Abhängigkeiten installieren? (@babel/preset-env, @babel/preset-typescript, @babel/preset-react) … ja

• @babel/preset-env: Es ist eine intelligente Voreinstellung, um das neueste JavaScript zu verwenden, ohne Syntaxtransformationen mikroverwalten zu müssen.
• @babel/preset-typescript: Dies ist eine empfohlene Voreinstellung für TypeScript.
• @babel/preset-react: Es handelt sich um eine empfohlene Voreinstellung für React. Ab Babel-Modus v7,@babel/preset-reactbeinhaltet nicht@babel/preset-flow.

Hier ist das generierte.babelrc.json:

{
„sourceType“: „eindeutig“,
„Voreinstellungen“: [
[
„@babel/preset-env“,
{
„Ziele“: {
„Chrom“: 100
}
}
],
„@babel/preset-typescript“,
„@babel/preset-react“
],
"Plugins": []
}

Zusammenfassung und Nachbereitung

Am Ende gibt das Upgrade-Skript eine Zusammenfassung aus:

╭ Migrationsprüfung erfolgreich durchgeführt ───────────────────────────────────── ──────── ──────────────────────────────────────── ────────── ────────────────────────────╮
│ │
│ Erfolgreiche Migrationen: │
│ │
│ Storybook-Binary, SB-Scripts, New-Frameworks, mdx1to2, AutodocsTrue, Missing-Babelrc │
│ │
│ ─────────────────────────────────────── ────────── │
│ │
│ Wenn Sie die Migrationen erneut ausführen möchten, können Sie dies tun, indem Sie „npx storybook@next automigrate“ ausführen │
│ │
│ Die Automigrationen versuchen, allgemeine Muster in Ihrem Projekt zu migrieren, enthalten jedoch möglicherweise nicht alles, was für die Migration auf die neueste Version von │ erforderlich ist
│ Märchenbuch. │
│ │
│ Bitte überprüfen Sie das Änderungsprotokoll und den Migrationsleitfaden für manuelle Migrationen und weitere Informationen: https://storybook.js.org/migration-guides/7.0 │
│ Und wenden Sie sich an Discord, wenn Sie Hilfe benötigen: https://discord.gg/storybook │
│ │
│ ─────────────────────────────────────── ────────── │
│ │
│ Achtung: Die folgenden Abhängigkeiten werden dupliziert, was zu unerwartetem Verhalten führen kann: │
│ │
│ @storybook/core-server: │
│ 7.0.11, 6.5.16 │
│ │
│ @storybook/core-common: │
│ 7.0.11, 6.5.16 │
│ │
│ @storybook/csf-tools: │
│ 7.0.11, 6.5.16 │
│ │
│ @storybook/node-logger: │
│ 7.0.11, 6.5.16 │
│ │
│ @storybook/telemetry: │
│ 7.0.11, 6.5.16 │
│ │
│ Weitere Informationen zu einer bestimmten Abhängigkeit finden Sie, indem Sie „garn why  │“ ausführen
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ────────╯

Dies zeigt die ausgeführten Skripte:Bilderbuch-Binärdatei,SB-Skripte,Neue Frameworks,mdx1to2,autodocsTrue, Undfehlt-babelrc.

Es gibt eine Warnung vor@storybook 6.5.16Pakete, und wir müssen sie entfernen@storybook/coreausDevDependenciesInpackage.json.

„devDependencies“: {
„@storybook/addon-actions“: „^7.0.11“,
„@storybook/addon-essentials“: „^7.0.11“,
„@storybook/addon-links“: „^7.0.11“,
„@storybook/addons“: „^7.0.11“,
„@̶s̶t̶o̶r̶y̶b̶o̶o̶k̶/c̶o̶r̶e̶“:̶ „^̶6̶.5̶.1̶6̶“,
„@storybook/react“: „^7.0.11“,
„@storybook/theming“: „^7.0.11“
}

Erneut ausführennpx storybook@neuestes Upgrade, und überspringen Sie dasmdx1to2Migration:

╭ Migrationsprüfung erfolgreich durchgeführt ───────────────────────────────────── ──────── ──────────────────────────────────────── ────────── ────────────────────────────╮
│ │
│ Übersprungene Migrationen: │
│ │
│ mdx1to2 │
│ │
│ ─────────────────────────────────────── ────────── │
│ │
│ Wenn Sie die Migrationen erneut ausführen möchten, können Sie dies tun, indem Sie „npx storybook@next automigrate“ ausführen │
│ │
│ Die Automigrationen versuchen, allgemeine Muster in Ihrem Projekt zu migrieren, enthalten jedoch möglicherweise nicht alles, was für die Migration auf die neueste Version von │ erforderlich ist
│ Märchenbuch. │
│ │
│ Bitte überprüfen Sie das Änderungsprotokoll und den Migrationsleitfaden für manuelle Migrationen und weitere Informationen: https://storybook.js.org/migration-guides/7.0 │
│ Und wenden Sie sich an Discord, wenn Sie Hilfe benötigen: https://discord.gg/storybook │
│ │
│ ─────────────────────────────────────── ────────── │
│ │
│ Weitere Informationen zu einer bestimmten Abhängigkeit finden Sie, indem Sie „garn why  │“ ausführen
│ │
╰─────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ──────────────────────────────────────── ────────── ────────╯

Die Zusammenfassung zeigt keine weiteren Warnungen an.

Storybook 7 verwendet standardmäßig MDX2 zum Rendern von Dokumenten. MDX1 kann mit der folgenden Konfiguration verwendet werden, wird jedoch nicht empfohlen.

module.exports = {
Merkmale: {
LegacyMdx1: wahr
}
}

Das Upgrade von MDX1 auf MDX2 ist aufgrund vieler Änderungen zwischen den Versionen nicht vollständig automatisiert. Führen Sie den folgenden Befehl aus, um Fehler zu erkennen:

$ npx @hipster/mdx2-issue-checker

Hier sind einige Beispiele dafür, was behoben werden muss:

„Aktionen für {Objektname}“ => „Aktionen für \{Objektname\}“
Die Zahl darf 7 nicht überschreiten (<7) => Die Zahl darf 7 nicht überschreiten (`<7`)
const count = 1; => Export const count = 1;

Diese Warnung gibt es auch während der Migration.

info => Voreinstellungen laden
WARNUNG Das Add-on „@storybook/addon-mdx-gfm“ ist als Migrationsassistent für Storybook 7.0 gedacht; und wird wahrscheinlich in einer zukünftigen Version entfernt.
WARNUNG Es wird empfohlen, dieses Dokument zu lesen:
WARNUNG https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm
WARNEN
WARNUNG Sobald Sie die erforderlichen Änderungen vorgenommen haben, können Sie das Add-on aus Ihrer package.json- und Storybook-Konfiguration entfernen.

@storybook/addon-mdx-gfmist als Migrationsassistent für Storybook 7.0 gedacht und bietet Github Flavored Markdown-Unterstützung für Storybook-Dokumente. Sobald die erforderlichen Änderungen vorgenommen wurden, kann dieses Add-on entfernt werdenpackage.jsonund Storybook-Konfiguration. Die Entfernung muss manuell erfolgen.

Storybook 7 unterstützt TypeScript fürhauptsächlichUndVorschauDateien. Wir migrieren sie manuell zu TypeScripts.

Hier istroot/.storybook/main.ts:

import { StorybookConfig } aus '@storybook/react-webpack5';
const config: StorybookConfig = {
Geschichten: ['./*.story.@(js|jsx|ts|tsx)'],
Addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
Refs: {
Komponenten: {
Titel: 'Komponenten',
URL: 'http://localhost:6007'
},
Apps: {
Titel: 'Apps',
URL: 'http://localhost:6008'
}
},
Rahmen: {
Name: '@storybook/react-webpack5',
Optionen: {fastRefresh: true}
},
Dokumente: {
Autodocs: wahr
}
};

Hier istroot/.storybook/preview.ts:

import { Preview } from '@storybook/react';
const-Vorschau: Vorschau = {
Parameter: {
Aktionen: {argTypesRegex: '^on[A-Z].*'},
Steuerelemente: {
Streichhölzer: {
Farbe: /(Hintergrund|Farbe)$/i,
Datum: /Datum$/,
},
},
}
};
Standardvorschau exportieren;

Zu diesem Zeitpunkt haben wir die Migration abgeschlossenWurzel.

Beim Monorepo müssen wir manuelle Änderungen am Storybook vornehmenroot/components.

Es sind einige Schritte erforderlich, um die Änderungen vorzunehmen.

Benennen Sie main.ts um und ändern Sie es

Umbenennenroot/components/.storybook/main.jsZuroot/components/.storybook/main.ts. Übernehmen Sie die Änderungen inroot/.storybook/main.tsZuroot/components/.storybook/main.ts.

import { StorybookConfig } aus '@storybook/react-webpack5';
// Geschichten finden
const Stories = ...
const config: StorybookConfig = {
Geschichten,
Addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-dark-mode'
],
webpackFinal: async (config) => ({
...config,
devtool: 'eval-source-map'
}),
Rahmen: {
Name: „@storybook/react-webpack5“,
Optionen: { fastRefresh: true },
},
Dokumente: {
Autodocs: wahr
},
Merkmale: {
storyStoreV7: false
}
};
Standardkonfiguration exportieren;

In der obigen KonfigurationstoryStoreV7ist eingestellt aufFALSCH, da wir immer noch Legacy-Geschichten haben, die verwendet werdenGeschichtenVon.

Es gibt immer noch Warnungen, aber diese Geschichten funktionieren vorerst.

In SB7 verwenden wir standardmäßig die nächste Generation „storyStoreV7“, die „storiesOf“ nicht unterstützt.
Weitere Informationen und Einzelheiten zum Deaktivieren finden Sie hier: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev7-enabled-by-default
Unerwartete Verwendung von „storiesOf“: (Zeile 38, Spalte 0).

Benennen Sie „preview.jsx“ um und ändern Sie es

Umbenennenroot/components/.storybook/preview.jsxZuroot/components/.storybook/preview.tsx. Übernehmen Sie die Änderungen inroot/.storybook/preview.tsZuroot/components/.storybook/preview.tsx:

import * as React from 'react';
import { Preview } from '@storybook/react';
import 'antd/dist/antd.css';
import '@ant-design/kompatible/assets/index.css';
import { useDarkMode } aus 'storybook-dark-mode';
importiere ProductThemeProvider aus '../src/styled/ProductThemeProvider';
import './style.css';
const-Vorschau: Vorschau = {
Parameter: {
DarkMode: {
stylePreview: wahr,
classTarget: 'body',
DarkClass: 'DarkClass',
Lichtklasse: 'Lichtklasse',
},
Aktionen: {argTypesRegex: '^on[A-Z].*'},
Steuerelemente: {
erweitert: wahr,
Streichhölzer: {
Farbe: /(Hintergrund|Farbe)$/i,
Datum: /Datum$/,
},
},
Optionen: {
storySort: {
Befehl:
[
// geordnete Geschichten
]
},
},
}
};
Standardvorschau exportieren;
const withThemeProvider = (Story, Kontext) => {
const [someState, useSomeState] = React.useState();
zurückkehren (



);
};
export const decorators = [withThemeProvider];

Aktualisieren Sie Skripte in root/components/package.json

AktualisierenSkripteInroot/components/package.jsonmit dem CLI-Befehl,Bilderbuch, um ein Storybook zu starten und zu erstellen.

"Skripte": {
„storybook“: „../../node_modules/.bin/storybook dev -p 6007“,
„build-storybook“: „../../node_modules/.bin/storybook build“
}

Erstellen Sie .babelrc.json und korrigieren Sie den Build

Wir haben ein Upgrade durchgeführthauptsächlich,Vorschau, UndSkripte.

AusführenGarn-Geschichtenbuchund TypeScript kann nicht kompiliert werden:

ModuleBuildError: Modulerstellung fehlgeschlagen (von ../../node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js):
SyntaxError: root/components/src/components/ProductComp.tsx: Unerwartetes Token, erwartet "," (12:25)
10 | }
11 | `;
> 12 | const getOptions = (Produkte: Produkt[]) => {
| ^

.babelrc.jsonist die Rettung. Kopierenroot/.babelrc.jsonZuroot/components/.babelrc.json.

{
„sourceType“: „eindeutig“,
„Voreinstellungen“: [
[
„@babel/preset-env“,
{
„Ziele“: {
„Chrom“: 100
}
}
],
„@babel/preset-typescript“,
„@babel/preset-react“
],
"Plugins": []
}

Die Babel-Konfiguration hat das TypeScript-Kompilierungsproblem behoben, zeigt jedoch einen neuen Fehler an:

ModuleNotFoundError: Modul nicht gefunden: Fehler: „Stream“ in „root/node_modules/csv-parse/lib/es5“ kann nicht aufgelöst werden.
BREAKING ÄNDERUNG: Webpack < 5 enthielt standardmäßig Polyfills für node.js-Kernmodule.
Dies ist nicht mehr der Fall. Überprüfen Sie, ob Sie dieses Modul benötigen, und konfigurieren Sie ein Polyfill dafür.
Wenn Sie eine Polyfüllung einschließen möchten, müssen Sie Folgendes tun:
- einen Fallback hinzufügen 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
- „stream-browserify“ installieren
Wenn Sie keine Polyfüllung einschließen möchten, können Sie ein leeres Modul wie dieses verwenden:
lösen.fallback: { "stream": false }

Es schlägt die Installation vorstream-browserify. Tatsächlich haben wir esstream-browserifyEingerichtet:

$ Garn, warum stream-browserify
...
=> Gefunden „stream-browserify@3.0.0“
info Gründe, warum dieses Modul existiert
- „webpack#node-libs-browser“ hängt davon ab
– Hochgezogen von „webpack#node-libs-browser#stream-browserify“

Fügen wir hinzustream-browserifyin die Fallback-Konfiguration inmain.ts:

import { StorybookConfig } aus '@storybook/react-webpack5';
// Geschichten finden
const Stories = ...
const config: StorybookConfig = {
Geschichten,
Addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'storybook-dark-mode'
],
webpackFinal: async (config) => {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
stream: require.resolve("stream-browserify"),
});
config.resolve.fallback = Fallback;
zurückkehren ({
...config,
devtool: 'eval-source-map'
})
},
Rahmen: {
Name: „@storybook/react-webpack5“,
Optionen: { fastRefresh: true },
},
Dokumente: {
Autodocs: wahr
},
Merkmale: {
storyStoreV7: false
}
};
Standardkonfiguration exportieren;

Darüber hinaus fügen wir hinzu@types/webpack-env, die Typdefinition für Webpack, zuDevDependenciesInpackage.jsonum weitere Typfehler zu beheben, die auftreten../../node_modules/@storybook/builder-webpack5/node_modules/babel-loader/lib/index.js.

„devDependencies“: {
„@types/webpack-env“: „^1.18.0“
}

DefinierenTypenIntsconfig.jsoneinschließenwebpack-env:

"types": ["node", "webpack-env", ...]

Der Build ist behoben. Die Komponente Storybook startet.

╭─────────────────────────────────────── ────────── ─╮
│ │
│ Storybook 7.0.11 für React-Webpack5 gestartet │
│ 214 ms für Manager und 48 s für Vorschau │
│ │
│ Lokal: http://localhost:6007/ │
│ In Ihrem Netzwerk: http://169.254.1.1:6007/ │
│ │
╰─────────────────────────────────────── ────────── ─╯

Korrigieren Sie Favicon- und Story-Dekoratoren

Gehe zuhttp://localhost:6007, und sehen Sie sich die Komponente Storybook an:

Es gibt zwei Probleme:

• Das Storybook verfügt über kein Favicon, ein kleines Symbol, das einer bestimmten Website oder Webseite zugeordnet ist.
• DerTasteDer Komponente sind keine Stile zugeordnet.

Wir erstellen das Storybook-Favicon unterroot/public/storybook.ico, und hinzufügenroot/components/.storybook/manager-head.htmlum dieses Symbol einzubinden:

Dies behebt das Favicon.

Wir haben Dekorateure eingesetzt, um Stile anzuwendendecorators = [withThemeProvider]. Allerdings wurde die Syntax der Dekoratoren in Storybook 7 geändert.Dekorateurewird zu einem Feld vonroot/components/.storybook/preview.tsx:

const-Vorschau: Vorschau = {
...
Dekorateure: [
(Geschichte, Kontext) => {
const [someState, useSomeState] = React.useState();
zurückkehren (



);
}
],
};

Dadurch wird der Stil der Button-Komponente korrigiert.

Beiroot/components, ausführenGarn-Geschichtenbuch, und es funktioniert gut.

Es gibt noch ein weiteres Problem für die Entwicklung.Fetch-Mock, eine JavaScript-Bibliothek zum Verspotten von HTTP-Anfragen, löst beim Hot-Reload einen Fehler aus:fetch-mock: Keine Fallback-Antwort für GET auf /runtime_main.b83bdb3a8714964066e2.hot-update.json definiert.

Dies kann durch Einstellung behoben werdenfetchMock.config.fallbackToNetwork = true, obwohl die Einstellung für Storybook 6 nicht benötigt wurde.

WeilVorschau.tsxlegt die globale Einstellung für Dekoratoren, Parameter und globale Typen fest, wir fügen die hinzufetchMockEinstellung darin:

import * as React from 'react';
import { Preview } from '@storybook/react';
import 'antd/dist/antd.css';
import '@ant-design/kompatible/assets/index.css';
import { useDarkMode } aus 'storybook-dark-mode';
importiere ProductThemeProvider aus '../src/styled/ProductThemeProvider';
import './style.css';
fetchMock aus 'fetch-mock' importieren;
fetchMock.config.fallbackToNetwork = true;
const-Vorschau: Vorschau = {
Parameter: {
DarkMode: {
stylePreview: wahr,
classTarget: 'body',
DarkClass: 'DarkClass',
Lichtklasse: 'Lichtklasse',
},
Aktionen: {argTypesRegex: '^on[A-Z].*'},
Steuerelemente: {
erweitert: wahr,
Streichhölzer: {
Farbe: /(Hintergrund|Farbe)$/i,
Datum: /Datum$/,
},
},
Optionen: {
storySort: {
Befehl:
[
// geordnete Geschichten
]
},
},
},
Dekorateure: [
(Geschichte, Kontext) => {
const [someState, useSomeState] = React.useState();
zurückkehren (



);
}
],
};
Standardvorschau exportieren;

Jetzt funktioniert es auch gut für den Dev-Modus.

Beim Monorepo müssen wir manuelle Änderungen am Storybook vornehmenroot/apps.

Ähnlich wie bei der Komponente Storybook nehmen wir folgende Änderungen vor:

• Umbenennen und ändernmain.ts+ Fügen Sie die Fallback-Konfiguration hinzu.
• Umbenennen und ändernVorschau.jsx+ Story reparierenDekorateure+ Fügen Sie die hinzufetchMockEinstellung.
• Aktualisieren Sie Skripte inroot/components/package.json.
• Erstellen.babelrc.json.
• Favicon reparieren.
• Korrigieren Sie Story-Dekoratoren.

AusführenGarn-Geschichtenbuch, und wir können TypeScript nicht kompilieren..babelrc.jsonmuss umbenannt werden inbabel.config.json:

{
„sourceType“: „eindeutig“,
„Voreinstellungen“: [
[
„@babel/preset-env“,
{
„Ziele“: {
„Chrom“: 100
}
}
],
„@babel/preset-typescript“,
„@babel/preset-react“
],
"Plugins": []
}

Was sind die Unterschiede zwischen.babelrc.jsonUndbabel.config.json?

• .babelrc.jsonist eine Konfiguration, die nur für einen einzelnen Teil des Projekts gilt.
• babel.config.jsonist eine Konfiguration für Monorepo und wird kompiliertnode_modules.

Unsere Anwendung wird von einem Monorepo gehostet. Seitroot/componentsverhält sich wie ein einzelnes Repository,.babelrc.jsonfunktioniert immer noch. Jedoch,root/appsLinks zu gemeinsamen Komponenten über"@product/components": "link:../components. Es hat mehrerepackage.jsonDateien undbabel.config.jsonsollte stattdessen verwendet werden, obwohl der Inhalt derselbe ist.

Beiroot/apps, ausführenGarn-Geschichtenbuch.

╭─────────────────────────────────────── ────────── ─╮
│ │
│ Storybook 7.0.11 für React-Webpack5 gestartet │
│ 306 ms für Manager und 45 s für Vorschau │
│ │
│ Lokal: http://localhost:6008/ │
│ In Ihrem Netzwerk: http://169.254.1.1:6008/ │
│ │
╰─────────────────────────────────────── ────────── ─╯

Das Storybook funktioniert und so sieht es aus:

Mit der Storybook-Komposition können wir Komponenten aus jedem Storybook durchsuchen, auf das über eine statische URL oder eine lokale URL zugegriffen werden kann.

Hier istroot/.storybook/main.tsdie wir verwenden, um auf zwei lokale Storybooks zu verweisen:

import { StorybookConfig } aus '@storybook/react-webpack5';
const config: StorybookConfig = {
Geschichten: ['./*.story.@(js|jsx|ts|tsx)'],
Addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
Refs: {
Komponenten: {
Titel: 'Komponenten',
URL: 'http://localhost:6007'
},
Apps: {
Titel: 'Apps',
URL: 'http://localhost:6008'
}
},
Rahmen: {
Name: '@storybook/react-webpack5',
Optionen: {fastRefresh: true}
},
Dokumente: {
Autodocs: wahr
}
};

Es funktioniert nicht mit der aktualisierten Komponente Storybook und der App Storybook.

Wir haben das zusammengesetzte Storybook erstellt, um mehrere Storybooks in einem einzigen Bereich zusammenzufassen. Allerdings müssen alle lokalen Storybooks ausgeführt werden. Es ist unbequem und ressourcenintensiv. Wir haben uns entschieden, es zu entfernen, anstatt es zu reparieren.

Wir haben den achtstufigen Migrationsprozess durchlaufen, um mehrere Storybooks in einem Monorepo auf Version 7 zu aktualisieren. Es gibt Probleme und Lösungen. Wir hoffen, dass unsere Erfahrung Ihnen bei Ihren Bewerbungen weiterhilft.

Danke fürs Lesen.

Vielen Dank an Sushmitha Aitha, S Sreeram, Rajasekhar Gandavarapu, Urian Chang und Richard Tom für die Zusammenarbeit mit mir an den Domino-Produkten.

Möchten Sie eine Verbindung herstellen?
Wenn Sie interessiert sind, schauen Sie vorbeiMein Verzeichnis mit Artikeln zur Webentwicklung.
(Video) #1 Absolute Best Way To Cure Yeast & Candida Overgrowth