开发一个类似 vue-cli 的脚手架工具

开发一个类似 vue-cli 的脚手架工具

写着前面

目前已经开发了一款自己的脚手架 —— karl-cli

NPM平台地址：https://www.npmjs.com/package/karl-cli

也可以查看【karl-cli】使用文档查看教程，里面包括了安装步骤、命令集合以及最重要的可能遇到的问题集😇

准备工作

使用到的NPM库

• commander
• download-git-repo
• ejs
• Inquirer
• ora
• chalk
• log-symbols

每个NPM库的作用在接下来的文档中有说明，这里就不再赘述了

基础构建

1. 新建index.js文件作为入口文件
2. 运行npm init -y命令创建package.json文件
3. 使index.js自动运行，需要在index.js文件的第一行加上如下代码：

#!/usr/bin/env node

这行代码叫做shebang或者hashbang，虽然可以写绝对路径但因为兼容性问题还是推荐上述这种写法

4. 为了让终端能够识别自己创建的指令，如karl，需要在package.json中加入如下语句：

{
   
	...
  "bin": {
   
    "karl": "index.js"
  }
  ...
}

5. 然后运行npm link指令

解释作用

这样会让这个bin和真正环境变量那个地方做一个链接，就能使能将karl这个作为终端命令配置到那个环境变量里去

6. 如果在index.js里写入如下代码：

console.log("my cli")；

然后输入命令karl后，终端中就能出现如下结果：

karl@KarldeMacBook-Pro Karl-cli % karl    
my cli

自行检查

完成上述操作后，文件夹内只有index.js和package.json两个文件，并且能在终端打印出结果🎉

自定义指令集合

要完成这个功能需要下载第三方库——commander

需要在终端运行指令npm install commander，然后在相应页面导入：

const program = require('commander');

命令输出版本号使用示例

#! /usr/bin/env node

const program = require('commander');

program.version("1.1.1"); // [1]

program.parse(process.argv); // [2]

语句解释

[1] 这个语句的功能是在终端输入karl --version或者karl -V后输出当前版本号

[2] 这个语句的功能是将指令后的字符串进行解析，也就是再输入karl --version后能解析--version这个命令

运行结果

karl@KarldeMacBook-Pro Karl-cli % karl --version
1.1.1
karl@KarldeMacBook-Pro Karl-cli % karl -V       
1.1.1

以及可以输入karl --help

karl@KarldeMacBook-Pro Karl-cli % karl --help
Usage: karl [options]

Options:
  -V, --version  output the version number
  -h, --help     display help for command

选项处理功能的使用

增加自己的选项处理

代码如下：

program.option("-p --paper <paper>", "This is a option description");

然后在终端输入karl --help，得到以下结果：

karl@KarldeMacBook-Pro Karl-cli % karl --help   
Usage: karl [options]

Options:
  -V, --version  output the version number
  -p --paper    This is a option description
  -h, --help     display help for command

获取可选参数的值

根据官方文档的示例，具体操作如下：

const options = program.opts();
program.option("-p --paper <paper>", "This is a option description");
program.parse(process.argv);
console.log(options.paper);

首先需要在终端运行命令：

karl --paper mypaper

终端打印结果如下：

karl@KarldeMacBook-Pro Karl-cli % karl --paper mypaper
mypaper

注意事项

一定要在--paper后加上参数😖，否则会报如下错误：

karl@KarldeMacBook-Pro Karl-cli % karl --paper        
error: option '-p --paper <paper>' argument missing

添加指令

示例如下：

const program = require('commander');
program
    .command("create <project>")
    .description("Create your own project. For example: karl create demo")
    .action(project => console.log(project)