Next.js NPM-Lizenzgenerator

Generieren von Lizenzen aus Ihrem package.json

Das Erstellen einer JSON-Datei aus Ihren in der Paketdatei aufgeführten Abhängigkeiten ist wirklich einfach. Ich verwende eine Bibliothek namens license-report, die diese Aufgabe auf einen einzigen Befehlsaufruf reduziert. Ich muss nur das Paket als Entwicklungsabhängigkeit für mein Projekt installieren und das folgende NPM-Skript hinzufügen.

{
  "dep:gen": "license-report --only=prod --output=json > licenses.json"
}

Mit jedem Next.js-Build

Da dies eine sich wiederholende Aufgabe ist, die vor jedem Deployment durchgeführt werden muss, um eine aktuelle Ausgabe sicherzustellen, habe ich sie einfach zum Build-Befehl von NPM hinzugefügt. Dieser Befehl wird auch von Next.js verwendet, d. h. immer wenn Sie eine neue Version bereitstellen (und daher einen neuen Build erstellen), werden die Lizenzen aus Ihren Abhängigkeiten vor dem eigentlichen Build generiert.

{
  "build": "npm run dep:gen && npx next build",
}

Eine praktische Umsetzung

Schließlich konsumiere ich einfach das Json auf meiner Next.js-Seite und übergebe es als Eigenschaft an meine Ansicht. Beachten Sie, dass die Seite selbst rein statisch ist. Das folgende Codebeispiel wird in dieser progressiven Web-App genau so verwendet. Sie sind auf der Lizenz-Seite verfügbar.

import React from "react";
import { NpmDependency } from "../../models/license/model.license";
import RiExternalLink from "remixicon-react/ExternalLinkLineIcon";

type Props = {
  licenses: NpmDependency[];
};

export function Licenses(props: Props) {
  const { licenses } = props;

  return (
    <>
      <div className="flex flex-col items-center mb-10 space-y-2 mt-28">
        <h1 className="text-5xl">Licenses</h1>
        <h2 className="text-xl">All licenses used for flaming.codes</h2>
      </div>
      <div className="grid max-w-3xl grid-cols-12 gap-10 mx-auto">
        {licenses.map((l) => (
          <a
            key={l.link}
            className="flex-col space-y-1 overflow-hidden col-span-full group"
            href={l.link.replace("git+", "").replace("ssh://", "")}
            target="_blank"
            rel="noopener noreferrer"
            aria-label={`Open Github repo for ${l.name}`}>
            <div className="inline-flex items-end">
              <div className="space-x-2 duration-300 ease-in group-hover:translate-x-6 group-hover:opacity-0">
                <span className="text-2xl">{l.name}</span>
                <span className="opacity-50">{l.installedVersion}</span>
              </div>

              <div className="absolute mb-1 text-blue-600 duration-300 ease-in -translate-x-4 opacity-0 group-hover:translate-x-0 group-hover:opacity-100">
                <RiExternalLink />
              </div>
            </div>

            <div className="text-gray-400">
              {[l.licenseType, l.author].filter(Boolean).join(", ")}
            </div>
          </a>
        ))}
      </div>
    </>
  );
}