【九月打卡】第2天 Node.js工程师学习笔记

课程名称: Node.js工程师养成计划

课程章节: Node 脚手架篇 - 打造自己的脚手架工具

课程讲师: 北瑶

课程内容:

脚手架介绍

• 什么是脚手架
  一个全局命令行工具，能够帮助我们实现项目初始化，创建基本的代码文件及目录。
• 脚手架的基本能力
  全局命令执行能力、命令行交互能力、项目代码下载能力
• 实现一个脚手架的基本逻辑
  创建自定义全局命令 -> 命令参数接收处理 -> 终端交互 -> 下载远程项目代码 -> 项目初始化完成提示

自定义全局命令创建

创建 js 文件, 内部设置 #! /usr/bin/env node 指令, 因为是脚本命令代码

#! /usr/bin/env node
// ========这个注释很重要===========
// Node CLI 应用入口文件必须要有这样的文件头
// 如果是 Linux 或者 macOS 系统下还需要修改此文件的读写权限为 755
// 具体就是通过 chmod 755 cli.js 实现修改
console.log('赟赟')

执行 npm init -y, 生成 package.json文件
使用 npm link命令挂载为全局命令，如果出现意外，可以使用 npm config get prefix 命令查找 npm 全局目录，然后查看是否存在重名目录，确认全局命令创建成功后，就可以使用

commander 命令参数处理

使用 commander 处理自定义帮助命令，使用 npm install commander -D 进行开发依赖的安装，在代码中进行引入

#! /usr/bin/env node
// 引入commander
const {program} = require('commander')
// 添加命令选项 (--help 时打印展示)
program.option('-f --framework <framework>','设置框架')
program.option('-d --dest <dest>','设置框架目录')
// 将命令行参数传入 方法，会自动解析参数命令
program.parse(process.argv)

添加自定义指令参数

command 方法用于设置自定义命令参数及参数值
alias 设置命令参数别名
description 命令的描述信息，–help 时会展示相关内容
action 方法是命令具体执行时的运行方法，回调函数接收 参数值及多个可选参数值

// 定义自定义指令参数
program
  .command('create <project> [others...]') //定义命令参数
  //  .command('config <set|get> [others...]') // 可配置自定义命令
  .alias('crt') // 命令参数别名
  .description('创建新项目') // --help 展示命令提示
  .action((name, args) => { // 命令具体执行的方法 (命令参数值，可选多个命令参数值)
    console.log(name + '执行了')
    console.log(args)
  })

命令行问答交互

安装 npm install inquirer 建议使用8x版本的commentJS规范, 我目前使用9x版本的ESM规范报错, 目前还没找到原因, 有大神可以指导么?

var inquirer = require('inquirer');

inquirer.prompt([
    {
        type: 'input',// 交互类型（文本框输入）
        name:'username',// 获取答案时的属性名
        message:'用户名',// 交互问题
        validate(an){ // 用户输入用于判断是否继续执行命令
            if(!an){
                return '必填选项'
            }else{
                return true
            }
        }
    },
    {
        type: 'confirm',// 交互类型（判断）
        // ↑ 可当作具体值使用，也可以在下次交互中进行获取使用
        name:'isLoad',// 获取答案时的属性名
        message:'是否加载',// 交互问题
        validate(an){ // 用户输入用于判断是否继续执行命令
            if(!an){
                return '必填选项'
            }else{
                return true
            }
        }
    },
    {
        type: 'list',// 交互类型（可循列表，需要配合choices数组配合）
        name:'lists',// 获取答案时的属性名
        message:'单选',// 交互问题
        choices: ['npm', 'cnpm', 'yarn'],
        validate(an){ // 用户输入用于判断是否继续执行命令
            if(!an){
                return '必填选项'
            }else{
                return true
            }
        },
        // 获取上一次的判断结果，返回布尔值，决定此问题是否提出
        when(iss){
            return iss.isLoad
        }
    },
    {
        type: 'checkbox',// 交互类型（可循列表，需要配合choices数组配合）
        name:'checks',// 获取答案时的属性名
        message:'爱好',// 交互问题
        choices: ['html', 'js', 'vue'],
        pageSize:3
        
    }
]).then((answers) => {
    // 获取问题及输入结果,对象形式
    console.log(answers) 
})

下载远程仓库模板代码

安装: npm install download-git-repo

let downloadFn = require('download-git-repo')
downloadFn('direct:git@gitee.com:xxxxxx/xxxxx.git', './xxx', { clone: true }, (err) => {
  console.log(err)
})

下载等待提示交互

安装: npm install ora
是一个有样式的终端展示工具，比较适用于长时间等待的任务，在命令行给用户做出等待提示，注意，与chalk 类似，从 6.0 开始转为 ESM 模块化，我们这里选择支持 CommonJS 规范的 5.x 版本，执行命令 npm install ora@5进行安装

/**
 * ora 实例化对象然后调用 start 
 * color设置文字颜色
 * text 设置文字内容
 * 
 * succeed 成功回调
 * fail 失败回调
 * info
 * ......
 */

命令行样式输出

安装: npm install chalk
使用命令 npm install chalk@4 安装，需要注意的是，从 5.0 版本开始，chalk 切换为 ESM 模块化规范，而我们的项目及其他扩展工具包，依然使用 commonjs 模块化规范。如果你想使用最新版，则需要将之前的代码修改为 ESM 规范，而我们这里就不在对之前的代码进行修改了，直接使用 4.x 系列版本。

/**
 * 使用 chalk 包可以修改命令行终端字体的颜色
 * + 提供的关键字设置颜色：green red orange 等等
 * + 提供 bold 方法接收加粗键字
 * + 提供 rgb 方法接收 rgb 颜色设置
 * + 可以设置背景颜色
 * + 格式化输出文字内容
 */

学习心得

从这章课程中, 对脚手架有了更深的认识, 大概知道vue-cli是如何开发的

课程截图

如何使用inquirer.js