小知识，怎么编写自己的命令？ 橙某人 -v

前言

做前端开发的各位小伙伴，相信大家日常应该经常使用各种各样的命令行操作，通过命令即可快速生成项目的基本结构，例如：在安装好 vue-cli 后，我们通过 vue create your-project-name 命令，即可快速生成这么一个项目目录。

image.png

又或者这样：

image.png

那么这些命令是如何实现的呢？我们应该怎么来自定义我们自己的命令呢？比如我想如此：

image.png

本章，我们就来实现自定义自己的命令，耍耍威风。

正戏

第一步

我们先找个风水宝地（随便找个文件夹），先初始化创建 package.json 文件，npm init -y。

{
  "name": "cmd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
复制代码

第二步

在 package.json 文件中，添加 bin 可执行命令。

{
  "name": "cmd",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "bin": {
    "橙某人": "./bin/index.js"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
复制代码

第三步

创建执行文件 bin/index.js。

#!/usr/bin/env node
console.log(process.argv);
console.log(process.argv[2] === '-v' ? '0.0.1' : '真帅');
复制代码

#!/usr/bin/env node 这句话是告诉你的电脑，当执行这个文件的时候，使用 nodeJS 环境来执行。

process.argv 可以用来获取命令行携带的参数，我们可以把它打印出来看看：

image.png

由图就能很清晰知道命令行携带参数的情况了，当然这样子获取参数还是比较麻烦的，现在有一些 npm 包能够更加快速的获取参数，这里就不多讲啦，本质还是对 process.argv 进行的一个封装而已。

第四步

在你编写完文件后，最后在根目录下执行 npm link 。

image.png

当你看到如上图所示，就说明成功了，就可以愉快的使用你自定义的命令啦。

返回的目录就是你安装的 npm 的地址，你可以进入该目录查看，会有你的刚创建的命令的相关文件。

image.png

当你不要这条命令的时候，可以把这三个相关文件删除即可。

在window系统上 AppData 文件夹是隐藏的，可以自行某度一下，如何显示系统的隐藏文件，即可找到。

至此，本篇文章就写完啦，撒花撒花。

image.png

希望本文对你有所帮助，如有任何疑问，期待你的留言哦。 老样子，点赞+评论=你会了，收藏=你精通了。