Node学习-第二章-创建脚手架工具

开发脚手架工具

脚手架是个工具，通过输入命令创建项目初始化代码文件。

脚手架工具的特点：1.指令执行 2.可交互 3.初始化项目构架。

创建脚手架工具教学

主要步骤：

1. 创建自定义指令
2. 接受命令参数
3. 设计终端交互
4. 模块化抽离
5. 下载远程代码
6. 项目初始化完成提示

1. 创建全局指令

1. 创建项目文件夹，并且在文件中新建名称为bin子文件夹，然后在bin文件夹中创建文件cli.js文件。这样做的目的是我们后续生成package.json文件时，会自动配置我们的指令。当作我们的一个全局命令入口。
2. 终端输入：npm init 初始化脚手架信息。输入脚手架的名称，之后的配置信息默认即可。初始化结束之后，生成package.json文件，“mycli"就是我的脚手架名称，“bin”, 配置的是命令程序入口。
   
3. 编写cli.js程序
   首先终端使用指令：npm link 将指令全局挂载。然后在cli.js文件中代码首行配置，指令运行环境。
   

2 接受命令参数

1. 获取命令参数
   终端输入 mycli --help, cli.js 文件中打印这个help入参。

console.log(process.argv[2]);

2. 引入第三方包，处理指令参数。commander。npm install commander。commander。

// 引入commader
const {program} = require('commander');
program.parse(process.argv);

控制台 输入mycli --help, 可以看到控制提示，已经有默认的help指令。
自定义指令（“’–framwork‘ ’别名 -f‘ ’参数‘”， ‘指令说明’）

const {program} = require('commander');
program.option('-f --framwork <framwork>', '设置框架');
program.parse(process.argv);

3. 使用commander处理自定义命令参数。
   通过.command()或.addCommand()可以配置命令，有两种实现方式：为命令绑定处理函数，或者将命令单独写成一个可执行文件。

// 第一个参数为命令名称，命令参数可以跟在名称后面，也可以用.argument()单独指定。参数可为必选的（尖括号表示）、可选的（方括号表示）或变长参数（点号表示，如果使用，只能是最后一个参数）
program.command('create <project> [destination...]' ) // 设置指令，指令
.alias('crt') // 别名
.description('创建项目') // 命令说明 自动在help生成
.action((project, args)=>{
  // 命令行的执行逻辑代码
  console.log('参数', project, args)
})
program.parse(process.argv);

3 设计终端交互

1. npm install inquirer
2. 代码

var inquirer = require('inquirer');
inquirer.prompt([
  {
    type: 'input',
    name: 'username',
    message: '你的名字'
  }
]).then((answer)=>{
  console.log(answer)
})

3. 在使用中可能会提示require 不能用，建议降低inquirer的版本，npm i inquirer@8.2.0 。

4. 模块化抽离

创建lib文件夹，然后在lib中创建子文件夹core, 其中创建JS脚本,存放主要的逻辑代码。
help.js

const myhelp = function(program){
  program.option('-f --framwork <framwork>', '设置框架');
}
module.exports = myhelp;

command.js

const myAction = require('../core/action')
var command = (program)=>{
  program.command('create <project> [destination...]' ) // 设置指令，指令
  .alias('crt') // 别名
  .description('创建项目') // 命令说明 自动在help生成
  .action((project, args)=>{
    // 命令行的执行逻辑代码
    myAction(project, args)
  })
}
module.exports = command;

action.js

var inquirer = require('inquirer');
var config = require('../../config')
const myAction = (project, args)=>{
  // 命令行的执行逻辑代码
  console.log('参数', project, args)
  inquirer.prompt([
    {
      type: 'list',
      name: 'framwork',
      choices: config.framwork,
      message: '请选择你使用的框架'
    }
  ]).then((answer)=>{
    console.log(answer)
  })
}
module.exports = myAction;

最后集成到bin/cli.js

#! /Users/shishuai/.nvm/versions/node/v17.0.1/bin/node
const {program} = require('commander');
const myhelp = require('../lib/core/help');
myhelp(program);
const command = require('../lib/core/command');
command(program)
program.parse(process.argv);

5 下载远程代码

项目中引入下载插件，并且在action.js中,通过用户的选择“模版”的指令，下载对应的文件。

1. 引入插件 npm install download-git-repo
2. 抽离下载方法，创建download.js

const download = require('download-git-repo');
const downloadFun = function(url, project) {
  download('direct:'+url, project,{clone:true},(err)=>{
    console.log(err)
  })
}
module.exports = downloadFun;

3. config.js中配置不同选择项的下载路径

module.exports = {
  // 可选择的框架
  framwork:[
    'express','koa', 'egg'
  ],
  // 框架的下载地址
  framworkUrl:{
    express:'https://github.com/expressjs/express.git',
    koa:'https://github.com/koajs/koa.git',
    egg:'https://gitee.com/mirrors/eggjs.git'
  }
}

4. action.js 引入使用， 核心代码展示

// 远程下载
var downloadFun = require('./download');
const myAction = async (project, args)=>{
  // 命令行的执行逻辑代码
  console.log('参数', project, args)
  const answer = await inquirer.prompt([
    {
      type: 'list',
      name: 'framwork',
      choices: config.framwork,
      message: '请选择你使用的框架'
    }
  ])
  downloadFun(config.framworkUrl[answer.framwork],project)
  console.log(answer)
}

5. 优化下载，加入laoding 动画, 加入不同的颜色字体
   引入插件 npm install ora@5。 优化动画
   引入插件 npm install chalk。优化字体

   使用插件

   
   const ora = require('ora')
   const chalk = require('chalk')
   const downloadFun = function (url, project) {
   	const spinner = ora().start()
   	spinner.text = '代码正在下载……'
   	download('direct:' + url, project, { clone: true }, (err) => {
   	 if (!err) {
         spinner.succeed('代码下载成功')
         console.log(chalk.blue.bold('Done!'), chalk.bold('you run:'));
         console.log('cd ' + project);
         console.log('npm install ');
         console.log('npm run dev ');
       } else {
         spinner.fail('代码下载失败')
       }
   	})
   }