『手撕Vue-CLI』下载指定模板

vue,cli · 浏览次数 : 0

小编点评

**如何从 GitHub 下载模板可以使用 Node.js 的下载库 download-git-repo 进行实现** **步骤 1:导入库** ```javascript const downloadGitRepo = require('download-git-repo'); ``` **步骤 2:获取下载路径** ```javascript const downloadDirPath = require('./const'); const { downloadPath } = require('./const'); ``` **步骤 3:使用 download-git-repo 获取模板** ```javascript const downloadTemplate = async (templateName, version) => { const url = `neo-it6666/${templateName}`; if (version) { url += `#${version}`; } const downloadPath = `${downloadDirPath}\\\\${templateName}`; await downloadGitRepo(url, downloadPath); return downloadPath; }; ``` **步骤 4:使用 Promise 下载模板** ```javascript const destPath = await downloadTemplate(templateName, version); console.log(destPath); ``` **示例** ``` // 导入相关模块 const downloadGitRepo = require('download-git-repo'); // 获取模板名称和版本号 const templateName = 'my-template'; const version = '1.0.0'; // 获取下载路径 const downloadDirPath = './templates'; const { downloadPath } = require('./const'); // 下载模板 const destPath = await downloadTemplate(templateName, version); // 打印下载路径 console.log(destPath); ``` **注意** * 此代码使用的是 http 方式下载模板,您可以使用其他方式进行下载,如使用 curl 或 fetch。 * 此代码假设模板名称和版本号在运行时获取。您可以使用其他方式获取这些信息。

正文

开篇

经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。

背景

通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。

实现

如何从 GitHub 下载模板

可以借助 download-git-repo 这个库来下载 GitHub 上的模板,进入到 npm 官网搜索一下这个库:

进入官网,官方介绍的很清楚,使用这个库得要先安装:

npm install download-git-repo

安装完成之后,在工程中引入这个库:

// 导入 download-git-repo,用于下载模板
const downloadGitRepo = require('download-git-repo');

再将之前获取下载路径也导入进来:

// 导入 downloadDirPath,用于获取下载路径
const { downloadDirPath } = require('./const');

基本工作准备完成,现在我也不会使用所以我要去看看官方的示例,最后看到一个使用 http 的示例:

发现回调是 API 的方式,我这里想要使用 Promise 的方式,所以我要做一个事情就是将回调函数 API 方式转换为 Promise 方式。

怎么转呢?这里就要用到一个 Node.js 的内置模块 util,这个模块可以将回调函数转换为 Promise 函数,具体使用方法如下:

// 导入 util 模块
const { promisify } = require('util');

然后将 downloadGitRepo 方法转换为 Promise 方法:

// 导入 download-git-repo,用于下载模板
const downloadGitRepo = promisify(require('download-git-repo'));

这样就将 downloadGitRepo 方法转换为 Promise 方法了,接下来就可以使用 Promise 方法来下载模板了。

下载指定模板

下载指定模板的方法很简单,只需要调用 downloadGitRepo 方法,传入两个参数,第一个参数是 GitHub 上的模板地址,第二个参数是下载到本地的路径。

在官方的 options 介绍中有提供详解:

我这里采用的是 http 方式,先上代码:

const downloadTemplate = async (templateName, version) => {
    // https://github.com/kevva/download#options
    // 组织机构的名称/模板名称#版本号
    // 1.拼接模板在github上的地址
    let url = `neo-it6666/${templateName}`;

    if (version) {
        url += `#${version}`;
    }

    // 2.拼接存储下载好的模板的路径
    const downloadPath = `${downloadDirPath}\\${templateName}`;
    await downloadGitRepo(url, downloadPath);
    return downloadPath;
}

单独封装了一个函数 downloadTemplate,这个函数接收两个参数,第一个参数是模板名称,第二个参数是版本号,然后拼接 GitHub 上的模板地址,最后调用 downloadGitRepo 方法,将模板下载到本地。

逻辑很简单,downloadGitRepo 我分别传递了两个参数,第一个参数是 GitHub 上的模板地址,第二个参数是下载到本地的路径,这样就实现了下载指定模板的功能。

最后使用这个函数,在 create 指令主流程中调用:

const destPath = waitLoading('downloading template...', downloadTemplate)(template, version)
console.log(destPath)

这样就实现了下载指定模板的功能,来测试一下,首先在终端中输入指令:

nue-cli create test

可以看到已经下载成功了,然后再去用户目录中查看:

可以看到已经下载成功了,这样就实现了下载指定模板的功能。

如果您觉得文章对您有所帮助,欢迎您点赞、评论、转发,也欢迎您关注我的公众号『BNTang』,我会在公众号中分享更多的技术文章。

与『手撕Vue-CLI』下载指定模板相似的内容:

『手撕Vue-CLI』下载指定模板

开篇 经上篇文章的介绍,实现了获取下载目录地址,接下来实现下载指定模板的功能。 背景 通过很多章节过后,已经可以拿到模板名称,模板版本号,下载目录地址,这些信息都是为了下载指定模板做准备的。 实现 如何从 GitHub 下载模板 可以借助 download-git-repo 这个库来下载 GitHu

『手撕Vue-CLI』拉取模板名称

前言 好,经过上篇文章的介绍,已经可以有处理不同指令的能力了,接下来我们就来处理 vue create 指令,这个指令的本质就是从网络上下载提前准备好的模板,然后再自动安装模板中相关依赖。 所以实现 create 指令分为两步: 下载指定模板 安装模板中的依赖 先来看看官方的吧,我在终端中已经输入了

『手撕Vue-CLI』自动安装依赖

开篇 经过『手撕Vue-CLI』拷贝模板,实现了自动下载并复制指定模板到目标目录。然而,虽然项目已复制,但其依赖并未自动安装,可能需要用户手动操作,这并不够智能。 正如前文所述,我们已经了解了业务需求和背景。那么,接下来我们将直接深入探讨核心实现细节。 自动安装依赖 在前文中,我们已经将模板文件复制

『手撕Vue-CLI』获取下载目录

开篇 在上一篇文章中,简单的对 Nue-CLI 的代码通过函数柯里化优化了一下,这一次来实现一个获取下载目录的功能。 背景 在 Nue-CLI 中,我现在实现的是 create 指令,这个指令本质就是首先拿到模板名称和版本号之后,然后去进行下载对应的模板,关于下载那么肯定要面临的问题就是如何下载?下

『手撕Vue-CLI』拷贝模板

开篇 经过上篇文章的介绍,实现了可以根据用户选择的模板名称加上对应的版本号,可以下载对应的模板,并且将下载之后的文件存放在用户目录下的 .nue-template文件夹中。 接下来这篇文章主要实现内容是将下载的模板文件拷贝到当前所执行命令的目录下。 拷贝模板 例如我现在在终端当中输入 nue-cli

『手撕Vue-CLI』完善提示信息

前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能。 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的: 于是我决定完善提示信息,也借此机会完善一下项目的代码,变量命名等。 完善提示信息 完善变量命名

『手撕Vue-CLI』函数柯里化优化代码

开篇 在上一篇文章中,给 nue-cli 添加了拉取版本号的功能,这一次来优化一下代码,使用函数柯里化的方式来优化代码。 实现 函数柯里化 函数柯里化是一种将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术。 在进行改写之前,首先给大家简单介绍一下函数柯里化,写一个简单的例子来演示一下。

『手撕Vue-CLI』拉取版本号

开篇 在上一篇文章中,给 nue-cli 添加了与用户终端交互的功能,这一次来实现一个拉取版本号的功能。 这个功能的背景是,有时候我们在使用脚手架的时候,不同版本的脚手架可能会有不同的功能,所以用户有可能会根据自己的需求选择不同的版本,所以这里将会实现一个根据用户选择的版本号,拉取对应的版本号的模板

『手撕Vue-CLI』添加终端用户交互

前言 经过上一篇文章的梳理,实现了可以从 GitHub 上拉取模板项目名称,已经可以得知可使用的模板有哪些了,那么我觉得是不是要进行选择呢?所以这一篇文章就来实现终端用户交互,让用户可以自己选择想要使用的模板。 实现 在 NodeJS 当中,已经有人为我们封装好了一个库,叫做 inquirer,可以

『手撕Vue-CLI』处理不同指令

前言 在上一篇『手撕Vue-CLI』添加自定义指令中,已经实现了自定义指令的添加,但是指令还是比较简单的,只是简单的打印一句话,那么在实际运用场景中,可能会有更多的需求,比如可能需要在指令中传递参数,或者需要在指令中进行一些复杂的操作,那么这个时候我们就需要对指令进行处理了。 创建指令处理文件 在上