node工程化工具-自定义脚手架的编写

这篇博客主要是讲如何在公司内，根据公司内部的业务，使用Node自定义脚手架。
首先要了解的是，在软件工程开发中有这么几个关键的节点：
立项（模版）=》开发调试 =》测试=》构建 =》部署

这篇博客主要针对第一个节点来展开。

脚手架是如何使用的

在日常开发中，我们想要创建一个vue的项目，我们一般是将vue-cli安装在本地后，然后通过vue的命令就可以创建一个vue的项目了。
我们接下来要做的事情就是让我们的电脑上有这样一个工具的命令

举例：当我们想要定义一个fm的指令时，我们全局安装后，就会有fm这个指令。下面会以代码为例，进行解释

在bin这个字段中，可以定义自己想要制定的指令，然后值可以是一个图片，如果是一个图片的话，当在终端输入这个指令时，相当于打开了这一图片；当值对应的是一个js文件时，我们就没办法直接打开这个文件，所以，我们需要在文件首行告诉终端，我们要在哪里执行.下列代码告诉电脑需要在bin中node环境执行

#!/usr/bin/env node

另外，可以从上图中看到字段scripts这个代表的是自定义的执行命令，当用户在终端中输入npm start,就可以执行右侧的命令语句了。
如果我们修改之后，脚手架写完后，可以通过npm发版后使用。但是在开发环境，这样就很浪费时间，我们可以使用npm link的方式，将包发布在我们本地。这个时候我们再开始执行我们的命令nodetool-cli就可以看到index.js中

执行的结果

整个流程已经介绍完成了，接下来就是我们在index.js中如何编写的过程了，这里用到了inquirer的依赖包，我们可以去官网找到文档https://github.com/SBoudrias/Inquirer.js/blob/main/packages/inquirer/README.md
接下来，我们可以用inquier中的API来实现我们脚手架的定义，文章最后会统一张贴index.js文件示例代码
在package.json中，我们需要设置一下type字段，因为在index,js中使用了ES6的import的引入方法，需要在package.json中设置type的值为'module'

接下来我们要开始从github或者gitlab中下载我们需要的模板语法，从git上下载的话，我们需要安装一下依赖download-git-repo，当然也可以使用node原生的方法

当我们在初始化git仓库时，会等待的时间较长。但是文件夹已经创建出来了。这里说个我犯的错误。

1. 在执行downgit方法时，发现只有用户选择了初始化git时，才可下载，后经检查，发现执行方法写在if判断里里
2. 变量名称写错，将git下载库的变量名写错了
   从上图中我们可以得知，任务完成之后，文字还是白色，我们可以将这个优化一下，让用户更清晰的看到是否下载成功。这个时候我们需要用到chalk这个依赖，大家可以从npm官网下载;如果我们想要在下载过程中给用户更好的体验的话，可以使用ora来显示下载的进度。下方的图是优化之后执行的结果，loading的时候页面也可看见。
   
   接下来我把这个代码贴在下面，实际在真正的开发中，面对的情况比这个可能更要复杂，这就需要根据公司业务及技术leader的安排来看，我们需要哪种能更好的支持业务及前端框架的更新迭代了。

#!/usr/bin/env node
console.log('欢迎使用项目生成工具！');
import inquerier from 'inquirer';
import downgit from 'download-git-repo';
import fs from 'fs';
import path from 'path';
import ora from 'ora';
import chalk from 'chalk';
inquerier.prompt([
  {
    type: 'input',
    name: 'projectName',
    message: '请输入项目名称：',
    default: 'my-node-project'
  },
  {
    type: 'confirm',
    name: 'useGit',
    message: '是否初始化Git仓库？',
    default: false
  },
  {
    type: 'rawlist',
    name: 'projectType',
    message: '请选择项目模板：',
    choices: ['vue', 'react','koa','express']
  },
  
]).then(answers => {
  console.log('项目名称：', answers.projectName);
  const spinner = ora('loading').start();
  let templateType = 'vuejs/vue'
  let targetPath = path.resolve(process.cwd(), answers.projectName);
  // 在这里可以根据用户的选择生成相应的项目结构
    if (answers.projectType === 'react') {
    templateType = 'feedbook/react'
    // 生成Vue项目的逻辑
  } else if (answers.projectType === 'koa') {
    console.log('正在生成Koa项目...');
    templateType = 'koajs/koa'
    // 生成Koa项目的逻辑
  } else if (answers.projectType === 'express') {
    console.log('正在生成Express项目...');
    // 生成Express项目的逻辑
    templateType = 'expressjs/express'
  }
  fs.mkdirSync(targetPath);

  console.log('正在初始化Git仓库...');
      // 初始化Git仓库的逻辑
      
  downgit(`github:`+templateType,targetPath,{clone:false},function(err){
    if(err){
      console.log(chalk.red('项目生成失败100：'),err);
      return
    }else{
      console.log(chalk.blue('项目生成成功100！'));
    }
    spinner.stop();
  }) 
});