npm包学习

Posted 2022-11-26 赏花赏景赏时光

想开发自己的的工具包，那必然要借鉴一些常用的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(<自定义标志>, <选项描述>,[默认值])

1. option('-c, --color', 'color description', 'red') // 带默认值
2. option('-c, --color <color>, 'color description', 'red') // 带必填选项
3. option('-c, --color [color]], 'color description', 'red') // 带可选选项
4. .option('-n, --number <numbers...>', 'specify numbers') // 变长参数选项

.version()

作用：定义命令程序的版本号；

用法：version(<版本号，必须>, [自定义标志，可选], [描述，可选])

用法示例：

1. program.version('0.0.1') // 自定义标志省略，默认为-V.  --version
2. program.version('0.0.1', '-v --vers', '输出当前应用程序版本号') 

.command()

作用：配置命令，有两种实现方式：为命令绑定处理函数，或者将命令单独写成一个可执行文件；

用法：command(‘命令名称  [命令参数 可选]   <命令参数 必选>')，命令参数可以跟在名称后面，也可以用.argument()单独指定。参数可为必选的（尖括号表示）、可选的（方括号表示）或变长参数（点号表示，如果使用，只能是最后一个参数）；

注意：在命令后面传入的参数会被传入到 action 的回调函数以及 program.args 数组中；

用法示例：

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. // 通过独立的的可执行文件实现命令 (注意这里指令描述是作为`.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

参考文档：http://t.csdn.cn/E59o3