脚手架

83 阅读2分钟

以 vue-cli 为例

脚手架简介 

脚手架是一个操作系统的客户端。

vue create my-app --force
  • 主命令:vue

  • command:create

  • command 的 params :my-app

  • 这里的 --force 叫 options, 可以理解为用来辅助脚手架确认在特定情况下用户的选择。

脚手架的执行原理

  1.  在终端输入命令:vue xxx

  2.  终端解析出 vue 命令

  3.  终端在环境变量中找到 vue 命令

  4.  终端根据 vue 命令链接到实际的 vue.js 文件

  5.  终端使用 node 执行 vue.js

  6.  vue.js 解析 command/options

  7.  vue.js 执行 command

  8.  执行完成,退出执行

脚手架工具:lerna

lerna 是一个优化基于 git + npm 的多 packages 的项目管理工具。

官网:lerna.js.org/

yargs

Yargs 框架通过使用 Node.js 构建功能全面的命令行应用,它能轻松配置命令,解析多个参数,并设置快捷方式等,还能自动生成帮助菜单。

yargs 入门使用,常用api

#!/usr/bin/env node
const yargs = require('yargs/yargs')
const dedent = require('dedent') // 清楚文本顶格空格
const pkg = require('../package.json')
const argv = process.argv.slice(2)
const cli = yargs()
const context = {    
    longerVersion: pkg.version
}

cli
.usage('longer [command] <options>') // 顶部会打印出输入的提示
.demandCommand(1, '最少输入一个 command 命令') // 最少输入 command 命令数量
.alias('h', 'help') // 别名
.alias('v', 'version')
.strict() // 严格模式 输入错误信息会有反馈提示
.recommendCommands() // 如果输错命令 会去注册的命令里找一条最相近的给一条提示 (Did you mean list?)
.fail((err, msg) => {    
    console.log('err:', err)
}) // 命令错误处理
.wrap(cli.terminalWidth()) // 设置命令行宽度  terminalWidth 返回当前命令行宽度
.epilogue(dedent`   这是自定义页脚的一句话`) // 自定义页脚 !! ES6里面 模板字符串函数调用传参可以不加括号 具体参考阮一峰ES6教程 -字符串扩展-模板字符串-7模板标签
.options({    
    debug: {        
        type: 'boolean',       
        describe: '开启 debug 模式',        
        alias: 'd'    
    }
}) // 添加多个全局选项  具体配置参数参考文档
.option('registry', {    
    type: 'boolean',    
    // hidden: true,    
    describe: '全局的仓库地址',    
    alias: 'r'
}) // 添加单个全局选项
.group(['debug'], '开发命令:') // 添加选项分组
.group(['registry'], '安装命令:') // 添加选项分组
.command('init [name]', '初始化项目', (yargs) => {    
    yargs.option('name', {        
        type: 'string',        
        describe: '初始化项目名称',        
        alias: 'n'    
    }
)}, (argv) => {   
    console.log(argv)
}) // command 命令注册 第一种方式
.command({    
    command: 'list',    
    aliases: ['ll', 'ls', 'la'],    
    describe: '获取列表',    
    builder: (yargs) => {},    
    handler: (argv) => {        
        console.log(argv)    
    }
}) // command 注册命令的第二种 传入一个对象配置
.parse(argv, context) // 解析 argv 参数, 并且可以往 argv 里拼接参数