[Arquitecto (Parte 16)] Descarga y actualización de la plantilla del proyecto de creación de andamios

¡Acostúmbrate a escribir juntos! Este es el décimo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

Descarga de plantilla

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

Después de ejecutar el comando, se encuentra que nuestra plantilla ya existe en el directorio de inicio del usuario.

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

Efecto de carga de la línea de comando a través de la ruleta

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

El código es muy simple, solo unas pocas líneas.

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

El efecto predeterminado es el siguiente

a través del efecto de spinner.start()parada loading. Pero el texto aún se mostrará, al pasar un truehará que loadingel texto desaparezca después del final, es decir, spinner.start(true).

encapsulado en un método

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

método de llamada

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

El efecto es el siguiente, si hay un parpadeo durante la instalación, puede spinnerser un problema con la biblioteca, cuando llegue el momento, pruebe con otra biblioteca.

Actualización de plantilla

hzw-cli-dev-template-vue3Primero npm publishpublique una nueva versión de esta plantilla a través de .

Descargar una plantilla por primera vez

Puedes ver la 1.0.0versión

Segunda plantilla de actualización

Puedes ver una versión más

Nota: No leí el Capítulo 7 de la Semana 5.