手把手教你优雅的生成前端脚手架（二）：脚手架增强功能-文件拉取【附源码地址】

最新推荐文章于 2022-12-05 03:36:50 发布

红99

最新推荐文章于 2022-12-05 03:36:50 发布

阅读量427

点赞数

分类专栏：前端自动化 j脚手架搭建 npm包发布

本文链接：https://blog.csdn.net/weixin_39579517/article/details/117952151

版权

前端自动化同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

npm包发布

2 篇文章 0 订阅

订阅专栏

j脚手架搭建

1 篇文章 0 订阅

订阅专栏

话不多说！！！

交互命令-使用commander

代码如下

#! /usr/bin/env node

const program = require('commander');
program
    .version(require('../package').version) // --version 版本
    .command('init <templateName> <projectName>') // 初始化命令
    .description('初始化项目文件')
    .action((templateName, projectName) => {// 得到name 
        console.error('hellow world')
    });
program.parse(process.argv); //解析变量

控制台执qiji-cli, 会打印出 hellow world

文件拉取-使用download-git-repo

#! /usr/bin/env node

const program = require('commander');
const download = require('download-git-repo');
//version 版本号
//name 新项目名称
program
    .version(require('../package').version) // --version 版本
    .command('init <templateName> <projectName>') // 初始化命令
    .description('初始化项目文件')
    .action((templateName, projectName) => {// 得到新建项目模版类型和name 
        if (templateName === "vue") {
            console.log('clone template ...');
            download('direct:http://gitlab.com/qiji/qiji_creator', projectName,  { clone: true },function (err) { //默认拉去的是maser分支
                console.log(err ? err : 'Success')
            })
        } else if(templateName === "react") {
            console.log('clone template ...');
            download('gitlab.com:qiji/qiji_creator#test', projectName,  { clone: true },function (err) { //拉取的是test分支
                console.log(err ? err : 'Success')// 进行输出
            })
        } else {
          console.error('A template name that does not exist')
        }
    });
program.parse(process.argv); //解析变量

从代码中可以看出，有vue和react两种功能项目
执行命令：

qiji-cli init vue test-master // vue是拉取的项目类型；test-master是拉去新建的项目名称
qiji-cli init react test-react  // react是拉取的项目类型；test-react是拉去新建的项目名称

注意大坑：
‘git clone’ failed with status 128 通过git clone拉取出错，一般是download时配置的文件路径有问题
将git改为通过 direct: http:// URl的方式进行clone

一个用户与命令行交互的工具- inquirer.

作用：使用这个命令主要是希望可以想antPro一样支持选择下载多种type
在这里插入图片描述

const download = require('download-git-repo');
const inquirer = require('inquirer');

const promptList = [{
  type: 'list',
  message: 'Select the template type:',
  name: 'template',
  choices: [
    "Vue",
    "React",
  ],
  filter: function (val) { // 使用filter将回答变为小写
    return val.toLowerCase();
  }
}];

module.exports = (projectName) => {
  const detailDownloadFunc = (url, projectName, spinner) => {
    download(url, projectName, { clone: true }, function (err) { 
       console.log(err ? err : "Loading template success")
      process.exit();
    })
  }
  inquirer.prompt(promptList).then(answers => {
    const tplName = answers.template;
    // 分步接收用户输入的参数
    if (tplName == "vue" || tplName == 'react') {
      const text = 'Loading ' + tplName + ' template';
      if (tplName === "vue") {
        detailDownloadFunc('direct:http://gitlab.com/qiji/qiji_wap', projectName, spinner)
      } else if (tplName === "react") {
        detailDownloadFunc('gitlab.com:qiji/qiji_creator#test', projectName, spinner)
      }
    } else {
      console.error('A template name that does not exist')
      process.exit();
    }
  })
}

终端loading效果-org

const ora = require('ora');
  const text = 'Loading ' + tplName + ' template';
  const spinner = ora(text).start();
  spinner.color = 'yellow';
  spinner.text = text;
  spinner.succeed("Loading template success")
	spinner.stop()

终端字符串美化库: chalk

const chalk = require('chalk');
const error = chalk.bold.red;
const warning = chalk.keyword('orange');
console.log(error('Error!'));
console.log(warning('Warning!'));