引言

今天和大家一起学习一下开发一个脚手架工具，作为我们初始化项目使用，因为我们组件库开发已经接近尾声了，接下来我们想除了正常通过npm下载引入配置之余，能提供一种更方便的模板初始化的途径，现在就让我们一起学习一下如何开发一个脚手架工具吧。

初始化

首先我们初始化一个node项目，创建一个空文件夹，然后我们打开终端控制台，输入如下内容npm init -y。初始化一个package.json文件，我们默认初始化的文件是这样的:

{
  "name": "demo-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
}

接下来我们在根目录下创建一个bin目录，在bin下创建一个文件nb,无需携带扩展名。

我们在文件头部加入如下代码:

#!/usr/bin/env node

接下来我们写一个打印输出的代码,修改后内容如下:

#!/usr/bin/env node

console.log("Hello World!");

接下来我们为了简化使用，我们来配置一下json文件。

{
  "name": "demo-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bin": {
    "nb": "bin/nb"
  },
  "dependencies": {
    "commander": "^10.0.0",
    "inquirer": "^9.1.4"
  }
}

我们加入了bin部分，让我们能快捷启动。

接下来我们执行 npm link将命令挂载到全局，然后再输入 nb 就可以到达刚才node ./bin/nb 的效果了。

Try

我们来试一下。

在任意处打开控制台，输入nb,我们可以看到如下效果:

接下来我们简单模拟一点指令。

我们修改nb文件如下:

#!/usr/bin/env node
const program = require("commander");
// 定义指令
program
  .version('0.0.1')
  .usage('<command> [options]')
  .command('init', 'A template')
  .action((option) => {
    // 回调函数
      console.log('Hello World')
  })
// 解析命令行参数
program.parse(process.argv);

接下来我们再在bin目录下创建一个nb-init文件，用作init时使用。

文件内容如下:

#!/usr/bin/env node
console.log("This is init");

好了，我们试一试这个雏形。

我们先输入nb，控制台内容如下:

再看看带参数的:我们输入nb -V，内容如下:

nb -h:

接下来我们试试 nb init方法:

再结合我们的nb-init文件，原来这样是调用我们nb-init文件啊。

我们也可以多准备一下如add等等的方法，并封装一些方法。