muwoo / blogs

📚一个前端的博客。
2.32k stars 351 forks source link

搭建一个基础的cli工具 #7

Open muwoo opened 6 years ago

muwoo commented 6 years ago

前言

作为Vue的用户,离不开Vue-cli,当我们构建项目的时候,项目大部分都会运行以下命令:vue init webpack myProject 根据交互式问答,我们一步步构建出了自己的项目基本结构,如果你已经知道如何搭建这样一个交互式脚手架,下面的内容就可以不用看了...

npm 全局模板

1. hello world

通过我们会通过npm install -g xxx来进行全局包的安装。-g 是将一个包安装为全局可用的可执行命令,他根据包描述文件package.json中的bin字段进行配置。

// package.json
{
  "name": "demo",
  "version": "0.0.1",
  "bin": {
    "demo": "./bin/test"
  }
}

./bin/test

#!/usr/bin/env node
console.log('hello world')

下面运行npm i ./ -g 来全局安装当前目录到全局环境,运行demo, 看到了熟悉的hello world。

注意脚本中需要指定#!/usr/bin/env node来声明脚本的执行环境为nodejs。

2. commder

当一个Nodejs程序运行时,会有许多存在内存中的全局变量,其中有一个叫做process,意为进程对象。process对象中有一个叫做argv的属性。命令行程序的第一个重头戏就是解析这个process.argv属性。 我们把上面的例子改造一下,把process.argv打印出来看看: image 当我们需要根据参数,执行不同任务的时候,我们就需要去解析这样的参数,如果不嫌麻烦,我们也可以自己写一个简陋的函数去处理这样的事情。 commander.js是TJ所写的一个工具包,其作用是让node命令行程序的制作更加简单。下面我们来一个简单的🌰

#!/usr/bin/env node

require('commander')
  .version('0.0.1')
  .description('a test cli program')
  .option('-n, --name <name>', 'your name', 'monkeyWang')
  .option('-a, --age <age>', 'your age', '22')
  .parse(process.argv)

运行demo -h image 此时,会列举出cli脚手架的一些提示信息,提示信息通过option选项进行定义,描述信息通过description选项进行定义。最后可以通过parse来解析命令行参数