想开发自己的的工具包,那必然要借鉴一些常用的npm包来帮我们解决一些问题,下面就罗列一些在学习vue-cli实现原理时候遇到的一些依赖包吧。
1、chalk
用途:可以修改终端输出字符的颜色,类似css的color属性,npm地址:chalk - npm
版本5以上使用的是ESM风格,引进包的方法采用es6的import chalk from ‘chalk’语法,如果想用于构建工具则采用5以下的版本,语法为Commonjs,引进包的方法采用require('chalk')
下面是该插件的简单用法罗列:
// 安装依赖包
npm i chalk
// 用法
const chalk = require('chalk');
console.log(chalk.blue('Hello world!')); // 输出蓝色字体
效果:
chalk的api可以查看npm文档:chalk - npm
2、commander
1)用途:可以让node命令更加简单,提供了命令行输入、参数解析等强大功能,官方文档地址:https://github.com/tj/commander.js/blob/HEAD/Readme_zh-CN.md
简单示例:
代码如下:
// 声明program变量
const { program } = require('commander');
// option-定义选项
program
.option('--first')
.option('-s, --separator <char>');
program.parse(); // 解析选项和和参数
const options = program.opts(); // 获取选项
const limit = options.first ? 1 : undefined;
console.log(program.args[0].split(options.separator, limit));
输出结果如下所示:
$ node split.js -s / --fits a/b/c
error: unknown option '--fits'
(Did you mean --first?)
$ node split.js -s / --first a/b/c
[ 'a' ]
2)commander的API简述
.option()
作用:定义命令选项,同时可以附加选项的简介;
用法:每个选项可以定义一个短选项名称(-后面接单个字符)和一个长选项名称(--后面接一个或多个单词),使用逗号、空格或
|
分隔。自定义标志后面可跟必须参数或可选参数,前者用 <> 包含,后者用 [] 包含;用法示例:.option(<自定义标志>, <选项描述>,[默认值])
- option('-c, --color', 'color description', 'red') // 带默认值
- option('-c, --color <color>, 'color description', 'red') // 带必填选项
- option('-c, --color [color]], 'color description', 'red') // 带可选选项
- .option('-n, --number <numbers...>', 'specify numbers') // 变长参数选项
.version()
作用:定义命令程序的版本号;
用法:version(<版本号,必须>, [自定义标志,可选], [描述,可选])
用法示例:
- program.version('0.0.1') // 自定义标志省略,默认为-V. --version
- program.version('0.0.1', '-v --vers', '输出当前应用程序版本号')
.command()
作用:配置命令,有两种实现方式:为命令绑定处理函数,或者将命令单独写成一个可执行文件;
用法:command(‘命令名称 [命令参数 可选] <命令参数 必选>'),命令参数可以跟在名称后面,也可以用
.argument()
单独指定。参数可为必选的(尖括号表示)、可选的(方括号表示)或变长参数(点号表示,如果使用,只能是最后一个参数);注意:在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中;
用法示例:
// 通过绑定处理函数实现命令(这里的指令描述为放在`.command`中) // 返回新生成的命令(即该子命令)以供继续配置 program .command('clone <source> [destination]') .description('clone a repository into a newly created directory') .action((source, destination) => { console.log('clone command called'); }); // 通过独立的的可执行文件实现命令 (注意这里指令描述是作为`.command`的第二个参数) // 返回最顶层的命令以供继续添加子命令 program .command('start <service>', 'start named service') .command('stop [service]', 'stop named service, or all if no name supplied');
独立的可执行(子)命令:
当
.command()
带有描述参数时,就意味着使用独立的可执行文件作为子命令。 Commander 会尝试在入口脚本的目录中搜索名称组合为command-subcommand
的文件,如以下示例中的pm-install
或pm-search
。搜索包括尝试常见的文件扩展名,如.js
。 你可以使用executableFile
配置选项指定自定义名称(和路径)。 你可以使用.executableDir()
为子命令指定自定义搜索目录。你可以在可执行文件里处理(子)命令的选项,而不必在顶层声明它们。
示例代码:pm
program .name('pm') .version('0.1.0') .command('install [name]', 'install one or more packages') .command('search [query]', 'search with optional query') .command('update', 'update installed packages', { executableFile: 'myUpdateSubCommand' }) .command('list', 'list packages installed', { isDefault: true }); program.parse(process.argv);
.action()
作用:定义命令的回调函数;命令的回调函数的参数,为该命令声明的所有参数,除此之外还会附加两个额外参数:一个是解析出的选项options,另一个则是该命令对象自身command;
用法示例1:
// 通过绑定处理函数实现命令(这里的指令描述为放在`.command`中) // 返回新生成的命令(即该子命令)以供继续配置 program .command('clone <source> [destination]') .description('clone a repository into a newly created directory') .action((source, destination) => { console.log('clone command called'); });用法示例2: program .version('0.1.0') .command('rmdir') .argument('<dirs...>') .action(function (dirs) { dirs.forEach((dir) => { console.log('rmdir %s', dir); }); });program .argument('<name>') .option('-t, --title <honorific>', 'title to use before name') .option('-d, --debug', 'display some debugging') .action((name, options, command) => { if (options.debug) { console.error('Called %s with options %o', command.name(), options); } const title = options.title ? `${options.title} ` : ''; console.log(`Thank-you ${title}${name}`); });
.name()
作用:命令名称出现在帮助中,也用于定位独立的可执行子命令
用法:name(<命令名称>)
.usage()
作用:通过这个选项可以修改帮助信息的首行提示
用法:usage(<提示信息>)
示例代码:
program .name("my-command") .usage("[global options] command")
.description() 和 .summary()
作用:description 出现在命令的帮助中。当列为程序的子命令时,你可以选择提供更短的 summary 以供使用;
示例代码:
program .command("duplicate") .summary("make a copy") .description(`Make a copy of the current project. This may require additional disk space. `);
.on()
作用:自定义事件监听;监听命令、选项可以执行自定义函数;
program.on('option:verbose', function () { process.env.VERBOSE = this.opts().verbose; });
.parse() 和 .parseAsync()
.parse
的第一个参数是要解析的字符串数组,也可以省略参数而使用process.argv
。如果参数遵循与 node 不同的约定,可以在第二个参数中传递
from
选项:
node
:默认值,argv[0]
是应用,argv[1]
是要跑的脚本,后续为用户参数;electron
:argv[1]
根据 electron 应用是否打包而变化;user
:来自用户的所有参数。例如:
program.parse(process.argv); // 指明,按 node 约定 program.parse(); // 默认,自动识别 electron program.parse(['-f', 'filename'], { from: 'user' });
program.parse
文件名:test.js
作用:没有匹配任何选项的参数将会放到
program.args
数组中program
.usage('<template-name> [project-name]')
.option('-c, --clone', 'use git clone')
.option('--offline', 'use cached template')
program.parse(process.argv) // 解析命令行参数,参数放在属性args上
console.log(chalk.green('1+' + (program.args)))
在控制台输入:node test.js -c
控制台输出:1+
在控制台输入:node test.js -c webpack
控制台输出:1+webpack
在控制台输入:node test.js -c webpack testproject
控制台输出:1+webpack,testproject
3、download-git-repo
1)用途:用来下载git仓库,包括GitHub, GitLab, Bitbucket,地址:download-git-repo - npm
2)api介绍:下载一个git repository到destination文件夹,参数是options,callback是回调函数
download(repository, destination, options, callback)
参数介绍:
repository
1、可以采用下面简写形式
- GitHub -
github:owner/name 或者
owner/name
- GitLab -
gitlab:owner/name
- Bitbucket -
bitbucket:owner/name
a)默认是
master
分支, 但可以指定分支和tag ,如owner/name#my-branch
的撒多少
b)还可以指定自定义来源,如
gitlab:custom.com:owner/name
. 自定义来源默认 为https
或git@
, 还可以自己自定义协议2、Direct -
direct:url方式
这种方式会跳过上面简写的方式,直接传递 url。
a)如果使用 direct,并且没有 clone配置项, 你必须传入完整的zip文件地址, 包括分支(如果需要的话);
b)如果使用 direct 并带有 clone配置项, 你必须传入完整的 git repo url ,可以通过 direct:url#my-branch指定分支
destination
作用:下载仓库放置的位置,可选的参数对象,包含属性有:
1)clone - boolean,默认 false ,如果设置成 true,会使用 git clone http 下载. 这种方式可 能会比较慢, 不支持私人的 repositories.
2)其他配置项 (proxy, headers, filter, 等.) 会传递下去,并覆盖默认值
- http下载特有配置项: https://github.com/kevva/download#options
- clone 特有配置项: https://github.com/jaz303/git-clone#clonerepo-targetpath-options-cb
callback
回调函数;形如function (err),参数是错误信息