Generatore di licenze NPM Next.js

Generazione di licenze dal tuo package.json

La creazione di un file JSON dalle dipendenze elencate nel file del pacchetto è davvero semplice. Sto usando una libreria chiamata rapporto di licenza, che riduce questa attività a una singola chiamata di comando. Devo solo installare il pacchetto come dipendenza di sviluppo per il mio progetto e aggiungere il seguente script NPM.

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

Con ogni build Next.js

Poiché si tratta di un'attività ripetitiva che deve essere eseguita prima di ogni distribuzione per garantire un output corrente, l'ho semplicemente aggiunta al comando build di NPM. Questo comando viene utilizzato anche da Next.js, il che significa che ogni volta che distribuisci una nuova versione (e quindi crei una nuova build), le licenze dalle tue dipendenze vengono generate prima della build effettiva.

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

Un'implementazione pratica

Infine, sto semplicemente consumando il json nella mia pagina Next.js e lo passo come proprietà alla mia vista. Nota che la pagina stessa è puramente statica. L'esempio di codice seguente viene utilizzato esattamente in questo modo in questa app Web progressiva. Sono disponibili nella pagina della licenza.

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>
    </>
  );
}