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: . 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. https://github.com/helgastogova/npm-react-typescript-template Zu den Hauptmerkmalen gehören: : Moderne UI-Entwicklung mit starker Typsicherheit und einem hervorragenden Entwicklererlebnis. React & TypeScript : Komponenten isoliert gestalten, CSS-Konflikte vermeiden und modulares Design ermöglichen. CSS-Module : Sicherstellung der Codequalität durch Einhaltung der Best Practices von JavaScript und React. ESLint : Effizientes Bündeln von React- und TypeScript-Code in einer einzigen Datei zur Verteilung. Rollup : Nutzung von CSS-Funktionen der nächsten Generation und Handhabung der Browserkompatibilität. PostCSS : Überwachen Sie die Größe Ihrer Bibliothek und verhindern Sie versehentliches Aufblähen der Größe. Größenbeschränkung 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 Klasse aus keine Auswirkungen auf andere Klassen in einem anderen Modul. .root TestComponent.module.css .root 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. ESLint In Ihrer haben Sie: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Führen Sie den Linter mit 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. npm run lint Aufrollen 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. Rollup 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 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. PostCSS Sie können PostCSS in der Rollup-Konfiguration oben in Aktion sehen. Mithilfe des 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. rollup-plugin-postcss Größenbeschränkung 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. Size Limit In Ihrer : package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Anschließend können Sie 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. npm run size 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 und kann in npm veröffentlicht werden. dist Veröffentlichung auf npm Stellen Sie sicher, dass Sie das in Ihrer 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: name package.json 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 veröffentlicht und die Benutzer können sie verwenden. Du bist toll! npmjs-Bibliothek Viel Spaß beim Codieren!
