Erstellen effizienter npm-Pakete mit React-, TypeScript- und CSS-Modulen: Ein umfassender Leitfaden

Das Erstellen wiederverwendbarer NPM-Pakete kann Ihren Entwicklungsprozess effizienter und angenehmer machen. In diesem Artikel führen wir Sie durch die Erstellung eines modernen und robusten Projekt-Setups mit React, TypeScript, CSS-Modulen und anderen Tools.

Bevor wir beginnen, finden Sie den Quellcode hier: https://github.com/helgastogova/npm-react-typescript-template . Dieses Repository dient als Basis für die Erstellung von npm-Paketen mit React und TypeScript. Es ist mit einem Build-Prozess und einer Reihe empfohlener Pakete für einen modernen Entwicklungsworkflow vorkonfiguriert.

Zu den Hauptmerkmalen gehören:

1. React & TypeScript : Moderne UI-Entwicklung mit starker Typsicherheit und einem hervorragenden Entwicklererlebnis.
2. CSS-Module : Komponenten isoliert gestalten, CSS-Konflikte vermeiden und modulares Design ermöglichen.
3. ESLint : Sicherstellung der Codequalität durch Einhaltung der Best Practices von JavaScript und React.
4. Rollup : Effizientes Bündeln von React- und TypeScript-Code in einer einzigen Datei zur Verteilung.
5. PostCSS : Nutzung von CSS-Funktionen der nächsten Generation und Handhabung der Browserkompatibilität.
6. Größenbeschränkung : Überwachen Sie die Größe Ihrer Bibliothek und verhindern Sie versehentliches Aufblähen der Größe.

Schauen wir uns die einzelnen Tools genauer an.

CSS-Module

CSS-Module dienen als Garant für Sicherheit im Styling-Chaos. Sie implementieren lokale Festlegungen für Ihre Stile und verhindern so Konflikte und Überschneidungen. Jedes CSS-Modul wird in die Komponente „eingekapselt“, um sicherzustellen, dass die von Ihnen definierten Stile nicht nach außen dringen und sich unbeabsichtigt auf andere Elemente auswirken.

Betrachten Sie diese einfache Komponente, in der wir das CSS-Modul verwenden:

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

Und das zugehörige CSS-Modul:

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

In diesem Fall hat die .root Klasse aus TestComponent.module.css keine Auswirkungen auf andere .root Klassen in einem anderen Modul.

ESLint

ESLint ist wie ein Leuchtturm, der Sie durch ein turbulentes Codemeer führt. Es trägt dazu bei, die Codequalität aufrechtzuerhalten, Fehler zu erkennen und bewährte Codierungspraktiken durchzusetzen, bevor sie zu Problemen führen.

In Ihrer package.json haben Sie:

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

Führen Sie den Linter mit npm run lint aus. ESLint durchsucht Ihre TypeScript-Dateien und warnt Sie vor möglichen Problemen. Dies ist besonders praktisch bei großen Codebasen, bei denen sich leicht kleine Fehler oder Inkonsistenzen einschleichen können.

Aufrollen

Rollup ist der persönliche Fitnesstrainer Ihres Codes. Es nimmt Ihr JavaScript, TypeScript und CSS und bündelt sie in einem schlanken, effizienten Paket, das zur Verteilung bereit ist.

Es ist leicht und schnell, aber der eigentliche Vorteil liegt in seiner Fähigkeit, Bäume zu schütteln. Durch Rollup kann ungenutzter Code aus dem endgültigen Paket entfernt werden, wodurch Ihr Paket so schlank wie möglich wird. Hier ist ein Beispiel dafür, wie Ihre Rollup-Konfiguration aussehen könnte:

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

PostCSS

PostCSS ist wie ein Zeitreisender, der es Ihnen ermöglicht, CSS mit zukünftiger Syntax und Funktionen zu schreiben. Anschließend reist es (sozusagen) in die Vergangenheit und wandelt diese modernen Stile in Code um, den auch ältere Browser verstehen können.

Sie können PostCSS in der Rollup-Konfiguration oben in Aktion sehen. Mithilfe des rollup-plugin-postcss wird Ihr modernes CSS transformiert und in Ihr endgültiges Paket aufgenommen. Das Schöne daran ist, dass Sie CSS mit den neuesten Funktionen schreiben können, ohne sich Gedanken über die Browserkompatibilität machen zu müssen.

Größenbeschränkung

Size Limit ist der stets wachsame Wächter, der dafür sorgt, dass Ihre Bibliothek nicht zu überfüllt wird. Es berechnet die tatsächlichen Kosten Ihrer Bibliothek, indem es sowohl JavaScript als auch CSS hinzufügt, die von Benutzern heruntergeladen werden. Es ist ein wertvolles Tool, das Ihnen hilft, die Größe Ihres Bündels unter Kontrolle zu halten.

In Ihrer package.json :

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

Anschließend können Sie npm run size ausführen, um die Größe Ihres Bundles zu überprüfen. Wenn der von Ihnen festgelegte Grenzwert (in diesem Fall 10 KB) überschritten wird, gibt das Skript einen Fehler aus. Dies ist eine großartige Möglichkeit, um sicherzustellen, dass Sie nicht unwissentlich die Downloadzeiten Ihrer Benutzer verlängern.

Aufstellen

Um mit der Verwendung dieser Vorlage zu beginnen, klonen Sie das Repository:

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

Navigieren Sie in das Verzeichnis:

 cd npm-react-typescript-template

Installieren Sie die Abhängigkeiten:

 npm install

Jetzt können Sie mit der Entwicklung Ihres Pakets beginnen! Der Einstiegspunkt ist src/index.tsx

Erstellen des Pakets

Nachdem Sie Ihre eigene Komponente erstellt haben und bereit sind, Ihr Paket für die Verteilung zu erstellen, führen Sie Folgendes aus:

 npm run build

Ihr erstelltes Paket befindet sich im Verzeichnis dist und kann in npm veröffentlicht werden.

Veröffentlichung auf npm

Stellen Sie sicher, dass Sie das name in Ihrer package.json auf den gewünschten Paketnamen eingestellt haben. Denken Sie außerdem daran, die Versionsnummer vor jeder neuen Veröffentlichung zu aktualisieren. Sobald dies erledigt ist, melden Sie sich bei npm an, indem Sie Folgendes verwenden:

 npm login

Geben Sie Ihren Benutzernamen, Ihr Passwort und Ihre E-Mail-Adresse ein. Sobald Sie angemeldet sind, können Sie Ihr Paket veröffentlichen mit:

 npm publish

Jetzt haben Sie Ihre Komponente in der npmjs-Bibliothek veröffentlicht und die Benutzer können sie verwenden. Du bist toll!

Viel Spaß beim Codieren!