使用 degit 在 CLI 工具中下载模板

百变鹏仔 3天前 #JavaScript

文章标签模板

我在remotion源代码中发现了一个名为“degit”的文件。
remotion 可帮助您以编程方式制作视频。

在本文中，我们将了解以下概念：

什么是degit？
受 remotion 的 degit 文件启发，构建一个简单的 degit 函数

什么是数字？

我记得在开源的自述文件中看到过“degit”，但我不记得它是哪个存储库，所以我在谷歌上搜索了 degit 的含义并找到了这个 degit npm 包。

简单来说，您可以使用 degit 只需下载最新的提交即可快速复制 github 存储库
而不是整个 git 历史记录。

访问 degit 官方 npm 包以了解有关此包的更多信息。

您也可以使用此 degit 包从 gitlab 或 bitbucket 下载存储库，因此它不仅限于 github 存储库。

# download from gitlabdegit gitlab:user/repo# download from bitbucketdegit bitbucket:user/repodegit user/repo# these commands are equivalentdegit github:user/repo

这是 javascript 中的示例用法：

const degit = require('degit');const emitter = degit('user/repo', {    cache: true,    force: true,    verbose: true,});emitter.on('info', info =&gt; {    console.log(info.message);});emitter.clone('path/to/dest').then(() =&gt; {    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';

2：获取存储库

export function fetch(url: string, dest: string) {    return new promise<void>((resolve, reject) =&gt; {        https.get(url, (response) =&gt; {            const code = response.statuscode as number;            if (code &gt;= 400) {                reject(                    new error(                        `network request to ${url} failed with code ${code} (${response.statusmessage})`,                    ),                );            } else if (code &gt;= 300) {                fetch(response.headers.location as string, dest)                    .then(resolve)                    .catch(reject);            } else {                response                    .pipe(fs.createwritestream(dest))                    .on('finish', () =&gt; resolve())                    .on('error', reject);            }        }).on('error', reject);    });}</void>

3：提取存储库

下载存储库后，需要提取tarball的内容：

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

4：把它们放在一起

主要 degit 函数将所有内容联系在一起，处理目录创建、获取和提取存储库：

export const degit = async ({    repoorg,    reponame,    dest,}: {    repoorg: string;    reponame: string;    dest: string;}) =&gt; {    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包中查看此代码作为证明。

获得受开源最佳实践启发的免费课程。

关于我：

网站：https://ramunarasinga.com/

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

github：https://github.com/ramu-narasinga

邮箱：ramu.narasinga@gmail.com

学习开源中使用的最佳实践。

参考：

https://github.com/rich-harris/degit
https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/degit.ts
https://github.com/remotion-dev/remotion/blob/c535e676badd055187d1ea8007f9ac76ab0ad315/packages/create-video/src/init.ts#l109
https://github.com/remotion-dev/remotion/blob/main/packages/create-video/src/mkdirp.ts

文章推荐

使用 degit 在 CLI 工具中下载模板

什么是数字？

受 remotion 的 degit 文件启发，构建一个简单的 degit 函数

1.使用进口

2：获取存储库

3：提取存储库

4：把它们放在一起

结论：

关于我：

参考：

JavaScript如何获取宏控件数据？

JavaScript怎样读取宏控件数据？

JavaScript获取宏控件数据的技巧

探究JavaScript与Java的联系和区别

javascript:void(o)如何解决？