Remotion ソース コード内に「degit」という名前のファイルを見つけました。
リモートを使用すると、プログラムでビデオを作成できます。

この記事では、次の概念について説明します:

1. デジットとは何ですか?
2. Remotion のデジット ファイルからインスピレーションを得たシンプルなデジット関数を構築する

デジットとは何ですか？

オープンソースの Readme の 1 つで「デジット」について言及されていたのを覚えていますが、それがどのリポジトリだったか思い出せなかったので、デジットの意味をグーグルで検索し、このデジット npm パッケージを見つけました。

簡単に言えば、degit を使用すると、最新のコミットをダウンロードするだけで、Github リポジトリのコピーをすばやく作成できます
git 履歴全体の代わりに。

このパッケージの詳細については、degit の公式 npm パッケージにアクセスしてください。

このデジット パッケージを使用すると、Gitlab や Bitbucket からリポジトリをダウンロードすることもできるため、Github リポジトリに限定されません。

# 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

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

Remotion のデジット ファイルからインスピレーションを得たシンプルなデジット関数を構築する

単純なデジット関数の作成方法を理解するために、Remotion の degit.ts ファイルのコードを分解してみましょう。このファイルは、degit npm パッケージの機能の基本バージョンを実装します。つまり、完全な履歴をダウンロードせずに GitHub リポジトリの最新状態を取得します。

1. 輸入品を使用

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: リポジトリを取得するネットワーク リクエストを行うために使用されます。
• fs: ダウンロードされたファイルの書き込みなど、ファイル システムと対話します。
• tmpdir: システムの一時ディレクトリ パスを提供します。
• path: ファイル パスを処理および変換します。
• tar: tarball (圧縮ファイル) の内容を抽出します。
• mkdirp: ディレクトリを再帰的に作成するためのヘルパー関数。別のファイルで提供されます。

2: リポジトリの取得

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 処理: この関数は、リクエストが成功したかどうか (ステータス コードが 300 未満) をチェックします。 リダイレクト (コード 300 ～ 399) の場合は、新しい URL に従います。 エラー (コード 400 ) の場合、Promise は拒否されます。
• ファイルの保存: fs.createWriteStream を使用してリポジトリがダウンロードされ、dest パスに保存されます。

3: リポジトリの抽出

リポジトリをダウンロードした後、tarball の内容を抽出する必要があります:

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

• Tar 抽出: この関数は、.tar.gz ファイルの内容を指定された宛先ディレクトリに抽出します。

4: すべてをまとめる

メインの数字関数はすべてを結び付け、ディレクトリの作成、フェッチ、リポジトリの抽出を処理します。

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 は
の作成に使用されます ディレクトリを再帰的に取得します。

結論：

インストール コマンドを実行するときに、remotion がデジットを使用してテンプレートをダウンロードしていることがわかりました:

npx create-video@latest

このコマンドではテンプレートを選択するよう求められます。ここで、ダウンロードするために degit が動作します
選択したテンプレートの最新のコミット

このコードは、create-video パッケージから確認して確認できます。

オープンソースで使用されているベスト プラクティスにインスピレーションを得た無料コースを受講しましょう。

私について：

ウェブサイト：https://ramunarasinga.com/

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

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

メール: [email protected]

オープンソースで使用されているベスト プラクティスを学びます。

参考文献:

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