Ich habe im Remotion-Quellcode eine Datei namens „degit“ gefunden.
Remotion hilft Ihnen, Videos programmatisch zu erstellen.

In diesem Artikel werden wir uns mit den folgenden Konzepten befassen:

1. Was ist Degit?
2. Erstellen Sie eine einfache Degit-Funktion, die von der Degit-Datei von Remotion inspiriert ist

Was ist Degit?

Ich erinnere mich, dass „degit“ in einer der Readmes in der Open Source erwähnt wurde, aber ich konnte mich nicht erinnern, um welches Repository es sich handelte, also habe ich gegoogelt, was ein degit bedeutet, und habe dieses degit npm-Paket gefunden.

Einfach ausgedrückt: Sie können degit verwenden, um schnell eine Kopie eines Github-Repositorys zu erstellen, indem Sie nur das neueste Commit herunterladen
anstelle des gesamten Git-Verlaufs.

Besuchen Sie das offizielle npm-Paket für degit, um mehr über dieses Paket zu lesen.

Sie können dieses Degit-Paket auch zum Herunterladen von Repos von Gitlab oder Bitbucket verwenden, sodass es nicht nur auf Github-Repositories beschränkt ist.

# download from GitLab
degit gitlab:user/repo

# download from BitBucket
degit bitbucket:user/repo

degit user/repo
# these commands are equivalent
degit github:user/repo

Hier ist ein Beispiel für die Verwendung in Javascript:

const degit = require('degit');

const emitter = degit('user/repo', {
    cache: true,
    force: true,
    verbose: true,
});

emitter.on('info', info => {
    console.log(info.message);
});

emitter.clone('path/to/dest').then(() => {
    console.log('done');
});

Erstellen Sie eine einfache Degit-Funktion, die von der Degit-Datei von Remotion inspiriert ist

Um zu verstehen, wie man eine einfache Degit-Funktion erstellt, analysieren wir den Code aus der degit.ts-Datei von Remotion. Diese Datei implementiert eine Basisversion dessen, was das degit npm-Paket tut: den neuesten Status eines GitHub-Repositorys abrufen, ohne den vollständigen Verlauf herunterzuladen.

1. Verwendete Importe

import https from 'https';
import fs from 'node:fs';
import {tmpdir} from 'node:os';
import path from 'node:path';
import tar from 'tar';
import {mkdirp} from './mkdirp';

• https: Wird verwendet, um eine Netzwerkanforderung zum Abrufen des Repositorys zu stellen.
• fs: Interagiert mit dem Dateisystem, z. B. beim Schreiben der heruntergeladenen Dateien.
• tmpdir: Stellt den temporären Verzeichnispfad des Systems bereit.
• Pfad: Behandelt und transformiert Dateipfade.
• tar: Extrahiert den Inhalt des Tarballs (komprimierte Datei).
• mkdirp: Eine Hilfsfunktion zum rekursiven Erstellen von Verzeichnissen, bereitgestellt in einer separaten Datei.

2: Abrufen des Repositorys

export function fetch(url: string, dest: string) {
    return new Promise((resolve, reject) => {
        https.get(url, (response) => {
            const code = response.statusCode as number;
            if (code >= 400) {
                reject(
                    new Error(
                        `Network request to ${url} failed with code ${code} (${response.statusMessage})`,
                    ),
                );
            } else if (code >= 300) {
                fetch(response.headers.location as string, dest)
                    .then(resolve)
                    .catch(reject);
            } else {
                response
                    .pipe(fs.createWriteStream(dest))
                    .on('finish', () => resolve())
                    .on('error', reject);
            }
        }).on('error', reject);
    });
}

• URL-Behandlung: Die Funktion prüft, ob die Anfrage erfolgreich ist (Statuscodes unter 300). Wenn es sich um eine Weiterleitung handelt (Codes zwischen 300 und 399), folgt sie der neuen URL. Wenn es sich um einen Fehler handelt (Codes 400), wird das Versprechen abgelehnt.
• Dateispeicherung: Das Repository wird heruntergeladen und mit fs.createWriteStream im Zielpfad gespeichert.

3: Extrahieren des Repositorys

Nach dem Herunterladen des Repositorys ist es notwendig, den Inhalt des Tarballs zu extrahieren:

function untar(file: string, dest: string) {
    return tar.extract(
        {
            file,
            strip: 1,
            C: dest,
        },
        [],
    );
}

• Tar-Extraktion: Diese Funktion extrahiert den Inhalt der .tar.gz-Datei in das angegebene Zielverzeichnis.

4: Alles zusammenfügen

Die Hauptfunktion degit verbindet alles miteinander und kümmert sich um die Verzeichniserstellung, das Abrufen und Extrahieren des Repositorys:

export const degit = async ({
    repoOrg,
    repoName,
    dest,
}: {
    repoOrg: string;
    repoName: string;
    dest: string;
}) => {
    const base = path.join(tmpdir(), '.degit');
    const dir = path.join(base, repoOrg, repoName);
    const file = `${dir}/HEAD.tar.gz`;
    const url = `https://github.com/${repoOrg}/${repoName}/archive/HEAD.tar.gz`;

    mkdirp(path.dirname(file));
    await fetch(url, file);

    mkdirp(dest);
    await untar(file, dest);
    fs.unlinkSync(file);
};

mkdirp wird verwendet, um
zu erstellen a Verzeichnisse rekursiv.

Abschluss:

Ich habe festgestellt, dass Remotion Degit zum Herunterladen von Vorlagen verwendet, wenn Sie den Installationsbefehl ausführen:

npx create-video@latest

Mit diesem Befehl werden Sie aufgefordert, eine Vorlage auszuwählen. Hier kommt degit zum Herunterladen ins Spiel
das letzte Commit der ausgewählten Vorlage

Sie können diesen Code im Paket „create-video“ als Beweis überprüfen.

Erhalten Sie kostenlose Kurse, die von den Best Practices inspiriert sind, die in Open Source verwendet werden.

Über mich:

Website: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

E-Mail: [email protected]

Lernen Sie die Best Practices kennen, die in Open Source verwendet werden.

Referenzen:

1. https://github.com/Rich-Harris/degit
2. https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/degit.ts
3. https://github.com/remotion-dev/remotion/blob/c535e676badd055187d1ea8007f9ac76ab0ad315/packages/create-video/src/init.ts#L109
4. https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/mkdirp.ts