npm包学习

news2024/9/20 22:43:08

想开发自己的的工具包,那必然要借鉴一些常用的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]是要跑的脚本,后续为用户参数;
  • electronargv[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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2139.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

100天精通Python(数据分析篇)——第62天:pandas常用统计方法与案例

文章目录每篇前言一、常用统计方法与案例1. 求和&#xff08;sum&#xff09;2. 求平均值&#xff08;mean&#xff09;3. 求最小值&#xff08;min&#xff09;4. 求最大值&#xff08;max&#xff09;5. 求中位数&#xff08;median&#xff09;6. 求众数&#xff08;mode&am…

jQuery网页开发案例:jQuery 其他方法--jQuery 拷贝对象,多库共存,jQuery 插件

jQuery 对象拷贝 如果想要把某个对象拷贝&#xff08;合并&#xff09; 给另外一个对象使用&#xff0c;此时可以使用 $.extend() 方法 语法&#xff1a; $.extend([deep], target, object1, [objectN]) 1. deep: 如果设为true 为深拷贝&#xff0c; 默认为false 浅拷贝 …

做减法才是真本事,别以为你很能学,做加法一点都不难

文章目录 顶级的高手才敢做减法 前言 一、做减法才是真本事 二、大数据梦想联盟活动开启 顶级的高手才敢做减法 前言 大多数人不懂&#xff0c;不会&#xff0c;不做&#xff0c;才是你的机会&#xff0c;你得行动&#xff0c;不能畏首畏尾 大数据等于趋势&#xff0c;一…

Vue中computed和watch区别

前言 vue中的computed和watch我们经常会用到&#xff0c;那么在什么场景下使用computed和watch&#xff0c;两者又有什么区别呢&#xff0c;傻傻分不清楚。记录一下&#xff0c;温故而知新&#xff01; computed computed是计算属性&#xff0c;基于data中声明过或者父组件传递…

makkefile文件自动化编译以及基础文件命令(补)

目录makefile文件&#xff1a;实现自动化编译基础文件命令find&#xff08;查找&#xff09;grep&#xff08;过滤&#xff09;| &#xff08;管道&#xff09;关机重启文件压缩解压分步压缩解压一步压缩解压makefile文件&#xff1a;实现自动化编译 文件名称必须是:makefile …

【day15】每日强训编程题——查找输入整数二进制中1的个数手套

查找输入整数二进制中1的个数_牛客题霸_牛客网 这道题非常简单&#xff0c;就一个思路&#xff1a; 按位与& 任何一个数按位与上1&#xff0c;如果这个数二进制的最后一位是1&#xff0c;那么按位与的结果就是1&#xff0c;否则就是0 代码思路&#xff1a;n按位与1后往右…

【splishsplash】PBD探究

上次我们探究了PBD是如何引入plishsplash的&#xff0c;以及其控制流。 https://blog.csdn.net/weixin_43940314/article/details/127569870 这次我们来讲如何在自己新建的类中控制PBD刚体。 上回说到 Simulator\PositionBasedDynamicsWrapper\PBDWrapper.cpp 中的 void PBD…

AXI协议详解(6)-原子访问

原子访问 本章介绍了 AXI 协议如何实现排他访问和锁定访问机制。 它包含以下部分&#xff1a; 原子访问排他访问锁定访问 6.1 原子访问 为了实现原子访问权限&#xff0c;ARLOCK[1:0] 或 AWLOCK[1:0] 信号提供排他访问和锁定访问。 表 6-1 显示了 ARLOCK[1:0] 和 AWLOCK[1:…

3.NLP基础:文本可视化简述

1.文本可视化的流程 文本可视化依赖于自然语言处理&#xff0c;因此词袋模型、命名实体识别、关键词抽取、主题分析、情感分析等是较常用的文本分析技术。文本分析的过程主要包括特征提取&#xff0c;通过分词、抽取、归一化等操作提取出文本词汇级的内容&#xff0c;利用特征…

Qt 集成 FFmpeg 实现颜色格式转换

目录 1. Qt 集成 FFmpeg 1.1 下载 FFmpeg 1.2 Qt 集成 FFmpeg 1.2.1 修改 .pro 文件 1.2.2 放入 dll 文件 1.2.3 代码中使用 FFmpeg 2. 图像格式转换 3. 预览 4. 项目地址 项目需要&#xff0c;写个小工具来实现图像颜色格式的转换&#xff0c;主要的 Feature 如下&am…

百度最强中文AI作画大模型

前言 最近文生图领域的发展可谓是分生水起&#xff0c;这主要是得益于最近大火的扩散模型&#xff0c;之前笔者也写过一篇关于文本生产3D模型的文章&#xff0c;大家感兴趣的可以穿梭&#xff1a; https://zhuanlan.zhihu.com/p/570332906 今天要给大家介绍的这一篇paper是百度…

AXI协议详解(10)-非对齐传输

非对齐传输 本章介绍 AXI 协议如何处理未对齐的传输。 它包含以下部分&#xff1a; • 未对齐的传输 • 示例 10.1 关于未对齐传输 AXI 协议使用基于突发的寻址&#xff0c;这意味着每个事务由多个数据传输组成。 通常&#xff0c;每个数据传输都与传输大小对齐。 例如&…

Linux入门

Liunx 一计算机发展历史第一台计算机的诞生时代背景线计算机的发展线国家线时间线收束Liunx诞生操作系统简述购买云服务器以及登录增加用户总结学习的同时别忘了每天运动&#xff01; 身体才是革命的本钱 计算机发展历史 第一台计算机的诞生 第一台计算机在1946年2月14日在美国…

webpack学习踩坑笔记(持续更新中...)

目录 学习内容&#xff1a; 1.5使用plugin 1.6 使用DevServer 学习内容&#xff1a; 《深入浅出webpack》 深入浅出Webpack Dive Into GitBook 因为很多内容书上已经写了&#xff0c;这里主要是记录一下个人看书过程中遇到的坑 1.5使用plugin 这一部分介绍了一个可以把…

vue3事件处理

获取到用户点击或者勾选的值 <li click“clici(item)” v-for"item in data" :key"id"> {{item}}</li> <script> clici(item){ } </script> v-model 实现数据的双向绑定 v-model.lazy 只有当用户提交或enter键后才触…

【数据结构】动态顺序表(C语言实现)

文章目录0. 前言1. 线性表2. 顺序表2.1 概念及结构3. 动态顺序表的实现3.1 定义结构3.2 接口函数总览3.3 初始化3.4 检查增容3.5 尾插3.6 尾删3.7 头插3.8 头删3.9 查找3.10 指定下标位置插入3.11 指定下标位置删除3.12 修改3.13 打印3.14 销毁4. 完整代码SeqList.hSeqList.cte…

HTML常见标签总结

目录 1.标题标签 2.段落标签 3.字体修饰标签 4.图片标签 5.超链接标签 6.表格标签 7.列表标签 8.表单标签 9.下拉菜单 10 多行文本框 1.标题标签 一级标题是<h1></h1>中间填上标题的内容,一共可以设置六级标题,数字越小,标题就越大越粗 我们测试一段代码 …

深度残差收缩网络(Deep Residual Shrinkage Networks for Fault Diagnosis )

摘要-本文开发了新的深度学习方法&#xff0c;即深度残余收缩网络&#xff0c;提高来自高噪声振动信号的特征学习能力&#xff0c;并实现较高的故障诊断准确性。软阈值作为非线性转换层插入到深层体系结构中&#xff0c;以消除不重要的特征。此外&#xff0c;考虑到通常为阈值设…

大数据编程实验一:HDFS常用操作和Spark读取文件系统数据

大数据编程实验一&#xff1a;HDFS常用操作和Spark读取文件系统数据 文章目录大数据编程实验一&#xff1a;HDFS常用操作和Spark读取文件系统数据一、前言二、实验目的与要求三、实验内容四、实验步骤1、HDFS常用操作2、Spark读取文件系统的数据五、最后我想说一、前言 这是我…

Swift基础——字典

Swift基础——字典 嗯。。。前面我们已经学习了数组&#xff08;相关文章地址&#xff09;&#xff0c;我们知道了在Swift中&#xff0c;苹果提供了两种集合类型来存储集合的值即Array和Dictionary。 Dictionary字典 字典&#xff1a;一种存储多个相同类型值的容器&#xff…