」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 使用 degit 在 CLI 工具中下載範本。

使用 degit 在 CLI 工具中下載範本。

發佈於2024-11-02
瀏覽:628

我在Remotion原始碼中發現了一個名為「degit」的檔案。
Remotion 可協助您以程式設計方式製作影片。

在本文中,我們將了解以下概念:

  1. 什麼是數字?
  2. 受 Remotion 的 degit 檔案啟發,建構一個簡單的 degit 函數

什麼是數字?

我確實記得在開源的自述文件之一中提到過“degit”,但我不記得它是哪個存儲庫,所以我用谷歌搜索了 degit 的含義並找到了這個 degit npm 包。

簡單來說,您可以使用 degit 只需下載最新的提交即可快速複製 Github 儲存庫
而不是整個 git 歷史記錄。

訪問 degit 的官方 npm 包以了解有關此包的更多資訊。

您也可以使用此 degit 套件從 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 的 degit 檔案啟發,建立一個簡單的 degit 函數

要了解如何建立簡單的 degit 函數,讓我們分解 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 ),則拒絕承諾。
  • 檔案儲存:使用 fs.createWriteStream 下載儲存庫並將其儲存到目標路徑。

3:提取儲存庫

下載儲存庫後,需要擷取tarball的內容:

function untar(file: string, dest: string) {
    return tar.extract(
        {
            file,
            strip: 1,
            C: dest,
        },
        [],
    );
}
  • Tar Extraction:此函數將 .tar.gz 檔案的內容提取到指定的目標目錄中。

4:把它們放在一起

主要 degit 函數將所有內容連結在一起,處理目錄建立、取得和提取儲存庫:

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 使用 degit 下載範本:

npx create-video@latest

此命令要求您選擇一個模板,這是 degit 開始下載的地方
所選範本的最新提交

您可以從 create-video 套件中檢查此程式碼作為證明。

Use degit to download a template in your CLI tool.

取得受開源最佳實踐啟發的免費課程。

關於我:

網址: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
版本聲明 本文轉載於:https://dev.to/ramunarasinga/use-degit-to-download-a-template-in-your-cli-tool-6hg?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在 Golang 中實現真正的並行:Goroutines、死鎖和通道?
    如何在 Golang 中實現真正的並行:Goroutines、死鎖和通道?
    Golang 中的平行處理:利用並發來提高效能考慮提供的程式碼,其中展示了 Goroutines 的並行處理。然而,它提出了關於並發執行的潛力以及實現並行性的最佳方法的問題。 dowork的同時執行dowork並行執行的前提是不保證。雖然 goroutine 提供了輕量級的並發機制,但作業系統排程器...
    程式設計 發佈於2024-11-09
  • 在建構函式中分配原型方法是一個好主意嗎?
    在建構函式中分配原型方法是一個好主意嗎?
    在建構函數中分配原型方法:潛在的缺點和範圍問題序言本文深入研究了建構原型方法時的風格偏好困境JavaScript 物件。首選方法是直接在建構函數函數體內分配方法,這與在構造函數外部定義方法的傳統方法形成鮮明對比。雖然首選方法可能看起來美觀,但問題出現了:這種技術是否存在任何固有的缺點或潛在的範圍問題...
    程式設計 發佈於2024-11-09
  • 為什麼 useState 在嚴格模式下渲染元件兩次?
    為什麼 useState 在嚴格模式下渲染元件兩次?
    理解useState中的雙重渲染在React中,useState鉤子通常用於管理元件狀態。但是,在某些條件下,您可能會注意到使用 useState 呈現的元件對於每次狀態更新都會呈現兩次。這種行為讓許多未啟用嚴格模式的開發人員感到困惑。為什麼會出現這種情況? 嚴格模式的作用與未啟用嚴格模式的假設相反...
    程式設計 發佈於2024-11-09
  • 混淆技術如何保護PHP智慧財產權?
    混淆技術如何保護PHP智慧財產權?
    混淆PHP 代碼以保護知識產權作為軟體開發人員,保護原始碼至關重要,尤其是在計劃出售您的作品時。混淆技術為增強 PHP 程式碼的機密性提供了一個有價值的解決方案。 混淆方法混淆涉及將 PHP 程式碼轉換為混亂版本,該版本保留功能但妨礙人類可讀性。有幾種工具和技術可以實現此目的:1。 PHP 加速器這...
    程式設計 發佈於2024-11-09
  • 如何使用 JavaScript 修改外部樣式表中定義的 CSS 值?
    如何使用 JavaScript 修改外部樣式表中定義的 CSS 值?
    使用 JavaScript 修改 CSS 值JavaScript 提供了一種設定內聯 CSS 值的簡單方法。然而,當修改非內聯樣式表中定義的 CSS 值時,此方法可能會帶來挑戰。 從樣式表中擷取 CSS 值要擷取非內聯樣式表中的 CSS 值非內聯,JavaScript 允許透過 document.s...
    程式設計 發佈於2024-11-09
  • 如何在 PHP 中計算日期之間的小時差?
    如何在 PHP 中計算日期之間的小時差?
    確定 PHP 中日期之間的小時差您希望計算兩個日期之間的小時差,其格式為 " Y-m-d H:i:s."要實現這一點PHP:要實現這一點PHP:$timestamp1 = strtotime($date1); $timestamp2 = strtotime($date2);時間戳...
    程式設計 發佈於2024-11-09
  • 反應受控/不受控組件
    反應受控/不受控組件
    在 React 中,處理表單輸入主要有兩種方法: 受控組件 不受控制的組件 受控組件提供更多控制和驗證,而不受控組件更簡單,對於間歇性值存取的基本形式有用。 受控組件 這些是表單輸入,其值由 React State 控制。每當輸入的值發生變化時,狀態變數就會更新,並且輸入的值是透過...
    程式設計 發佈於2024-11-09
  • 如何處理 Selenium 中的「過時元素引用」異常?
    如何處理 Selenium 中的「過時元素引用」異常?
    陳舊元素引用:揭示原因並尋找解決方案在Selenium 中,遇到“陳舊元素引用”異常可能會令人沮喪,因為它表明被引用的元素不再附加到頁面文件。當 DOM 發生重大變更(例如動態載入或頁面導覽)時,通常會發生此錯誤。 要解決此問題,確定觸發異常的確切程式碼行至關重要。在提供的程式碼中,導致錯誤的行似乎...
    程式設計 發佈於2024-11-09
  • 如何有效率地在嵌套的 JavaScript 物件中尋找特定物件?
    如何有效率地在嵌套的 JavaScript 物件中尋找特定物件?
    迭代嵌套的JavaScript 物件迭代嵌套的JavaScript 物件可能具有挑戰性,特別是當您需要基於屬性檢索特定對象時價值。讓我們考慮以下範例:var cars = { label: 'Autos', subs: [ { label: 'SUVs', s...
    程式設計 發佈於2024-11-09
  • 最簡單的狀態教程
    最簡單的狀態教程
    Zustand 是一個小型、快速且可擴展的 React 狀態管理庫,可作為 Redux 等更複雜解決方案的替代方案。 Zustand 獲得如此大關注的主要原因是與 Redux 相比,它的體積小且語法簡單。 了解 Zustand 設置 首先,如果您還沒有安裝 Zustand 和 Ty...
    程式設計 發佈於2024-11-09
  • MongoDB 伺服器:概述
    MongoDB 伺服器:概述
    MongoDB 是一种流行的 NoSQL 数据库,提供高性能、可扩展且灵活的数据存储解决方案。与使用表和行的传统关系数据库不同,MongoDB 使用灵活的、类似 JSON 的结构(称为 BSON(二进制 JSON))将数据存储在文档中。这使得 MongoDB 能够轻松处理复杂的数据类型和层次关系。...
    程式設計 發佈於2024-11-09
  • 如何在 MySQL DELETE 語句中使用 LIMIT 刪除一定範圍的行?
    如何在 MySQL DELETE 語句中使用 LIMIT 刪除一定範圍的行?
    更正帶有LIMIT 的MySQL DELETE 語句的語法嘗試使用帶有LIMIT 的DELETE 語句從MySQL時LIMIT 子句,如果語法不正確,您可能會遇到錯誤。此錯誤通常表示用於指定限制的語法有問題。 所提供的查詢中的問題是您無法在 DELETE 語句的 LIMIT 子句中指定偏移量。在 D...
    程式設計 發佈於2024-11-09
  • 如何使用 os.walk() 在 Python 中建立帶有深度指示器的結構化目錄清單?
    如何使用 os.walk() 在 Python 中建立帶有深度指示器的結構化目錄清單?
    在Python 中使用os.walk() 遞歸地導航目錄為了創建更結構化的目錄列表,開發人員嘗試修改他們的程式碼將目錄顯示為大寫標題,並用虛線指示深度和目錄下的檔案。然而,他們最初的方法產生了不完整的結果。 為了解決這個挑戰,我們可以利用 Python 的 os.sep 屬性來正確描述路徑元件。這是...
    程式設計 發佈於2024-11-09
  • Java 中的設計模式及其範例
    Java 中的設計模式及其範例
    Java 中的設計模式是什麼? 設計模式是軟體設計中常見問題的可重複使用解決方案。它們代表了可應用於軟體開發中各種情況的最佳實踐,特別是像 Java 這樣的物件導向程式設計。 設計模式的類型 創建模式: 處理物件創建機制。 結構模式: 關注類別與物件的組成方...
    程式設計 發佈於2024-11-09
  • NestJS 與 Encore.ts:為您的 TypeScript 微服務選擇正確的框架
    NestJS 與 Encore.ts:為您的 TypeScript 微服務選擇正確的框架
    Introduction When web applications grow larger, so does the complexity in developing and maintaining the system. A common way to solve this i...
    程式設計 發佈於2024-11-09

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3