【手把手带你撸一个脚手架】第一步, 创建第一个命令

WTF 不知道脚手架是啥? 那抓紧恶补一下前端基础把兄die, 相信不久的以后你就会回来的.

ps: 本文文件操作基于 bash, mac 同学直接用 terminal 或 iterm 即可, win 用户推荐使用 git bash

脚手架, 源自于建筑行业, 通俗的讲就是一个项目搭建的工具. 比较熟知的有 vue-cli create-react-app 等等, 这类工具通常以 xxx-cli 命名, 不废话先甩一个 npm 战绩

小哥哥, 看看这数据, 你到底要还是不要嘛...

==================== 分割线 ====================

实现 node 和 shell 的交互

光说不练假把式, 第一步我们先跑一个自己的 node 命令

首先创建一个项目目录, 根据惯例, 我们的脚手架也叫 cli, 就叫 learn-cli 吧, 好好学习, 天天向上

mkdir learn-cli

然后, 直接 npm init -y 创建一个 node 项目

cd learn-cli
npm init -y

用你喜欢的编辑器, 打开 learn-cli 目录, 推荐 vscode, 在 package.json 中添加代码

"bin": {
    "learn": "./bin/learn.js"
},

创建 bin 目录和 learn.js 文件, 在 learn.js 中添加以下代码. 文件头部的 #!/usr/bin/env node 这一句是告诉 shell 要以 node 来解析接下来的 learn 文件. 剩下的就是我们熟悉的 js 啦 ^ - ^

#!/usr/bin/env node
console.log('好好学习, 天天向上')

通过终端进入到项目的根目录执行 npm link 如果出现一下提示说明 link 成功

这个命令的作用其实就是添加了两个软链(win 用户可以理解为快捷方式)到系统的环境变量下. 此时, 在命令行中输入 learn 试一下

哈哈哈哈, 熟悉的名言就这么出来啦, 出来啦....

接收命令行传来的参数

我们可以通过 process.argv 获取到启动 node 进程时传入的命令行参数

使用原生的方式获取命令好传入的参数

调整 learn.js 文件为如下:

#!/usr/bin/env node
console.log(process.argv[2] + '好好学习, 天天向上')

再次回到终端执行 learn 圈圈, 即可得到以下输出, 关于为什么要用 process.argv[2] 请参阅文档

使用 commander 接收命令行传入的参数

使用原生的方式可以获取到传入的参数, 但是这种方式更适合简单的演示项目, 在这里我们选用社区优选的 commander 来处理参数问题, 别问我为什么这么用, 就是为了两个字 ------- 装逼

先上一个官方的栗子

#!/usr/bin/env node
const program = require('commander')
program
.version('0.0.1')
.option('-C, --chdir <path>', 'change the working directory')
.option('-c, --config <path>', 'set config path. defaults to ./deploy.conf')
.option('-T, --no-tests', 'ignore test hook')

program
.command('setup')
.description('run remote setup commands')
.action(function() {
  console.log('setup');
});

program
.command('exec <cmd>')
.description('run the given remote command')
.action(function(cmd) {
  console.log('exec "%s"', cmd);
});

program
.command('teardown <dir> [otherDirs...]')
.description('run teardown commands')
.action(function(dir, otherDirs) {
  console.log('dir "%s"', dir);
  if (otherDirs) {
    otherDirs.forEach(function (oDir) {
      console.log('dir "%s"', oDir);
    });
  }
});

program
.command('*')
.description('deploy the given env')
.action(function(env) {
  console.log('deploying "%s"', env);
});

program.parse(process.argv);

首先, 安装 commander

npm i commander -S

其次将官方示例粘贴到我们的 learn.js 中, 随便执行一个命令试试learn 圈圈 learn -V, 就是这么莫名其妙的好用了.

到目前为止, 我们已经完成了万里长城第一步, 有兴趣的小伙伴可以自己尝试一下下面的步骤喲 ^ _ ^.

系列文章: