Erstellen Sie ein NPM-Paket in React.JS

In diesem Artikel werde ich Sie durch den Prozess der Erstellung und Veröffentlichung eines npm-Pakets für eine React.js-Anwendung führen.

Führen Sie zunächst den folgenden Befehl aus:

npx create-react-library react-loader

Dadurch wird eine grundlegende React.js-Anwendung/ein einfaches React.js-Paket generiert. Nachdem Sie den Befehl ausgeführt haben, sehen Sie eine Projektstruktur wie diese:

im src-Ordner finden Sie eine index.js-Datei.

Sie können Ihre Bibliothekskomponente entweder direkt in der Datei index.js erstellen oder eine neue Komponentendatei im Ordner src erstellen und sie wie folgt aus der Datei index.js exportieren:

Wenn Sie CSS für Ihre Komponente verwenden, müssen Sie es unbedingt in Ihre Komponentendatei importieren.

Wenn Ihr Projekt einen dist-Ordner enthält, löschen Sie ihn als Nächstes. Um zu testen, ob Ihre Komponente ordnungsgemäß funktioniert, navigieren Sie zum Ordner example/src.

In der App.js-Datei importieren Sie Ihre Komponente wie hier gezeigt. Dies ist derselbe Ansatz, den Sie verwenden werden, um diese Bibliothek als npm-Paket in andere Projekte einzubinden.

Um die App auszuführen, führen Sie die folgenden Befehle aus:

CD React-Loader && NPM Start
cd reagieren-loader/example && npm start

Nachdem Sie Ihre Bibliothek getestet haben, ist es Zeit, sie zu veröffentlichen.

Wenn Sie bereits ein Repository für Ihr Projekt eingerichtet haben, übertragen Sie einfach die letzten Änderungen. Andernfalls erstellen Sie ein neues Repository und übertragen Sie Ihre Änderungen.

Sie müssen außerdem eine .npmignore-Datei im Stammverzeichnis Ihres Projekts erstellen, die ähnlich wie eine .gitignore-Datei für NPM funktioniert. Es verhindert, dass bestimmte Dateien und Ordner (wie node_modules, .git, .gitignore usw.) in der NPM-Registrierung veröffentlicht werden.

Nachdem Sie Ihre Änderungen übernommen haben, führen Sie den Befehl npm login aus. Sie werden aufgefordert, NPM in Ihrem Browser zu öffnen, wo Sie sich bei Ihrem Konto anmelden oder registrieren können, wenn Sie noch keins haben. Führen Sie dann npm Publish aus, wodurch Ihr dist-Ordner mit der in Ihrer package.json-Datei angegebenen Version in NPM veröffentlicht wird.

Sobald das Paket veröffentlicht ist, können Sie es auf der NPM-Website anzeigen, indem Sie nach Ihrem Paketnamen suchen oder Ihr Profil besuchen, wo alle Ihre Pakete aufgelistet werden.

Folgen Sie für mehr. Sie finden mich hier

Das obige ist der detaillierte Inhalt vonErstellen Sie ein NPM-Paket in React.JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!