前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【架构师(第十六篇)】脚手架之创建项目模板的下载与更新

【架构师(第十六篇)】脚手架之创建项目模板的下载与更新

作者头像
一尾流莺
发布2022-12-10 13:31:37
4130
发布2022-12-10 13:31:37
举报

模板下载

代码语言:javascript
复制
/**
   * @description: 下载模板
   *  1.通过项目模板API获取项目模板信息
   *  1.1 通过egg.js搭建一套后端系统 hzw-cli-dev-server
   *  1.2 通过npm存储项目模板 (vue-cli/vue-element-admin两套模板)
   *  1.3 将项目模板信息存储到 mongodb 数据库中
   *  1.4 通过 egg.js 获取 mongodb 中的数据并且通过 API 返回
   * @param {*}
   * @return {*}
   */
  async downloadTemplate() {
    // 获取模板名称
    const { template } = this.projectInfo
    // 根据名称匹配到模板信息
    const templateInfo = this.template.find((item) => item.npmName === template)
    // 拼接路径
    const targetPath = path.resolve(userHome, '.hzw-cli-dev', 'template')
    const storeDir = path.resolve(userHome, '.hzw-cli-dev', 'template', 'node_modules')
    const { npmName, version } = templateInfo
    // 创建一个 Package
    const templateNpm = new Package({
      targetPath,
      storeDir,
      packageName: npmName,
      packageVersion: version,
    })
    // 检查 package 是否存在
    if (! await templateNpm.exists()) {
      // 安装
      await templateNpm.install();
    } else {
      // 更新
      await templateNpm.update()
    }
  }

执行完命令后,发现用户主目录下已经有了我们的模板。

代码语言:javascript
复制
hzw-cli-dev init -tp D:\imooc-learn\hzw-cli-dev\hzw-cli-dev\commands\init test-project
image.png
image.png

通过 spinner 实现命令行 loading 效果

代码语言:javascript
复制
// 安装 cli-spinner
npm i cli-spinner -S

代码很简单,就几行

代码语言:javascript
复制
const Spinner = require('cli-spinner').Spinner
const spinner = new Spinner('processing.. %s');
spinner.setSpinnerString('|/-\\');
spinner.start();

默认的效果如下

1.gif
1.gif

通过 spinner.stop() 停止 loading 效果。但是文本还会显示,传入一个 true 会让 loading 结束后文本消失,也就是 spinner.stop(true)

封装成一个方法

代码语言:javascript
复制
/**
 * @description: 命令行加载效果
 * @param {*}
 * @return {*}
 */
const spinnerStart = (message) => {
  const Spinner = require('cli-spinner').Spinner
  const spinner = new Spinner(`${message} %s`);
  spinner.setSpinnerString('⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏');
  spinner.start()
  return spinner
}

调用方法

代码语言:javascript
复制
// 检查 package 是否存在
if (!await templateNpm.exists()) {
  // 安装
  const spinner = spinnerStart('模板下载中,请稍候...')
  await sleep()
  await templateNpm.install();
  spinner.stop(true)
  log.warn('模板下载成功')
} else {
  // 更新
  const spinner = spinnerStart('模板更新中,请稍候...')
  await sleep()
  await templateNpm.update()
  spinner.stop(true)
  log.warn('模板更新成功')
}

效果如下,安装的时候有闪动,可能是 spinner 库的问题,到时候换一个库试一试。

2.gif
2.gif

模板更新

先把 hzw-cli-dev-template-vue3 这个模板通过 npm publish 发布一个新版本。

第一次下载模板

image.png
image.png

可以看到是 1.0.0 版本

image.png
image.png

第二次更新模板

image.png
image.png

可以看到多了一个版本

image.png
image.png

备注:第五周的第七章没看。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-04-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 模板下载
  • 通过 spinner 实现命令行 loading 效果
  • 模板更新
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档