Next.js Γεννήτρια άδειας NPM

Δημιουργία αδειών χρήσης από το πακέτο σας.json

Η δημιουργία ενός αρχείου JSON από τις εξαρτήσεις σας που αναφέρονται στο αρχείο πακέτου είναι πραγματικά απλή. Χρησιμοποιώ μια βιβλιοθήκη που ονομάζεται license-report, η οποία μειώνει αυτήν την εργασία σε μία κλήση εντολών. Απλώς πρέπει να εγκαταστήσω το πακέτο ως εξάρτηση ανάπτυξης για το έργο μου και πρόσθεσα το ακόλουθο σενάριο NPM.

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

Με κάθε κατασκευή Next.js

Δεδομένου ότι πρόκειται για μια επαναλαμβανόμενη εργασία που πρέπει να γίνει πριν από κάθε ανάπτυξη για να διασφαλιστεί η τρέχουσα έξοδος, απλώς την πρόσθεσα στην εντολή κατασκευής της NPM. Αυτή η εντολή χρησιμοποιείται επίσης από το Next.js, που σημαίνει ότι κάθε φορά που αναπτύσσετε μια νέα έκδοση (και επομένως δημιουργείτε μια νέα έκδοση), οι άδειες από τις εξαρτήσεις σας δημιουργούνται πριν από την πραγματική κατασκευή.

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

Πρακτική εφαρμογή

Τέλος, απλώς καταναλώνω το json στη σελίδα Next.js και το μεταφέρω ως ιδιότητα στην προβολή μου. Σημειώστε ότι η ίδια η σελίδα είναι καθαρά στατική. Το ακόλουθο παράδειγμα κώδικα χρησιμοποιείται ακριβώς έτσι σε αυτήν την προοδευτική εφαρμογή ιστού. Είναι διαθέσιμα στη σελίδα άδειας χρήσης.

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