React-Package (Library/Artefakt) mit Vite erstellen und veröffentlichen

Hinweis:
Es ist zur Zeit nicht möglich, direkt aus IntelliJ mit vite ein React-Package zu erstellen.
Deshalb beginnt man mit einem normalen React-Projekt und baut dieses zu einem React-Package um.

Schritt 1: Neues Projekt in IntelliJ anlegen

File → New → Project
Links: Vite auswählen
Name eingeben (z.B. mybargraph)
Framework: React auswählen
Variant: JavaScript (oder TypeScript)
Create
install npm and run? --> no (da sonst die Projektstruktur länger nicht angezeigt wird.)
Projekt wird erstellt.
Danach npm install (wird von schlägt IntelliJ vorgeschlagen).

Schritt 2: `vite.config.js` auf Library Mode umstellen

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
import { libInjectCss } from 'vite-plugin-lib-inject-css'

export default defineConfig({
  plugins: [react(), libInjectCss()],
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.js'),
      name: 'MyBargraph',
      formats: ['es', 'cjs'],
      fileName: (format) => `mybargraph.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: { react: 'React' },
      },
    },
  },
})

Schritt 3: `package.json` anpassen

Wichtig: react und react-dom von dependencies → peerDependencies verschieben, damit sie nicht doppelt im Zielprojekt installiert werden.

{
  "name": "mybargraph",
  "private": false,
  "version": "1.0.0",
  "type": "module",
  "files": [
    "dist"
  ],
  "main": "dist/mybargraph.js",
  "module": "dist/mybargraph.js",
  "exports": {
    ".": {
      "import": "./dist/mybargraph.js"
    }
  },
  ... ab hier Standard...

}

Schritt 4: `src/index.js` als Einstiegspunkt anlegen

Datei src/index.js neu erstellen

export { default } from './components/HorizontalBarGraph.jsx';

Diese Teile werden nicht mehr benötigt.

index.html
public/favicon.svg
public/icons.svg
src/assets
src/App.css
src/App.jsx
src/index.css
src/main.jsx

Schritt 5: Komponente und CSS erstellen

MyBargraph.jsx
MyBargraph.css

Schritt 6: PropTypes installieren (falls noch nicht vorhanden)

Im IntelliJ-Terminal (View → Tool Windows → Terminal):

npm install prop-types --save

Schritt 7: Bauen

Das Ergebnis liegt danach im Ordner dist/.

npm run build

Demo starten im Package selber.

Um die Komponente MyBargraph visuell direkt im Package zu prüfen, braucht es ein paar Ergänzungen.
Wichtig dabei ist, diese Ergänzungen sollen später nicht im Package exportiert werden.

Erstelle auf direkt im Projekt den Ordner demo
Und in diesem Ordner die Dateien
- index.html
- src/main.jsx

Datei index.html:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MyBargraph – Demo</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

Datei src/main.jsx

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';
import MyBargraph from '../../src/components/MyBargraph.jsx';

const App = () => {

    return (
        <div>
            <h1>MyBargraph – Demo</h1>
            <MyBargraph value={30} maxvalue={100} barwidthpx={400} />
        </div>
    );
};

createRoot(document.getElementById('root')).render(<App />);

Ergänze weiter in package.json unter script

"demo": "vite demo",

Damit kannst die Demo im Terminal mit npm run demo starten.

Beispiel: Publizieren auf npmjs.com

Vorbreitung:

Man braucht ein Login auf npmjs.com.
Dort legen Sie auch Ihren User-Namen fest.
Dieser User-Name muss dem Package-Namen vorangestellt werden, damit es eindeutig ist.
Also zBsp @muster/mybargraph statt nur mybargraph.

Für das Veröffentlichen müssen Sie sich auf npmjs.com authentifizieren.
Dazu gibt es verschiedene Möglichkeiten.
Ich habe mich hier für den Access-Token entschieden. Dieser Weg kann später auch für eine Pipeline genutzt werden.
Hinweis: Für CI/CD Pipelines gibt es noch die (bessere) Möglichkeit von Trusted Authentication.

Authentifizierung mit Access-Token:

Sich auf npmjs.com einloggen.
Beim User kann ein Access-Token erstellen werden.
Access-Token -> Generate New Token
- Token Name: zBsp MyBarGraph Publish Token
- Bypass 2FA: Ja (Achtung dieses Ja ist nicht unbedingt ideal.)
- Packages and scopes: read and write
  - All packages
- Oragnization: no access
- Expiration Date: 7days
Sich den Token merken.
Der Token kann nun in einer Datei im Projekt hinterlegt werden.
Im Projekt eine Datei .npmrc anlegen
Und in der Datei den Token eintragen:

//registry.npmjs.org/:_authToken=DEIN_TOKEN

Achtung: die Datei .npmrc darf nicht mit in die Versionskontrolle (z.B. Git) aufgenommen werden, da sie sensible Informationen enthält. .npmrc also in .gitignore aufnehmen.
Nun kann das Package mit npm publish --access public veröffentlichen.
Das Package findet man danach auf der Webseite von npmjs.com unter dem eigenen User-Namen.

Wichtig: Jedesmal wenn man das Package erneut publiziert, muss die Version in package.json erhöht werden.

Package im anderen Projekt verwenden

Sie haben im package.json den Namen @muster/mybargraph vergeben.
Damit können Sie das Package in einem anderen Projekt mit diesem Namen mit npm installieren.

npm install @muster/mybargraph

Und dann in Ihrem Code importieren und verwenden.

import MyBargraph from '@muster/mybargraph';
...
<MyBargraph value={value} maxvalue={100} barwidthpx={400} />