[Architect (Part 16)] Download and update of scaffolding creation project template

Get into the habit of writing together! This is the 10th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

Template download

/**
   * @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()
    }
  }
复制代码

After executing the command, it is found that our template already exists in the user's home directory.

hzw-cli-dev init -tp D:\imooc-learn\hzw-cli-dev\hzw-cli-dev\commands\init test-project
复制代码

image.png

Command line loading effect through spinner

// 安装 cli-spinner
npm i cli-spinner -S
复制代码

The code is very simple, just a few lines

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

The default effect is as follows

1.gif

via the spinner.start()stop loadingeffect. But the text will still be displayed, passing in a truewill make loadingthe text disappear after the end, ie spinner.start(true).

encapsulated in a method

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

call method

// 检查 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('模板更新成功')
}
复制代码

The effect is as follows, if there is flashing during installation, it may spinnerbe a problem with the library. When the time comes, try another library.

2.gif

Template update

hzw-cli-dev-template-vue3First npm publishpublish a new version of this template via .

Downloading a template for the first time

image.png

You can see the 1.0.0version

image.png

Second update template

image.png

You can see one more version

image.png

Note: I didn't read Chapter 7 of Week 5.

Guess you like

Origin juejin.im/post/7086624155004567559