npm包学习

赏花赏景赏时光

已于 2022-10-31 23:36:45 修改

阅读量526

点赞数

分类专栏：前端工具文章标签： npm

于 2022-10-30 23:00:16 首次发布

本文链接：https://blog.csdn.net/tangxiujiang/article/details/127543214

版权

前端工具专栏收录该内容

19 篇文章 1 订阅

订阅专栏

想开发自己的的工具包，那必然要借鉴一些常用的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

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

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