前端架构师-week5-脚手架下载升级项目模版功能开发

目录

脚手架下载项目模版功能开发

通过 spinner 实现命令行 loading 效果

项目模版更新功能调试

---

脚手架下载项目模版功能开发

  当作 npm 模块来处理，尝试对它进行下载。

  commands/init/ 的 package.json 中注册 models/package/，并在命令行中执行 npm install。

lerna add user-home commands/init/
# core/cli 命令行中执行
npm link

// commands/init/lib/index.js 部分内容
'use strict';

const path = require('path');
const userHome = require('user-home');
const Package = require('@imooc-cli-dev/package');

  ......
  async exec() {
    try {
      // 1. 准备阶段
      const projectInfo = await this.prepare();
      if (projectInfo) {
        // 2. 下载模板
        log.verbose('projectInfo', projectInfo);
        this.projectInfo = projectInfo;
        await this.downloadTemplate();
        // 3. 安装模板
      }
    } catch (e) {
      log.error(e.message);
    }
  }  
  ......
  async downloadTemplate() {
    const { projectTemplate } = this.projectInfo;
    const templateInfo = this.template.find(item => item.npmName === projectTemplate);
    const targetPath = path.resolve(userHome, '.imooc-cli-dev', 'template');
    const storeDir = path.resolve(userHome, '.imooc-cli-dev', 'template', 'node_modules');
    const { npmName, version } = templateInfo;
    this.templateInfo = templateInfo;
    const templateNpm = new Package({
      targetPath,
      storeDir,
      packageName: npmName,
      packageVersion: version,
    });
    if (!await templateNpm.exists()) {
      const spinner = spinnerStart('正在下载模板...');
      await sleep();
      try {
        await templateNpm.install();
      } catch (e) {
        throw e;
      } finally {
        spinner.stop(true);
        if (await templateNpm.exists()) {
          log.success('下载模板成功');
          this.templateNpm = templateNpm;
        }
      }
    } else {
      const spinner = spinnerStart('正在更新模板...');
      await sleep();
      try {
        await templateNpm.update();
      } catch (e) {
        throw e;
      } finally {
        spinner.stop(true);
        if (await templateNpm.exists()) {
          log.success('更新模板成功');
          this.templateNpm = templateNpm;
        }
      }
    }
  }
  ......

通过 spinner 实现命令行 loading 效果

cli-spinner 库作用：

        a simple spinner for node cli

// Usage:

npm install cli-spinner

(async function() {
  const Spinner = require('cli-spinner').Spinner
  const spinner = new Spinner('processing.. %s') // %s 占位符
  spinner.setSpinnerString('|/-\\') // 会形成动画
  spinner.start()
  await new Promise((resolve) => { setTimeout(resolve, 1000)) // sleep 1s
  spinner.stop(true)
})()

项目中使用：

lerna add cli-spinner utils/utils/

// utils/utils/lib/index.js 部分内容

function spinnerStart(msg, spinnerString = '|/-\\') {
  const Spinner = require('cli-spinner').Spinner;
  const spinner = new Spinner(msg + ' %s');
  spinner.setSpinnerString(spinnerString);
  spinner.start();
  return spinner;
}

function sleep(timeout = 1000) {
  return new Promise(resolve => setTimeout(resolve, timeout));
}

  commands/init/ 的 package.json 中注册 utils/utils，并在命令行中执行 npm install。

"dependencies": {
    "@imooc-cli-dev/utils": "file:../../utils/utils",
    "ejs": "^3.1.5",
}

  使用 spinnerStart 的代码在上节中。 

项目模版更新功能调试

  升级的代码在上上节中。